How to Build Order Forms with Payments for Free in WordPress

You lose 100% of the sales you don’t ask for, and the same holds true for having a clunky checkout experience. Order forms help you to collect order information and process payments efficiently, thereby increasing your conversion rates significantly.

Forminator makes it easier than ever to build an order form and accept payments on WordPress. Oh ya…and the best part is, it’s completely free! And that includes PayPal and Stripe payment gateways!

Whether you’re planning to sell merchandise, collect donations or get rooms booked, Forminator does them all without skipping a beat. His simple drag-and-drop interface means that you don’t need to know any coding whatsoever. It’s truly the one form maker plugin to rule them all!

**Long live Forminator!**

In this post, I’ll show you step-by-step how to use Forminator to build an order form from scratch and have it set up to collect payments effortlessly with Stripe and/or PayPal.

• Introducing the Fantastic Forminator
• Let’s Build an Order Form
  • Step 1: Install Forminator
  • Step 2: Access the Forminator Dashboard
  • Step 3: Let’s Create a Form
  • Step 4: Adding the Order Form Fields
  • Step 5: Adding the Stripe Payment Button and Integration
  • Step 6: Let’s Jazz It Up
  • Step 7: Form Submitted. What Next?
  • Step 8: Email Me Please, and to the User Too
  • Step 9: Hit the Publish Button
  • Step 10: Add the Order Form to Your Sales Page
• Reach > Engage > Convert

Introducing the Fantastic Forminator

Forminator is a powerhouse of a form plugin. He supports conditional logic, stores all the form entries in an easily accessible database, sends emails to both the user and the admin, and does it all without reloading the page.

To supercharge your forms, Forminator integrates with popular third-party tools such as Mailchimp, AWeber, ActiveCampaign, Google Sheets, Zapier, and Slack. Here’s an integration guide to automate your form workflow with Zapier.

He’s also GDPR compliant and works seamlessly with WordPress’ new Gutenberg block editor. If you can think of a form, Forminator can almost certainly get it done.

Let’s Build an Order Form

For this demo, we’ll build a simple order form, like the one below, to sell a custom notebook. We’ll make it so that the users can enter their personal information (such as name, address, email and phone number), and then at the very end, place an order by completing the payment.

Follow the steps below and/or enjoy the video we’ve put together to accompany this post:

hha0W-A1Kq8

Step 1: Install Forminator

To install Forminator, just go to your WordPress Dashboard, and under Plugins, choose Add New and search for Forminator. Click the Install Now button and Activate the plugin after installation.

If you’re a WPMU DEV Member, you can also install and activate Forminator Pro directly from the WPMU DEV Dashboard. If you’re not a member yet, what are you waiting for? Try it 100% risk-free with one of our paid membership plans!

Using the free WordPress.org version of Forminator is totally cool too. This tutorial works perfectly fine with either version.

Step 2: Access the Forminator Dashboard

Go to Forminator’s Dashboard. This will give you a quick overview of all your forms, quizzes, and polls.

You won’t see any data here now, but as you start creating forms and collecting user entries, the dashboard will start populating with views, submissions, conversion rates, and other interesting data.

Step 3: Let’s Create a Form

Go to Forminator > Forms and click either of the blue Create buttons to begin making your new form. You can also do the same directly from Forminator’s dashboard.

A popup will appear where you need to enter your new form’s name. Keep the form name unique and memorable so that you can recall it easily. Click the blue Create button after entering your form name.

By default, every form in Forminator comes with the following predefined fields: First Name, Email Address, Phone Number, and Message.

The default form fields can be edited or deleted, and with the option of adding many other fields, you have unlimited customization possibilities.

Note: The fields marked with a red asterisk (*) at the end are Required fields. The form won’t submit until the user fills them up.

Step 4: Adding the Order Form Fields

We’ll keep the First Name, Email Address and Phone Number fields, and delete the Message field which we don’t need for this form.

In the First Name field, click on the gear icon and select Duplicate. This is a faster way to insert multiple fields of the same type without accessing the Insert Fields menu repeatedly.

Rename the duplicated field as Last Name.

Drag the Last Name field to the same row as the First Name, to its right, so that they appear side by side in the form.

And just like that, you have a two-column row in your form.

All Forminator fields can be dragged and dropped into rows and columns, so you have maximum flexibility in designing your forms just the way you want them.

Next, click on the purple Insert Fields button. It should open a popup with all the field options you can add to the form. There’s also another Insert Fields link at the bottom of the form.

Select the Address option from the popup window, and click the Insert Fields button.

Once inserted, click on the Address row to open its field settings. In the Labels tab, you can activate or deactivate the different address subfields (they’re all enabled by default).

Underneath the Settings tab, mark all the address subfields as required since they’re essential to ship the product.

Finally, click on the gear icon of Message field and hit Delete.

You can retain the Message field if you want to give users an option to add a comment or preference.

Step 5: Adding the Stripe Payment Button and Integration

Click on the purple Insert Fields button and select the Stripe option.

Stripe enables you to supercharge your online sales with its hassle-free and secure payment gateway.

