Do you want to create an online order form on your WordPress website to collect payment?
Anyone running an online business knows how crucial it is to offer your website visitors/potential customers a seamless checkout experience.
Importance of an online order form in WordPress:
An online order form is a facility that you can provide your customers to collect payment of their orders hassle-free.
1. It helps in collecting orders from your customers.
2. Helps your customers to know the price details.
3. To clarify the goods/services needed.
4. To collect customer contact details.
5. Helps in making the process of ordering convenient for customers.
In this article, we’ll show you how you can create and order form in WordPress in just a few simple steps
So let’s begin!
STEP 1: Install and Activate the Necessary Plugins
For this tutorial, we will install WPForms. What is WPForms?
WPForms is a WordPress plugin that helps you create beginner-friendly WordPress forms in minutes with a drag & drop form builder. The forms you create with WPForms are easy to embed and mobile-friendly.
With WPForms you can create:
- Contact form
- Payment form
- Email subscription form
- Registration form
Other features of WPForms include:
- Multi-page forms
- Payment gateway integration
- Spam Protection
- Smart conditional logic
- Instant notifications
- Email marketing software integration
To install WPForms plugin installed on our WordPress website follow the steps given below –
1. Go to your WordPress Dashboard and click on Plugin and then click on Add New.
2. Type WPForms in the search box.
3. Click Install and then Activate.
4. Once you have a license key head over to WordPress dashboard and then WPForms > Settings.
3. Now enter the License key to get started.
STEP 2: Create a New Form
1. On your WordPress dashboard click on WPForms and then on Add New.
2. Choose the Billing/Order form template. WPForms lets you add custom fields on your contact form with a simple drag and drop.
3. Now customize the form fields accordingly so the customer will know what items are available to order.
4. Click on “Available items” on the right side of the template. This will open up the “field option” in the left panel. You can now change the name of the fields, add or remove order items, and change the prices.
5. Click on “Image choices” to let your customers, images to choose from when filling out your online order form in wordpress. You will be able to add images of your product when you select this option.
6. To add any other additional fields to your form just drag and drop the field of your choice from the left-hand side to the right-hand side.
STEP 3: Configure Your Form Settings
Configuring your online order form in wordpress settings is an essential step before we add them on your website.
To configure settings – Click on settings on the left
Now you have general settings, confirmation settings, and notification settings where you can adjust settings as you wish.
1. On General settings, you can change the name of the form, the description, and you can also edit the submit button. Spam protection can also be enabled from here.
2. A confirmation message is a message which is shown to the user who has submitted the form. You can change the conformation message settings and show either a message or redirect the user to another page.
First, click on the Confirmation tab in the Form Editor under Settings.
Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.
3. A notification will be sent to you whenever someone has submitted a form on your website. You can change the notification settings here.
To include the email address of the person that filled out the online order form in wordpress, select Show Smart Tags in the Send to the Email Address field.
Now, Click on Email to send a notification to the email address that was entered on the order form submission.
STEP 4: Configure the Payment Settings
To complete to entre process of creating online order form in WordPress creation we’ll have to configure our payment settings
WPForms integrates with PayPal, Authorize.Net, and Stripe payment processors for accepting payments.
To configure these payment gateways we’ll have to install and integrate the right payment addon.
For this example, we will configure stripe with our online order form in wordpress.
1. Click on WPForms > Addons
2. Select the Stripe add-on by clicking on Install Add-on button
3. The status will show Active after you’ve installed the add-on. Now you are ready to use the WPForms Stripe add-on on your WordPress website.
4. In the form settings on the left-sidebar click on the payment.
5. Click on Stripe to initiate the configuration.
6. Next, go to the Stripe settings panel and check the box that says- Enable Stripe payments
7. Click Save and you’re all set.
7. Click Save and you’re all set.
STEP 5: Add Your Simple Order Form to Your Site
With the help of the WPForms plugin, you can publish your form anywhere on your website.
You can publish it as a post, on pages, sidebar widgets, or footer widget.
Commonly it is embedded on the order page. To do that you must already have an order page on your website or you must create a new order page.
1. On the page click inside the first and click on the Add WPForms icon.
2. Click on the WPForms dropdown and pick which one of the forms you’ve already created that you want to insert into your page. Select your order form.
3. In the end, click on the blue button in the top right that says Publish.
That’s it! You have successfully created and posted an online order form on your WordPress website.