Do you want to add a discount coupon code field to your WordPress order forms?
You don’t have to install an advanced eCommerce plugin to start providing discounts to your customers. In this tutorial, we’ll show you how to enable a coupon code field on your WordPress order forms.
Adding a Coupon Code Field to Your WordPress Order Forms
If you’re only selling just a few products on your website, you might not want to install a heavy plugin like WooCommerce to collect payments and offer discounts with coupon codes. All you have to do is to install a WordPress forms plugin, like WPForms and integrate it with a payment gateway.
WPForms is the best contact forms plugin for WordPress. It lets you create a contact form, payment form, order form, donation form, or any other WordPress forms quickly and easily.
The best part is that you can also add a coupon code field to your order forms with WPForms.
Without a doubt, adding a discount coupon code field to your order forms help you boost your conversions as well as your sales.
Step 1: Installing WPForms
Step 2: Creating Your Order Form
The next step is to create your order form with WPForms. To create your form, go to WPForms » Add New. Now you’ll be directed to a new page where you can select a template. Here select the Billing/Order Form template.
You’ll now be directed to the form builder with all the fields on your left and the form on your right. You can simply drag the form fields and drop them in the order form. To edit a field, you can just click on the field and add your input to the left side of your form.
While the order form template gives you a head start, the beauty of WPForms is that you can customize it the way you want.
Step 2: Using Conditional Logic to Add a Coupon Code Field
For the best results, it’s only recommended to display the coupon code field to the customer who actually has a coupon code to redeem.
Let’s create a dropdown field on your form to ask whether the customer has a coupon code. To do that, add the Dropdown field to your form under the Standard Fields section.
Now you’ll have to customize this field. Just click on the field option and change the label to Do you have a discount coupon code. Next, change the:
- First choice to Select
- Second choice to Yes
- Third choice to No
Next, you need to add a field where your user can enter the discount coupon code. So drag the Single Line Text field from the left and drop it just below the Yes/No field on your form.
Now rename this field as Discount Coupon Code. To do that, just click on the field and change the text on the right-hand side of your screen.
Now it’s time to enable the conditional logic. For that, scroll down the screen to find the Conditionals option.
Just below that select the checkbox to enable conditional logic. Your conditional logic should state Show this field if “Do You Have a Discount Code” is Yes just like in the screenshot below.
That means the Discount Coupon Code field will only display if a user confirms that they have a coupon code to redeem.
Step 4: Creating Validations For Your Coupon Code Field
The next step is to add validations to your form that you created with WPForms. With this step, you can show your users whether their coupon code is valid or not. For that, go to the Payment Fields tab. Now add Single Item fields 2 times just below your Discount Coupon Code field.
Now click on each of these fields. Let’s use the first field to redeem the coupon and the second field to display an error message if the coupon code isn’t correct.
In the first one, edit the label to Your Price. Under the Description field, explain the discount you wanted to offer. In the Item Price, add the discounted price.
Next, scroll down to the Conditionals tab and select the checkbox Enable conditional logic option. Here you can set up when people should see this Single Item field. Now add whatever you want your discount code to be. Let’s say your code is 100%OFF.
You can add more than one discount code by clicking on the Add new group option just below it.
As mentioned above, let’s use the second field to display an error message if the coupon code isn’t correct.
To do that, for the second Single line item, add the label as Your Price. In the Description, let’s say Discount code invalid. Keep in mind that this field should be shown when the coupon code is invalid. To do that, scroll down to Conditionals and select the checkbox Enable Conditional Logic option.
Under that let it show the field if Discount coupon is NOT 100%OFF. If you have more discount coupon code, add them by using the Add new group button.
Once done, hit the Save button on the top right corner of your screen. Your form is now ready to be published.
Step 5: Publishing Your Form on WordPress
The next step is to publish your form. For that, go to the page or post editor where you want to display your form. Now click on the + sign on the top left corner of your screen. Then using the search button look for WPForms.
When you find WPForms, click on it. You can now select your form by clicking on the dropdown arrow. Your form will now be added to your page. Then make sure you publish the form by updating your post.
That’s it. You’ve successfully added a coupon code field to your WordPress order form.
If you liked this article, you might also want to check out our complete review on WPForms.