17 Premium Addons Completely Free!!

Buy ARForms Now & Get

Grab the Deal

ARForms Blog

Easy Ways to Create a WordPress Payment Form with Calculation

Published On February 11, 2021
Selling items on your WordPress website can be cumbersome at times. You won't be able to simply do that through your WordPress website by default!

If your business is to sell online products through your WordPress website, then you need to streamline an easy way to accept payments online securely and effortlessly to your customers.

That being said, you would need to offer multiple products or services options from your WordPress website with the means of your online WordPress forms.

Luckily, you can do so with the utilization of the best WordPress form builder plugin!

Thanks to the ARForms WordPress form builder plugin, a one of its kind ultimate plugin that offers an awesome set of highly advanced level features to help you build not just contact forms, but rather can accept the payments through WordPress forms for various purpose.

That is, you can accept payments for your products or services, events, or even charge the registration fee depending on the user's selection.

Now, creating a WordPress payment form is one thing, but if you want to showcase a WordPress payment form that can perform a mathematical calculation, then it is possible with the ARForms WordPress form builder plugin.

As with the ARForms WordPress form builder plugin, your visitors can be able to get the seamless shopping experience for multiple products to shop for your multiple products right away!

Here in this article, we will take you to the step-by-step guide that will help you to create and build a WordPress form that can let you accept the payments at the same time.

We will take you to the guided methods to create a WordPress payment form with calculation.

Methods to Create the WordPress Payment Forms that can handle the transactions

We will exactly show you the usage of the ARForms WordPress form builder plugin:

Here are the steps to look for creating a WordPress payment form with ARForms WordPress form builder plugin:

Method 1: Creating the WordPress online order form from Scratch

Well, when you install and activate the ARForms WordPress form builder plugin, you can then navigate to the ARForms> Add New Form directly from your WordPress dashboard.

You will be able to see the new window that popup with the options of Blank Form, Templates, and Sample Forms.

The first option of a Blank Form can be selected if you want to create and build a WordPress payment form from the scratch itself.

WordPress Payment Form with Calculation - Blank Form Payment Form-min
If you ought to create a payment form by choosing the blank form, then you got to consider adding all the fields from the beginning.

Here are the fields you need to consider while you are creating and building a payment form:

Inserting Fields for your product options.

First off, you would need to include the following fields into your Order online form:

  • Customer Information like (First Name, Last Name, Email, Phone number)

  • Single Checkbox

  • Checkboxes List (Adding the images in the checkboxes)

  • Drop Down Menu

  • Math Calculations

  • Billing Details

The above mentioned are the essential fields that you would require while creating a WordPress payment form with calculations.

At last, you would require to configure your WordPress payment form with the popular payment gateways. Well, the ARForms WordPress form builder plugin offers popular payment methods like Authorize.Net, PayPal, Stripe, and more.

We will dive deeper into it in our next step of choosing a WordPress payment form with calculation with Templates option in ARForms.

Method 2: Selecting a WordPress Payment Form with the calculation for ARForms Pre-Built Templates

This is the option that you will see next to the Blank form option when you go to ARForms> Add New Form. You can simply select the pre-defined Order Form from Templates that will display you the pre-made payment form in a hassle-free manner.

WordPress Payment Form with Calculation - Templates Order Form
This is how the payment form appears when you select the Order form from the Templates.

Order Form - Long and Lengthy

Well, you might be thinking that this is quite a bit long and lengthy form to look at, right? But, the beauty of the ARForms WordPress form builder plugin is such that, you can easily split up the long and lengthy form in a Multi-step form.

If you are wondering how to do that? Then it is simply done with the use of the Page Break option that you can find in the Other fields option on the left-hand side of the ARForms form editor.

Let's have a glance at the below image to check how to add the “Page Break field option:

WordPress Payment Form with Calculation - Page Break Option

Finally, when the payment form goes live on your WordPress website, then the payment form will appear as the multi-step form and not a long lengthy form.

Have a look at the image below to see how the payment form is displayed live:

WordPress Payment Form with Calculation - Payment form Live
Did you notice the grand total part of the select product step? There, you can see that the first product cost is $10, the second one costs $20, and $30 for the third product. Hence, when we select 1 quantity for all 3 products, the payment form automatically gives the grand total of $60.

That is done by utilizing the HTML Field option by activating the Enable Running Total toggle option.

Running Total in ARForms
While you apply the payment form from the ARForms templates, if you further want more customization and want to personalize with some more styling options, then you do not need to worry as you can easily apply various style options, even if you want to make your payment form more appealing then you can make use of the Custom CSS option as well.

Check the image below for the same:

Style Option and Custom CSS-min
Further, we will dive you into configuring your WordPress payment form with the payment method. Say, for instance, you need to configure your created Payment WordPress form with PayPal Configuration.

For that, you need to navigate to ARForms> PayPal Configuration. You will be directed to the new window of PayPal Configuration.

PayPal Configuration-min
You need to click on the Configure New Form option that will drive you to the new screen to easily select your WordPress payment form and configure it with PayPal.

You will see a lot more options on the PayPal configuration screen.

If you want to know more about the PayPal Configuration with ARForms, then read our documentation of ARForms PayPal integration.

Method 3: Choose the WordPress Payment Form from Sample Forms

At last, if the above-given WordPress payment form doesn't fit your Payment form requirements, then you can take a step ahead and select the WordPress Order form that can be found under the ARForms> Add New Form> Sample Forms.

Sample Form - Order Form-min
This is the kind of WordPress order form that is suitable if you want to show multiple products.

The pre-built sample WordPress order form in ARForms shows the different variants of the shirts with different colors and sizes.

So, whenever a customer chooses a single or multiple shirts (filling the quantity) from the WordPress order form, they will automatically get the total amount

Have a look at the image below that shows the WordPress order form with multiple product selections (by selecting the size, color picking option, total quantity with total amount)

Sample Order Form product select

Well, all the above order form things are made possible with the below fields:

  • Dropdown field

  • Checkboxes field (it allows to add the images)

  • Math calculation (for running total based on the selected quantity of the product)

Back and forth, you can see the basic order form details like customers information fields (first name, last name, email, phone number, and shipping details as well.

And just in case, if you want to make use of the ARForms WordPress payment forms with popular page builders like WPBakery Page Builder, Cornerstone, and Elementor, then ARForms WordPress form builder plugin has got that covered for that as you can find the native blocks for that!

Over to you

Finally, you can use the ARForms WordPress form builder plugin premium feature like math calculations to create a WordPress payment form like a Pro. Further, you need to ensure the payment method integration like PayPal, Stripe, and more to start making money by selling your multiple products/services utilizing the ARForms WordPress form builder plugin.

Have you found this post a good read? Do share it on social media channels to show us your support!
facebook icon

Brian Denim

Brian is a WordPress expert with a decade of dev experience, a knack for technical writing, a film buff, and an outdoor enthusiast.

© 2024 Repute InfoSystems - All Rights Reserved.