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 set it up to collect payments effortlessly with Stripe and/or PayPal.
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:
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 free for 30 days!
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.
Don’t forget to set your brand logo, company name and product description under the Checkout tab. It’s great to have a self-branded payment gateway popup.
The below image shows how the self-branded popup will look like. Cool, isn’t it?
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.
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. Next What?
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 username@gmail.com 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.
You can check out a few of the order form and payment demos here and see how versatile Forminator really is.
Start creating!
