How to Create WordPress Online Payment Forms and Donation Forms?

In this in-depth tutorial I’m going to show you how to create WordPress online payment forms and donation forms without any fancy e-commerce plugin. I will show you how to create these types of forms:

• WordPress donation form
• WordPress online payment forms with pre-defined amount
• Payment form multiple product, conditional logic and shipping information
• WordPress multi-step payment form with quantity selection.

This is one of the forms I created during this tutorial.

Payment methods you will be able to use with these forms:

• Paypal
• Stripe
• Mollie
• RazorPay
• Offline payments

Which plugin did we use to create online payment forms for WordPress?

In this tutorial I am using Fluent Forms Pro plugin which is one of the best WordPress contact forms plugins out there. If you would like to get a nifty 20% discount from all Fluent forms plans then take a click on the linke below.

Video: How to Create WordPress Online Payment Forms and Donation Forms?

Shortcodes and CSS used in the video

In the tutorial I showed couple of shortcodes you can use to tweak your forms.

1. Show payment total: {payment_total}
2. Hide field for frontend users (used in form with pre-defined amount): ff_force_hide

CSS code for shipping, billing and coupon fields

/* SHIPPING AND PAYMENT FIELD HIGHLIGHT */
.shipping, .payment {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
}
/* COUPON FIELD HIGHLIGHT */
.coupon {
    border: 2px dashed #000;
    padding: 20px;
}
/* APPLY COUPON BUTTON */
.fluentform .ff_input-group-text {
    color: #000;
    background-color: #ffcc00;

}

Useful tips