Note: You need an activated Stripe account to configure the Stripe field. Otherwise, it won’t let you edit it. If you need help to set it up, use Forminator’s documentation as a cheatsheet.

You can configure Stripe by going to Settings > Payments > Stripe under Forminator.

Once Stripe is configured, under the Stripe field settings, we need to set the payment amount. Since this is a single product with an all-inclusive price and no variations, we’ll select the Fixed payment option.

When user inputs affect the price (ex. different sized t-shirts or customization options), or if there is a calculation such as tax or shipping that will be added to the original price, the Variable option should be used instead.

Select Fixed in the Stripe field settings and enter the amount.

Also, note the Test and Live mode options mentioned on the top here. We’ll be using the Test mode for now.

From the Advanced tab, you can add advance settings, such as a payment receipt, payment details, billing details, and meta data.

Next, change the Submit button label from Send Message to Order Now.

Preview the form and ensure it’s working as you intend. You can edit the default placeholders in the form if they’re not to your liking.

Note: You can also setup PayPal using the same method described above. Just insert the PayPal field instead of Stripe. However, you cannot insert both the fields. As of now, you can only use one payment gateway in a form.

Step 6: Let’s Jazz It Up

Forminator lets you make basic style changes to the form easily. The Appearance section helps you set your form’s Design Style, Colors, Fonts, Padding, Borders, Spacing, etc.

Click on the Appearance button to move on to its settings.

You can choose your preferred style here. I like the look of the Flat style more than the Default one, however this choice is up to you. It also offers you a way to add Custom CSS for your form.

As for the Colors and Fonts, I prefer the theme defaults and will leave them as is. Save your form draft after making your changes.

Step 7: Form Submitted. What Next?

Forminator is like a cool and casual professor. He’s fun and intelligent, but he also makes sure that the forms behave properly.

In the Behavior settings, you can define how the form will behave after the user successfully submits the form, or in this case, places an order.

By default, the form will show an inline message that will close automatically within 5 seconds. Change the message here to better reflect an order form.

You also have the option of redirecting the user to a new page or hiding the form altogether.

If you’re collecting payments, it’s highly recommended that you have the “Require SSL certificate to submit this form” option checked. It’ll enable your form to collect payments securely.

The rest of the Behavior settings can be left as is.

Step 8: Email Me Please, and to the User Too

After finishing up with setting the Behavior, move to the Email Notifications settings.

By default, every form will send you (the admin) an email with details of all the form fields entered.

You can change it and/or add multiple recipients too. You also have the option of adding Cc and Bcc fields to the email.

It’s good practice to send an automatic order confirmation email to the user. This option can be enabled in the Email Notifications settings.

Make sure that the recipient here is set to Email Address, which is the label for the email address entered by a user in the form. For example, if a user enters [email protected] as their email address in the form, the order confirmation email will be sent to that address automatically.

Forminator also lets you set Integrations with various third-party apps, and change the overall form settings. For this order form, we won’t be adding any Integrations, and will stick to the default settings.

Step 9: Hit the Publish Button

Preview the form one last time before pressing the Publish button.

Hey, give yourself a pat on the back. You just created your first order form!

After hitting the Publish button, a popup will present you with the form’s shortcode. Copy and place this shortcode anywhere in your site to display it to users.

You can also copy the shortcode later from Forminator’s Dashboard.

Step 10: Add the Order Form to Your Sales Page

Create a sales page if you don’t have one yet. It should contain all the important product details such as name, image, description, price, etc.

If you’re using the Classic Editor plugin, you can copy and paste the shortcode to add the form to your post/page. For sites that are using the default Block Editor, adding a form is much simpler.

To place the order form at the bottom of your sales page, in your WordPress post/page editor, click the Plus icon and add a Form block.

Next, select your order form from here to add it to the page.

Publish or Update your sales page after you’ve added the order form to it.

Visitors to your website can now use this form to place an order. It’s that simple!

Important Note: The Stripe field in your order form is still set to Test mode. This is to help you make test payments and make sure that everything is working fine. Before accepting actual orders, you need to change it from Test to Live.

Once an order has been placed, you’ll be notified of it via mail. Forminator also stores all the form submissions in a database so that it’s easier for you to sort through them later.

To view all of a form’s submissions, visit Forminator > Forms in your dashboard. Click on the gear icon and select View Submissions.

You can click on any individual submission row to get its complete details. You can also push the Export button to download all the submissions as a .csv file.

Reach > Engage > Convert

Running an online business comes with a lot of challenges. Anything that helps you engage with your potential customers and get paid easier is a welcome addition, and that’s exactly what Forminator does.

What we’ve built here is the simplest of order forms that you can make with Forminator. With its support for conditional logic, it can do much more!

You can set taxes, shipping rates, product variations, and then have the form calculate the final order amount automatically.

Ready for next-level form creating? Learn more here.

Start creating!

Have you tried building an order form? Did you use any plugins or code to do that? If you have any questions, hit us up in the comments section, and we'll answer any questions you might have.

Tags:

• PayPal
• Stripe
• forminator
• forms
• order forms
• payment gateways