Create an Easy Payment Form (for free!) with Forminator

Selling items on WordPress has never been as streamlined, thanks to Forminator, our 5-star forms plugin. You can set up your shop quickly and efficiently with free payment options like Stripe and Paypal integration, customizable product features, discount codes, and more — all for free!

If you’re trying to figure out an easier way to accepts payments online securely or put together a functional eStore without overcomplicating things, this tutorial will show you how you can sell stuff super easily without having to worry about an elaborate WooCommerce setup.

We’ll take you step-by-step through some of Forminator’s more advanced features that will benefit you and your shoppers.

You’ll also see how Forminator, combined with our free email capture plugin, Hustle, can make your online shop “pop” (literally, as you’ll see). Hustle can offer special discounts to your visitors before leaving your site and collect their email at the same time so you can continue marketing to them.

With Forminator, your visitors can be shopping in no time on a storefront like this…

Sell stuff super easily…no WooCommerce required!

We’ll start by setting up an order form and then look at enhancing it further with Hustle.

Throughout this tutorial, we’ll be working with an ordering form for a Dev Man t-shirt as an example:

The sales page we’re using has a ton of customized options.

BONUS: As we go through this, join the fun! Click here to check this t-shirt site demo for yourself and try it out. Also, you can download this form’s file and upload it to your WordPress site.

We’ll show you how to use Forminator to:

Choose Advanced Order Form Options
Structure Your Order Form with Pagination
Create Product Labels with Select Field Options
Set Up Discounts and a Base Price
Calculate the Tax and Total Price
Create the Checkout Section
Set Up a Special Discount Exit-Intent Pop-Up (with Hustle)

1. Choose Advanced Order Form Options

Sure, you can create a simple order form with Forminator in just a few clicks, but we’re taking things up a notch.

Forminator can build pretty impressive sales pages with advanced options, such as the number of items, sales tax, discount codes, and more.

As you’ll see, you can create professional payment and order forms that will give your shoppers more choices and be visually appealing. Plus, depending on your offering, many of these features may need to be included.

Though it’s advanced, it’s still simple to set up.

By the time we’re done, you will know how to put together a sophisticated eCommerce payment form with advanced functionality, calculations, and more…all built with free components!

2. Structure Your Order Form with Pagination

Pagination is the field for page breaks. This is perfect for breaking down your ordering form into sections and making it less cluttered.

When you add your first Page Break field to your form, you’ll see a Pagination at the top of the other areas.

This order form has three sections. Here’s a quick look at them…

Click the Pagination section to open it up and edit the page breaks in the form. In this example, under Labels, it’s broken up as:

Page 1: Choose Product
Page 2: Shipping Address
Finish: Checkout

In the Settings section, you have the option for a progress indicator to show users how far they are through your form. Also, you can customize the text for the Next and Previous buttons.

Breaking up an order form is a great way to walk your users through the checkout process.

3. Create Product Labels with Select Field Options

It’s time to determine the options for t-shirts and incorporate this into the form. For this, we are using the Select fields for the choices of Style, Color, and Size.

They are labeled accordingly and placed at the top of the form in the upper section.

The select fields options for style, color, and size.

Each one can then be edited by what to include in the Labels section. For example, with the colors, the form has the options of green and yellow.

The labels section where you can add various color options.

The process is the same for the Style field.

With Size, this has some calculation variables that we need to include since this is also where it displays the price. The prices are all different, depending on the size.

The Calculations tab is where you’ll make calculations (I’ll show you how this all adds-up soon).

You can Enable this and indicate the price by a numerical value for each size. As you can see, they all vary.

Where individual calculations are added.

The next option to indicate is the amount. For this, we’re using a Number field. How many do you want? is the way it’s labeled.

Number fields option for the amount of items that are to be purchased.

You can adjust the settings in the field and indicate a minimum and maximum amount available for purchase.

4. Set Up Discounts and a Base Price

When a user decides what they want to purchase, it all needs to be added up. This section is where you add calculations and discounts.

With a Text field, you can mention an option for a discount. Here we have it worded Have a discount coupon?

The Text field with the discount feature.

We’ll now include two Calculations fields to get the discount feature to function. Calculations are to the right of the Text field.

The first Discount field is for when someone enters the correct discount code. The Calculation field then calculates a 20% discount and becomes visible.

The calculation field is still required when the coupon code isn’t entered, so that, in these cases, this Discount field will become visible (you’ll see in the Visibility screenshot coming up) and show the discounted amount as 0.

To get this to function, go to the Settings area of the first field (calculator-4). The Field Type needs to be set at Read-Only, and the Decimal Places placed at 2.

In the Calculations area, we’ve added the formula ({select-3}*{number-1})*0.2. This indicates that Select-3 (Size) multiplies the Number-1 (How many do you want?) and the percentage discount we want to offer (in this case, 20%).

Calculations formula for the number of items.

This calculation works by multiplying the “size*quantity” by 0.2 to find out the discounted amount.

