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!

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. 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!

Step 1: Download WPForms

The first step in creating your order form is downloading a form-building plugin. WPForms is the most popular form-building plugin for WordPress and for good reason. It has an intuitive drag-and-drop interface, dozens of field types to collect all kinds of data plus pre-built templates so you can create high-converting forms in minutes.

But, even beyond these great features, there’s another good reason to use WPForm to create your order form in WordPress.

WPForms is the only form-building plugin we know of that includes Stripe payments in its FREE version. This means that you can set up your online order form to accept payments at no cost to you!

WPForms Lite, as compared to WPForms Pro, does charge an additional 3% per transaction in addition to Stripe’s regular merchant fees. However, there is no upfront cost to setting up your order form and you can always upgrade to WPForms Pro when the 3% transaction fee exceeds the cost of a Pro license.

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.

Complete Step 1: Get WPForms Pro now.>>>

Step 2: Connect Your Stripe Account to WPForms

To accept payments through your online order form, you’ll need to connect your Stripe account to WPForms. If you don’t already have a Stripe account, don’t worry. Much like WPForms Lite, signing up for Stripe is free and you’ll only incur fees when you make a sale.

Sign up for a FREE Stripe account.>>>

Once you’ve created your free Stripe account, you can connect it to WPForms to start collecting payments through your WordPress order form. To get started, log in to your WordPress website as an administrator.

In your WordPress Admin Sidebar, navigate to WPForms > Payments and click Get started.

WPForms will automatically take you to the Payments tab. After selecting the currency in which you would like to receive payments, click on the Connect with Stripe button.

WPForms will automatically take you to a Stripe login page. Enter your Stripe login credentials to connect your Stripe account.

(Note: For security purposes, Stripe requires two-factor authentication so make sure you have access to your secondary mode of authentication.)

Once you’ve completed the two-factor authentication process, Stripe will ask you to confirm the connection to WPForms. After you’ve read and understood the terms, click Connect.

WPForms will take you back to the Payments window. If your Stripe account has been successfully connected to WPForms, you will see a green checkmark next to Connection Status.

(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.)

Complete Step 2: Click Save Settings.

Step 3: Build 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’ve opted for WPForms Pro, you’ll find dozens upon dozens of pre-built order form templates to choose from. We’ve opted to use the Billing/Order Form template but you can choose one that more accurately fits your needs.

(Note: If you are using WPForms Lite, you can manually recreate the Billing/Order Form template using single line text and multiple choice fields. You can also use a simple number field to collect phone numbers. However, the number field is not pre-formatted for phone numbers and you may have to give your customers extra instructions on how to properly enter their phone number.)

The Billing/Order Form comes with these fields pre-loaded:

• Name (first and last)
• Email
• Phone
• Address (city, state/province, postal code and country)
• Available items
• Total
• Comment or Message

To edit each 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.)

Complete Step 3: Click Save Settings

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.

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.

Complete Step 4: Click Save

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.

Complete Step 5: Click Save.

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. For example, here’s the confirmation message that we’re sending out to our pizza connoisseurs once they’ve placed their order:

Complete Step 6: Click Save.

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.

Complete Step 7: Get Uncanny Automator.>>>

Integrate with 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 yourself 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!

Download the free version of Uncanny Automator now or try Uncanny Automator Pro risk-free for 14 days to test out the integrations below.

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 and ConvertKit amongst countless other CRMs. Check out the full list of integrations here.

Connect Your Order Form to Google Sheets

Want to measure the performance of your online order form? With Automator, you can collect your order form submission details in Google Sheets, as pictured in the recipe above. 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!

With your new order form and Uncanny Automator at your fingertips, it’s time for you to place some orders of your own! Try cooking up new recipes with one of our 100+ integrations and continue optimizing your order form to maximize conversions.

Have any questions about your order form or WordPress integrations? Drop it in the comments section below. We take orders!