Do you require an order form for your WordPress website? If you sell items or services, including an order form can make it simple for your consumers to place orders and make payments online. In this article, we’ll walk you through the process of creating an online order form in WordPress in 7 simple stages.
How to Make a WordPress Order Form in a Video
We’ve made a video that demonstrates how to make an order form in WordPress.The finest WordPress Form Builder plugin. You can get it for free! If you’d rather read the instructions for creating an online order form, we’ll lead you through the stages below.
How to Make a WordPress Online Order Form
It is quite simple to create an order form in WordPress. Let’s get started.Install first. To begin, you’ll need a form builder plugin that allows you to easily design an order form. It is the most user-friendly WordPress forms plugin, making it ideal for tasks such as constructing order forms. There are numerous pricing choices, but we recommend It is Pro because it allows you to add payment options to your online order form.On your WordPress site once you’ve purchased the package. Great! You can now create an order form and connect it to a payment gateway right away.
Load the Online Order Form Template
- After installing Pro on your site, » Add New from your WordPress dashboard to build a new form.
- create a new form
- Name your order form (you can give it whatever name you choose) on the setting screen.
- Form for ordering names
- Select an order form template to make this procedure very simple and quick.
- It comes with over 400 form templates.
- For this example, we’ll utilise a PayPal payment form template.
- This order form template is ideal for small enterprises.
- PayPal payment form design
- When you select this template, you will be prompted to install the PayPal Standard plugin (which is required for this template to work).
- To proceed, select Yes, Install, and Active.
Install the normal PayPal Extension
It will just take 5 seconds to install the addon, and then the template will load for you. This is how it appears:
WordPress order form design
This online order form template is, as you can see, clean, sleek, and minimalistic. That’s exactly what we want! The more concise a form, the easier it is for users to fill out and achieve their objectives. Let’s tweak some of the fields in this template to make them even more useful to clients.
Customize the WordPress Order Form Fields
The order form template has a Multiple Items field by default, which allows customers to choose a product from a list of options. You can include the actual names of your products and select a price for each to make the form relevant to your products and services. To open the Field Options for the Multiple Items field, click it. Change the label of the field and the names of the items here to fit your products.
Shirt accessories
Simply put a number in the column next to each item to change the price.
Order item cost
- Simply use the plus (+) and minus (-) buttons next to each item to add more entries to this field or delete an existing item.
- Order items can be added or removed.
- You may also wish to display each product’s price tag next to its name, so customers can view the unique price of each thing before placing their order.
- To display the price tags next to each item on the form frontend, simply toggle the Show price after item labels toggle switch.
- Order item prices are displayed
- Last but not least, you may provide an image for each option so customers can see what they’re getting.
- To enable this feature, toggle the Use image selections option.
When this feature is enabled, an image upload button will appear for each product, which you can use to upload an image to go with your product on the order form.
Upload An Image For An Order Items
Remember that the Multiple Thing field, which is included by default in this template, only allows users to pick one item at a time. You can use the Checkbox Items field instead if you want to allow your consumers to order several things from the same WordPress order form. To begin, delete the default Multiple Item box by hovering your cursor over it and clicking the red trash can button.
Removing A Field
A confirmation dialogue will display, asking you to confirm that you want to delete this field. To proceed, press OK. Pay attention to the left-hand pane now, and scroll down to the bottom to find Payment Fields. Drag and drop the Checkbox Items field onto the form.
Items With Checkboxes
After you’ve placed the field on your form, you can change its parameters just like you did with the Multiple Items field.
Options for checkbox fields
can now order numerous products using a single form. The Entire field will calculate the total price of all the goods selected by the user, allowing them to view the total cost of the order in real time. When you’re through tweaking your WordPress order form, remember to save your changes.
Customize Your Online Order Form Notifications
- When a user submits an order form, It will give you an automatic notification (the admin). You can personalise this email by include important information that will allow you to easily discover order confirmation
- emails for each person that fills out your form.
- Begin by going to the Form Builder’s Settings menu and then choosing Notifications.
- Opening the form builder’s notifications settings
- If you want to send a copy of the order email to additional team members, enter their email addresses separated by commas in the Send to Email Address area.
To An Email Address
It’s also a good idea to utilise Smart Tags in the subject line to avoid having each order email appear the same.
One simple approach to accomplish this is to include the Name Smart Tag in the email topic. This means that the name of the customer who filled out the form will appear in each order email.
- By selecting Show Smart Tags, you can add Smart Tags.
- Display smart tags
- This will display a list of possible fields for usage as a Smart Tag.
- We’ll utilise the Name column as our Smart Tag in this example.
- Smart tag name in subject
- Every email notice you receive from this online order form will now include the customer’s name in the subject line.
- This is an excellent method for tracking order emails by name.
- Furthermore, if you utilise Smart Tags, you can send a form notification to a customer informing them that their order has been received.
- Click the Add New Notification button in the top-right corner to create a separate notification for customers.
Creating a new email alert
- This will open a popup box where you may name your notification to differentiate it from the default notification.
- Creating a new email notification name
- Then, in the Send To Email Address area, use Smart Tags to include the email address of the person who filled out the online order form.
- In the Send To Email Address column, select Show Smart Tags.
- Using Smart Tags to send an email notification
- Then, for the Email field, select the Smart Tag.
- This will allow to retrieve the customer’s email address from the order form and send the notification to that address.
- In an email notification, selecting the Smart Tag for the Email field
- Similarly, you can use plain text and Smart Tags to modify all aspects of your WordPress order form email alerts.
- Incorporating the all fields Smart Tag into an email notice
- Check out this tutorial on how to utilise Smart Tags in for additional information on smart tags.
- It notifications are incredibly customizable.
- You might be interested in this tutorial on how to create numerous form alerts.
Configure Your Form Confirmations
Form confirmations are notifications that appear when a customer submits an order form.You can select one of three methods of confirmation:
- Message Display Page
- Go to the URL (Redirect)
- Let’s look at how to create a simple form confirmation in. so that you can personalise the message consumers view after completing their orders.
- To begin, go to the Form Editor’s Settings and select the Confirmations tab.
Confirmations of orders
Next, choose the sort of confirmation you want to create.In this example, we’ll choose Message because it’s the simplest way to display a confirmation.
Selecting a Message Confirmation Type
Then, when you’re finished, modify the confirmation message to your satisfaction and click Save.
Confirmation of order form
Excellent! We’re almost done. If you link PayPal as your gateway provider, the confirmation message will not show.
In that situation, the user will be redirected to their PayPal account to complete the transaction.
Connect a Payment Provider to the Order
Because we’re developing an order form, it makes logical to connect it to a payment server so customers may pay for their orders when they submit the form. It integrates with four of the most popular payment processors.
To accept payments, the plugin connects with PayPal, Authorize.Net, Square, and Stripe payment processors. In this example, we’ll use PayPal to process orders.
PayPayl Default Settings
Enable PayPal Standard Payments, enter your PayPal email address, Select Production mode, Products and Services, and alter additional parameters as necessary.
Connection settings for the PayPal Standard form
When you’re through configuring the payment options, click Save to save your changes. With PayPal, you do not need to include any payment fields on your form. After submitting your form and enabling PayPal payments, the user will be directly taken to PayPal to finish their transaction. If you wish to provide more than one payment method, be sure to read our tutorial on allowing clients to choose their payment method. You can now put your basic order form to your website.
Integrate the Online Order Form onto Your Website
- It makes it incredibly simple to embed your order form on your WordPress website.
- On the top, click the Embed button.
- Form button embedding
- Click New Page to insert the WordPress order form into a new page.
- Add to a new page
- Now, give the new page a name and click Let’s Go.
- Insert into a new page
- You’ll now see your WordPress block editor, with the block for the order form you just constructed within the page already added. When you’re ready to go, press the Publish button.
Print the order form
You can now see your published order form live on your website. When you pick things on your form, the pricing automatically changes.
Order form publication
When a user completes this form, they will be sent to PayPal to complete the payment.
Payment using PayPal
That’s all there is to it! You now understand how to develop an order form in WordPress and use it to take online payments. Using forms to prequalify leads? This is the template you’re looking for. It includes all of the fields you might possible need for generating MQLs and SQLs. Simply eliminate the ones you don’t need and create new ones tailored to your company.
Registration Form Template Mint Salmon Geometric Contact Form
- Colorful geometric shapes draw attention to any form.
- Take this template and replace it with your own.
- Works as a standalone page that may be linked to from your ads, social media, or “Contact Us” area.
It only takes a few seconds to embed it anywhere. - Obtain an editable version of this form
- Template for a Workshop Registration Form
Template for a Registration Form
Using this registration form template, you can keep your event guests organised. If you’re marketing your event in print, include this template’s unique QR code. Obtain an editable version of this form
Contact Form Embed Registration Form Template Is So Elegant
Footed fonts make everything look more elegant.If your website similarly uses footed fonts and soft borders, there is nothing you need to change about this design. Simply add your logo and you’re done.
- Obtain an editable version of this form
- Template for Job Application Form
- Template for a Registration Form
- Highlight a specific vacancy, including all of its benefits and requirements. Include images of your team and workspace, links to downloadable assignments, and file uploads for completed assignments. Obtain an editable version of this form
Contact Form That Looks Sharp
A contact form with a gentle, pleasant tone that is foolproof for any business. Grab it and paste it into your website as is for a 2-minute embed, or personalise it to properly match the rest of your website.
Template for a Registration Form
A black to grey gradient that will go well with any gloomy, minimalist brand. Because the opaque content card automatically adjusts to any screen size, you don’t have to worry about the busy background reducing legibility.
Form Template for Booking a Trip for Two Registration Form Template
This form assists people in organising group vacations. Everyone can choose a date range, a destination, and activities based on their availability. Analyze their responses in detail and make an informed judgement. Obtain an editable version of this form
Template for Christmas Team Building Invitation Form Registration Form
Using this template, you can easily arrange your office team building mission list. Ask whatever you need to know, and then view all of the answers in thorough response analytics.
Frequently Asked Questions
The following are some frequently asked questions about constructing WordPress order forms:
How to Create a WordPress Dropdown Order Form
You may integrate a Dropdown field in your order form. We utilised a Multiple Things field in the preceding example to indicate the list of available items that the user can order. However, instead of Multiple Items, you can list your available products using the Dropdown field. When there are many options to pick from, the dropdown menu allows you to make your forms brief and concise. If your available items list is lengthy, try adding a Dropdown field to your form utilising simple drag-and-drop form interface. Next, Increase the Profitability of Your Website.
Do you want to start earning more money from your own website?
You might be interested in our post on the top WordPress affiliate plugins.
Are your WordPress email settings set up correctly?
Check out our article on modifying email settings in WordPress to ensure that your outgoing emails are functioning properly. Don’t put off creating your online order form. Begin using the most effective WordPress form plugin today.
Are you looking for a free order form? Pro includes a free online order form template as well as a 14-day money back guarantee. Also, if you enjoyed this article, please consider following us on Facebook and Twitter.
Check Also : Best 7 Essential Tips to Hire Remote WordPress Developer for your Project