The rule for the discount coupon is in the Visibility tab. We’ll be using the coupon code DEVMAN20. We used the Field as Text-1 (Have a discount coupon?), have the Condition as Is, and the Value is DEVMAN20.

The next Calculations field (calculation-5) will be set similar to the other one; however, there are a couple of changes.

We’ll be using the calculation ({select-3}*{number-1})*0.

The calculation formula for the size and number of items a customer wants.

Also, in the Visibility tab, we’re changing the Condition to Is not. Every other setting is the same as the previous Calculations tab.

Now that we have these conditions set, we add the base price. The Base Price is another Calculation field (calculation-1).

Under Settings, it’s set as Read-Only and has two as the number of decimals.

For the Calculations field, it includes the calculation set at ({select-3}*{number-1})-({calculation-4}).

This calculation works by finding the original price and multiplying the size with the quantity field (e.g., {select-3}*{number-1}) and then subtracting the discount.

Beyond that, there are no rules or anything else to add to this field.

5. Calculate the Tax and Total Price

The last piece of the numbers puzzle is adding in the Tax and Total Price. These are both Calculation fields (calculation-1 and calculation-2) added below Base Price in our form.

For the tax field, add a description of the tax amount under Labels, so users will know that it’s 18% (you can set any rate that you require).

In Settings, the Field Type is Read-Only, and the Decimal Places is 2.

As for the Calculations, the one that included for tax is the formula {calculation-1}*0.18. This means that 18% of Base Price is the price that we calculated in the previous step.

Nothing else is necessary for this field.

Finally, the field for the total price (calculation-3) includes the formula {calculation-1}+{calculation-2}. This formula will add up the total amount by combining the base price with tax.

That will do it for all of the calculations and the first section of the form. Forminator will calculate the numbers for the customer and add everything up to determine the price.

From here, customers will go onto the next section, where they’ll enter their address.

You can see a page break indicates that the next section will be just for the Address, created with the Address field. Another page break follows it.

Where the address field is entered between page breaks.

For the address field, it includes the vital information needed and nothing else. You can edit specific information (e.g., ‘country’) anyway that you’d like.

Customers can now click ‘Next’ to check out. Cha-ching!

6. Create the Checkout Section

Getting this part set up is extremely simple. Just be sure you have a Stripe or PayPal account connected with Forminator. If you need help with this, please refer to our documentation.

All we’ve included are fields for Name, Email, and Stripe.

From this point, the only thing that was changed is the Submit button at the bottom of the fields. Place Order is the text.

Where the submit button field is located.

We also edited the Error Message in the Labels area to Error: Your form is not valid, please fix the errors!

Where you'll enter the button text and error message.

With all of this information in place, it’s now time to cash out and complete the purchase!

But uh-oh…

It looks like a customer is about to leave the page without buying our fantastic t-shirt. The pop-up is where you hook them with an offer they can’t refuse before they take-off.

7. Set Up a Special Discount Exit-Intent Pop-Up — (with Hustle)

Hustle is our free marketing plugin that pops-in and saves the sale just when you need it. You’ll see how beneficial it is to include him with Forminator when a customer is ready to bail.

Image of Forminator and Hustle teaming up.

You can set up a promotion that pops up and offers a special discount code that corresponds with the order form.

If they opt for the discount, you’ll also capture their email address to continue marketing.

So, let’s set this form up and keep this shopper from going anywhere…

When Hustle is downloaded and activated, you can create a new pop-up in the WordPress admin.

In the Content area of Hustle, we’ve added the title Don’t miss this! and a subtitle of We are giving away a 20% discount. We also added images.

In the Main Content area, we’ve included a message urging users to sign up.

To offer the code, the user needs to enter their email address. Inserting email is done in the Email section of Hustle. You’ll simply place the Email field. Also, the button text was changed to Get my discount coupon.

Where the email area of Hustle is located.

Once they opt-in, the discount code is provided to them by adding it in Submission Behavior.

Showing where you'll enter a message and promo code.

Their email address can also be added to a 3rd party application (e.g. MailChimp) in the Integrations area.

With this promo now launched, Hustle knows when to grab their attention before they leave. In the Behavior section, under Pop-up Trigger, you can pick Exit Intent on when this is displayed.

And users will then be greeted with a special discount:

Look at the promotion created by Hustle.

Once they opt-in, they get the promo code. Who could pass on 20% off?

A look at the discount code being displayed.

And with this, there’s a good chance they’ll hit PLACE ORDER…

Adding a pop-up and promotions can help sales, build your list, and create a positive experience for users that appreciate a good discount.

And in case you were wondering, Elementor helped create our form. Elementor is a 5-star WordPress page builder plugin. You can find out more about Elementor here.

These Forms are Not the Norm

As you can see, thanks to Forminator, you can launch and fund off an online store on WordPress for free by creating an above normal checkout process.

There’s also much more you can do with Forminator. He has options for eSignatures, integration with FortressDB, calculators, and much more! With all of the customization options, you can set up your online store exactly how you want.

And if you ever need additional help setting up shop, contact our WPMU DEV 24/7 support superheroes.

With Forminator and Hustle, your store should take form in no time.