Creating your order forms online and connecting them to your payment gateway is no walk in the park, for sure. But given the options that 123ContactForm provides within the web form builder, you can build complex order forms within minutes, no coding being involved during the process. So you can sit back and relax while the money starts coming from your website.
However, you might need this tutorial on how to best use the payments features of 123ContactForm to your advantage. Once you get the hang of them, your online business will grow immensely.
If you’ve previously browsed the form builder, you’ve certainly seen the Payments section. Although that’s the place where you cast the magic in online payments, you will need to know the basics of order forms in the Form Editor. Because there’s a link between what fields you add to your form layout and how they can be used in Payments, we will start from there.
With 123ContactForm you can build any type of payment form that will help you sell items, subscriptions, memberships, receive donations online and many more. Regardless of what type of payment form you want to create (except donation form), if you sell more than one item on the form, you will need to display them in any of the following form fields:
If you’re building a donation form, add any of the following form fields for the donation amount:
It’s very important that you use these fields if you want to set up payments on your web form. Proceeding to the Payments section, under Settings.
The Payments section is divided in three parts:
How does it work?
In the Calculations tab from Payments, you have two areas of focus:
Remember the items that you’ve added on your form? If you’ve used any of the form fields mentioned above for creating payment forms (not for donation), you will see them in the dropdown list that is located on top. For example: if you’ve added a single choice field with the items #product1, #product2 and #product3, the name of that single choice field will appear in the dropdown. Once you have selected it, move your cursor on the button to the right and select Value. Now you will see your items listed below, where you can add a value to each one of them.
By default, the payment summary is automatically populated with the fields that you’ve assigned prices to. But you can also create custom calculations by using mathematical operations such as multiplication, subtraction, addition or division.
What’s good about using custom calculations?
You can create a hotel reservation form that will calculate the number of days a customer will be staying based on the selected check-in and check-out dates. You can then use this number in your pricing scheme and charge your customers on submission.
How to do it:
In the example with the hotel reservation form, simple add a simple subtraction operation between the check-out date and the check-in date, if you have used two Date fields on the form. The result will show the number of days. You can hide the field on the form, if it’s not relevant to your customers, and use it in other formulas or expand the same formula to something more complex. It’s all up to you!
Calculating the Donation
Actually, there’s nothing to be calculated here. Donors will just type in the amount they want to donate and the form will process that amount on checkout. However, you have to set it up on your form.
In Payments, select the field for donation and assign it as a value. Next, give it the value 1 and remember to make the field required in the Editor.
Creating Your Payment Summary
You can display the payment summary on the form in two ways:
A third option that works with both of the two mentioned above is showing the payment summary on the form in real-time. This means the summary will popup on the form while customers fill out the form.
Best practice: If you want to show the payment summary in real-time, have the summary show up after submission, instead of displaying the Calculate button on the form.
Each time you assign a value or formula to a field, it will be automatically included in the payment summary below. This is the summary your customer will see before completing payments. Here you can:
You can also edit the payment summary by removing some of the items that you do not want to include in the final price calculation.
Below the payment summary you can apply a discount on the total amount or a tax. For example, you can apply a 24% VAT tax on the total amount.
Setting Up Coupon Codes
123ContactForm makes it easy for adding promotions to your order forms. Just click the Coupon codes button to open your coupon code system. Here are the steps in creating your first coupon code:
You can repeat the steps to create as many coupon codes as you want. If you want to remove a coupon code, return to the coupon codes lightbox and click the disable button on the right (symbol: –). If you want to delete them for good, use the X.
After having calculations setup and working, go to the Payment Processors tab within the Payments section. Here you can add the payment gateway that you need.
Note: Remember to always select the currency on the form that you use in your payment gateway account. This will prevent you from confusion.
Use the dropdown list to select a payment gateway and click the button on the right to add it to the form.
Now all you have to do is connect your payment gateway account to the form and enable the integration.
Don’t Forget To Test Your Payments
Testing your order form before publishing it on your website might save you some headaches and prevent some errors from occurring, especially if real money is involved.
You can use the sandbox option on the bottom part of the Payment Processors section to test your form as if you were the customer. You can go through the entire payment process and see if everything is working smoothly. Once you have done testing, however, remember to disable the option, otherwise real payments will not be processed.
Moving to the Notifications tab, under Payments. You can opt to receive email notifications right after the form has been submitted or only after the payment has been processed. This is the email notification you have set up in the Notifications section, right at the beginning.
Aside of the confirmation messages (autoresponders) that is triggered on submission (customized in Notifications), you can set up confirmation messages that the customers will receive only after their payment has been successfully processed in your payment gateway account.
By using the customize message link, you can modify the content of the message anyway you want.
The last part of payments involves the use of Webhooks, if you are interested in this part. It’s optional and recommended to developers only or people skilled in programming. To use this option, you need to use the Webhooks integration located in the Application section. In short, you can send some form data to your server via a webhook only after the payment has been processed. For example, you can save the names or emails of your customers in your own database only after their payment has been complete.
Hope this tutorial gave you some valuable insights on how to use the Payments section for building quality payment forms for your business. If you ever require further assistance, don’t hesitate to contact our customer support specialists at email@example.com.
Here are some other useful resources on this topic: