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.
- Show payment total: {payment_total}
- 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;
}
