Learn how to set up an automated welcome email drip campaign in WordPress—all without a…
How to Create a Free Order Form in WordPress with WPForms
Want to receive orders on your WordPress website? Read this comprehensive guide for creating a free order form in WordPress with WPForms.
If you’ve just spent the last hour Googling, “How do I create a free order form in WordPress?” then you’ve finally clicked on the right link! (If this is the first article you’ve landed on, then you’re already ahead of the curve!)
In this tutorial, we’ll show you how to create a free order form in WordPress using the #1 form-building plugin: WPForms!
Once we’ve created that order form together, we’ll show you how to integrate it into your WordPress website, and even connect it to your external apps and services.
Let’s get started!
Are you looking for a way to create custom checkout fields instead? Read our guide here.
What is an order form?
Order forms are a great alternative for businesses that want the benefits of eCommerce without the hassle (and costs) associated with setting up an entire digital storefront.
The exact configuration of your order form will depend on the nature of your business, sales funnel, and existing workflows. However, most order forms have some standard features including:
- product/service options,
- contact information, and
- a payment gateway.
It’s easy to think of your order form as the self-checkout counter in a brick-and-mortar establishment—with some added benefits.
Why use online order forms?
Online order forms are an essential part of any WordPress website. They give site owners and developers the ability to engage in eCommerce without having to set up an entire storefront.
In addition to giving your business a greater sense of legitimacy, order forms:
- open new revenue streams,
- expand your customer base,
- allow you to collect valuable customer information (emails, phone numbers, etc.), and
- make the shopping experience more convenient for your customers.
By the end of this article, you’ll be able to receive orders online and process customer payments. We’ll even show you some awesome ways to integrate your online order form with your CRM of choice, Google Sheets and task management apps such as ClickUp.
Let’s get to it!
Create an Online Order Form With WPForms
To create our order form, we’ll be using the most popular form-building plugin for WordPress; WPForms.
With an intuitive drag-and-drop interface, dozens of field types, and thousands of pre-built templates, creating high-converting forms only takes a few minutes. But, there’s another reason to choose WPForms when creating an online form: it’s FREE!
WPForms is the only form-building plugin we know of that lets you accept Stripe and Square payments in its FREE version. This means that you can set up your online order form to accept payments at no cost to you!
Note: WPForms Lite does charge an additional 3% per transaction on top of Stripe and Square’s standard fees. However, there’s no upfront cost to setting up your order form, and you can upgrade to WPForms Pro once your volume justifies it.
WPForms Pro also gives you access to additional payment features such as recurring subscriptions, coupons, and additional payment gateways such as PayPal.
Throughout this article, we’ll be using WPForms Pro to take advantage of some additional fields and templates but you can always download WPForms for free and upgrade later.
Now, let’s create that order form.
Step 1: Install and Activate WPForms
From your WordPress Admin Dashboard, navigate to Plugins > Add Plugin.
Step 2: Connect Your Stripe and/or Square Account to WPForms
To accept payments through your online order form, you’ll need to connect your Stripe and/or Square account to WPForms.
From your WordPress Admin Dashboard, navigate to WPForms > Settings > Payments.
After selecting your currency, click Connect with Stripe and/or Connect with Square and follow the prompts. If you need a more detailed guide, for Stripe click here, or for Square click here.
(Note: To accept payments with Stripe, for your security and that of your customers, you will need to have SSL and HTTPS enabled on your WordPress website. If you’re unfamiliar with SSL and HTTPS, read this guide from WPBeginner.)
Click Save Settings.
Step 3: Create Your WordPress Order Form
Now comes the fun part! You get to play with WPForms’ drag-and-drop builder to create your order form.
From your WordPress Admin Sidebar, navigate to WPForms > Add New.
If you have WPForms Pro, you’ll find dozens upon dozens of pre-built order form templates to choose from, such as the Billing/Order Form template. Alternatively, if you are using WPForms Lite, you can generate a form with AI or create a form from scratch. However you configure your firm, you’ll generally want to have these fields:
- Name (for identification purposes)
- Email (for sending receipts/invoices, order confirmations, etc.)
- Phone (for order updates and/or important notifications)
- Address (city, state/province, postal code, and country for delivery and tax purposes)
- Available items (your online product or service lineup)
- Total
- Comment or Message
To edit a field, simply click on it. For illustrative purposes, we’re going to configure the form for a local pizzeria—because who doesn’t love pizza? However, you can follow these same steps for your business.
First, we start by editing the Multiple Choice field. If you’ve loaded the template, this will be ID #5. Once you’ve clicked on the field, you can change the Label, Items, Prices and configure the display settings on the left-hand side.
To add and edit more fields, simply click the Add Fields tab and remember to regularly save your changes. (If you want to add more advanced fields and features to your order form, briefly skip ahead to Step 5: Add Smart Logic and Images. We’ll show you how to use “Smart Logic” and how to add images to optimize your order form.)
Step 4: Add a Payment Field
Now it’s time to get paid! Adding a payment field is as simple as dragging and dropping one onto your form.
On the left-hand side of the screen, scroll down to Payment Fields and drag and drop Stripe Credit Card onto your form.
Note, if a “Head’s up!” modal appears, click Ok. We will configure this setting in the next step.
By default, the Stripe Credit Card field will be set to Required, meaning that customers will have to make a payment to submit the form and complete their order. If you would like to provide your customers with the opportunity to pay in-person or via any other method, toggle off the Required setting.
Now, we need to enable Stripe payments on our form. From the far-left menu, click on Payments > Stripe and toggle on Enable Stripe payments. Here, you can enter a Payment Description and decide whether or not you would like to have Stripe send a payment receipt via email. (We strongly recommend using the Stripe payment email receipt.)
If you’re setting up a payment form with a recurring payment or billing cycle, you can enable subscriptions from this page and set the recurring payment period as well.
Step 5 (Optional): Add Smart Logic and Images
In our example of a local pizzeria, we want to give our customers the option to add premium cheeses of their choice. But only if they have selected a “Large” pizza in the previous field. With WPForms Pro, you can use “Smart Logic” to make fields respond to user input.
Select the field to which you would like to add Smart Logic. On the left, under the Field Options tab, navigate to Smart Logic and toggle on Enable Conditional Logic. Set the conditions for the field as you choose.
Adding images is another great way to optimize your order form. To add images, simply select the field to which you would like to add images. On the left, under Field Options > General, toggle on Use image choices.
All of the images that you upload should be the same size and 250 by 250 pixels or smaller, as per WPForms guidelines.
Step 6: Configure Your Notifications
You’re just about ready to take your order form live on your WordPress website. One of the last things that you’ll need to do, however, is to set up your notifications.
You should already have opted to send your customers a Stripe payment receipt via email, but they’ll likely also be waiting for a confirmation email with an order summary. And you will, of course, need an email for your own records.
Navigate to Settings > Notifications.
By default, WPForms will have enabled notifications and configured an email for admins that will trigger upon form submissions.
To configure a confirmation and order summary email for your customers, navigate to Settings > Confirmations. You’ll be able to select from one of three types of confirmations; message (sending an email), show page or redirect to a URL. We’ve chosen to draft a message.
Drafting your email is pretty simple once you get the hang of using “Smart Tags”. These are dynamic pieces of data that you can use to customize your email notifications. To use Smart Tags, simply click Show Smart Tags beneath the Confirmation Message window and select whichever Smart Tags you would like from the drop-down list.
Use Smart Tags such as Name, Entry Date and Site Name to personalize your confirmation message and make it appear more professional.
Step 7: Embed Your Form on Your WordPress Website
Ready to start collecting orders? All you have to do now is place your form on your live WordPress website.
In the upper-right hand corner, click Embed.
There are any number of ways to embed your new order form on your WordPress website. You can either place the form on an existing page, create a new page specifically for your order form or use a shortcode. Whichever method you choose will depend on your specific workflows and the design of your website.
Shortcodes offer the most flexibility so that’s what we’ll demonstrate here.
In the Embed in a Page window, click use a shortcode.
WPForms will open up a field in the window. Click the Copy icon in the right of the field. This will copy the shortcode to your clipboard.
Exit the WPForms builder and either create a new page or select an existing page from your WordPress Admin Sidebar.
Every WordPress page builder has a shortcode or code block/module/element.
If you’re using the Gutenberg Block Editor, simply click the Plus sign to add a new block then search for and select “shortcode”. Paste your order form shortcode into the shortcode block.
That’s it! Once you publish or update the page containing your order form, you’ll be able to process orders right from your WordPress website! And you didn’t have to set up an entire digital storefront to do it.
Now that you know how to create a free order form in WordPress, there are tons of exciting ways to integrate these forms into your existing workflows. In the next section, we’ll show you how to connect your order form to your CRM, Google Sheets and ClickUp (just to name a few) so that you can stay on top of all your new orders.
Connect WPForms to Uncanny Automator
Uncanny Automator is the #1 automation and integration tool for WordPress. Using simple combinations of triggers and actions called recipes, you can connect all of your favorite apps and plugins, automate your workflows and save time.
The best part? You can get started with Uncanny Automator for FREE.
With Automator, your order form can do a whole lot more than take orders. It can give orders to the other plugins on your WordPress website or even your connected apps!
Upgrade your WordPress forms with Automator Pro >>>
Not ready to go Pro just yet? No worries. You can still take advantage of Automator’s form-boosting features with Automator Lite, the free version. Simply install and activate Automator on your WordPress website, then register your account to receive a limited number of app credits.
Once you’ve activated your Automator Pro license or registered your account, you can upgrade your order forms with any of these powerful recipes.
Connect Your Order Form to Your CRM
Your new order form is a treasure trove of valuable customer information. With the Automator recipe pictured above, we’re able to collect emails for our ActiveCampaign mailing list right from our order form. We can even tag new and existing contacts to build detailed customer profiles that tell us who likes pineapple on their pizza and who doesn’t.
If ActiveCampaign isn’t your CRM of choice, don’t worry about it. Automator integrates with MailPoet, Drip, Mailchimp, and countless other CRMs.
Connect Your Order Form to Google Sheets
Want to log your online orders to create reports, analyze sales data, and optimize your conversions? With Automator, you can log your order form submission data in Google Sheets, Airtable or another database. Quickly add up your order totals or calculate the average order quantities, analyze submission date and time data, quickly identify returning customers or simply keep a record for posterity.
Connect Your Order Form to ClickUp
Now that you have an online order form, you might need some help keeping track of what needs to get done and when. With the recipe pictured above, we’re able to automatically create new tasks in ClickUp based on our order form submissions. This way, we can stay on top of our order fulfillment and guarantee our customers’ satisfaction.
Order Up More Integrations!
These recipes just hint at what you can accomplish by integrating your plugins and automating your workflows with Automator. With 214 integrations (and more always on the way), along with powerful addons for restricting content, creating dynamic content, and managing WordPress users, you can order up more cost and time savings.
Frequently Asked Questions
Conclusion
Creating an online order form in WordPress doesn’t have to be complicated—or expensive. With WPForms, you can build a sleek, customizable order form in just a few steps and start accepting payments today.
Best of all, when you connect your form to Uncanny Automator, you unlock a world of automation—turning every order into action, insight, and opportunity.
Ready to supercharge your order form? Get an Automator Pro license now if you haven’t already and automate everything from customer engagement to order fulfillment.
Until next time, happy automating!
Related Posts
This Post Has 0 Comments