Do you want to add a coupon code field to your online forms?
Giving users a place where they can enter a code to get a discount on your product or services is helpful if you’re using discount codes for your online marketing — which can really help boost your sales and traffic.
So in this article, we’ve written a step-by-step guide on how to add a coupon code field to your WordPress forms.
Why Add a Coupon Code Field to Your Forms?
There are a lot of reasons why you might want to add a place on your payment forms for visitors to enter a discount code. Here are a few:
- Apply discounts to your order forms
- Boost sales using different marketing tactics
- Encourage customers to buy specific clearance items
- Drop the total price of visitors’ shopping carts
- Issue refunds or credits using coupon codes
- Reward loyal customers if you give special codes to VIP members
- Give discount or coupon codes in a specific email marketing campaign for lead generation (Birthday emails, Black Friday, etc.)
- And more
With WPForms, you can easily make a form with a coupon field. You don’t need to install a separate WordPress promotion code plugin.
So now that you know why to add a coupon code field to your WordPress forms, let’s look at how to do it.
How to Add a Coupon Code Field to Your Forms
If you’re ready to add a promo code or coupon code field to your WordPress forms, just follow these steps.
In This Article
Step 1: Install the WPForms Plugin
The first thing you’ll need to do is install and activate the WPForms plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin. Among its many powerful features, WPForms works great to add a coupon code field to your forms.
Next, we’ll show you how to use WPForms as a WordPress promotion code plugin.
Step 2: Set Up Your WordPress Coupon Code Form
Now that your WPForms plugin is installed, the next thing you’ll want to do is set up a payment form. That way, you’ll have a form to add your coupon code field to.
From your WordPress dashboard, head to WPForms » Add New in the left-hand panel to create a new form. Name it whatever you’d like in the Name Your Form field, then select the Billing / Order Form template.
So, your order form will populate these fields:
- Name (First and Last)
- Multiple Items
- Total amount
- Comment or Message
WPForms lets you change your template however you like. You can drag fields up and down to rearrange their order, delete things if you feel you don’t need them, and drag fields from the left-hand panel onto your form if you’d like to add something.
Because we’re adding a coupon code field, we need to replace the Multiple Items field with a Multiple Choice field. This will let us change the price of the items if a user enters a coupon code.
First, we’ll delete the Multiple Items field by hovering over it and clicking the trash icon.
Then we’ll drag a Multiple Choice field into our form and click on it to edit its options. We’ll change the label to “Available Items” and add a choice for each product we want to show in our form.
We recommend including the prices of each item so customers know how much they cost, too. Read our article on common complaints about payment forms if you’re looking for more ways to optimize your form.
In this tutorial, we also set up Stripe as our form of payment, so you’ll see we added a credit card field. For a more in-depth walk-through on setting up your order form, including notifications and configuring your payment provider (like Stripe, PayPal, Square, or even Authorize.Net), we’ve created a post on building your online order form with payments that explains more about the functionality.
Now that you’ve created your form, let’s get ready to add that coupon code field.
Step 3: Add a Yes/No Question
Next up, we’re going to add a dropdown box. This box will ask a user if they have a discount or not.
We want to do this because it’s best practice not to show your discount field unless you know someone has a code. We’ll do this with Smart Conditional Logic.
To do this, simply drag the Dropdown field from the left-hand panel to your form underneath the Total box, or wherever you’d like to place it on your form.
Next, you’ll want to customize your dropdown box. Change the label to something like “Do you have a coupon code?” and change the choices to:
Feel free to have fun with the text in these spots, it’s your website. Try to keep it clear that the options are “Yes” or “No,” but if it matches your brand, you can edit these to something more fun like “Sure!” and “Nope!”. That’s totally up to you.
Before we finish, here’s a neat trick. You can add a placeholder to your dropdown so that neither of the options is selected by default.
To do this, click the Dropdown field in the form builder and click on the Advanced tab in the Field Options panel. Under Placeholder, type something like Select or Please Choose.
And that’s it! Now we’re ready to create the conditional logic for the coupon code field.
Step 4: Create Your Coupon Code Field
Now that your Dropdown field is created, the next step is to add a spot for someone to enter their promotion code if they select Yes in the dropdown box.
To do this, drag the Single Line Text field from the left-hand panel onto your form, right below the Do you have a coupon code? field.
Now, rename the Single Line Text field’s label to “Coupon Code” and then click on the Smart Logic tab.
Next, click on the toggle next to Enable Conditional Logic, and in the area that expands, enter the following:
Your conditional logic should state Show this field if Do you have a coupon code? is Yes.
Now, only people who select “Yes” will see the discount code field, keeping your form less cluttered and super organized.
You’re doing great so far, let’s move on to the next step.
Step 5: Create Your Validation Messages
The next thing you’ll do on your WordPress coupon code form is to add 2 validation responses. Simply put, we’ll create a response to show people if the promotional code is valid, and another one to show if it isn’t.
To start, drag 2 Content fields from the left-hand panel onto your form below the discount code field.
Now, click on each of the Content fields on your form to display the settings so you can adjust them.
In the 1st Content field, type the message you want to show if a customer enters a valid coupon code. For our example, we’re giving new mailing list subscribers 20% off their purchase.
Then click on the Smart Logic tab and toggle on Enable Conditional Logic. Next, set up your logic to read, Show this field if Coupon Code is SUBSCRIBE20 (or whatever your code is).
Have more than one discount code you’d like to use? Simply click the And New Group button to repeat this process.
This will show your validation message if the user enters any valid coupon code.
Next, in the 2nd Content field, enter the message you want to show if a customer enters an invalid coupon code.
Then go to the Smart Logic tab, enable conditional logic, and make a rule that says, Show this field if Coupon Code is not SUBSCRIBE20.
Now, this rule alone will still show the message if the coupon code field is empty. So, we have to click the And button and create a second logic rule. This one will say, Show this field if Coupon Code not empty.
Now users will only see this message if they enter a code and it’s not valid.
Step 6: Add Your Payment Fields
The last thing you need to do is add separate payment fields for each item, with full and discounted prices. Then we’ll use conditional logic to show the right price based on whether the customer has a valid coupon code.
Our example form has 3 items, so we need to add 6 Single Item fields — 3 for full price items, and 3 for discounted items.
We’ll click on the 1st Single Item field and set its price to $10.00, which is the full price of the 1st item in our Multiple Choice field. We’ll also set the Item Type to Hidden so users don’t see this field in our form.
Then we’ll click on the Smart Logic tab and enable conditional logic. Next, we need to create 2 logic rules. The 1st one will say Show this field if Available Items is First Item. The 2nd will say Show this field if Coupon Code is not SUBSCRIBE20.
Now, if the user selects the First Item and does not enter our coupon code, they will be charged $10.00.
For our next Single Item field, we will set the price to $8.00 to give a 20% discount on our First Item. We’ll also set this field’s Item Type to Hidden.
Then we’ll go to the Smart Logic tab and turn on conditional logic. Our 2 rules will read, Show this field if Available Items is First Item and Show this field if Coupon Code is SUBSCRIBE20.
So, if a user enters our coupon code and picks the First Item option, they will only be charged $8.00.
Then we’ll repeat this process for each of the items in our Multiple Choice field until all 6 Single Item fields are set up.
Finally, don’t forget to hit Save in the top right corner of the page.
Congrats! Your coupon code WordPress form is almost ready. However, you’ll need to place it on a page for others to use now.
Step 7: Add Coupon Code Form to Your Website
In order for people to use your coupon code field, you’ll need it to be displayed on one of your web pages like your checkout pages.
And it’s super easy to do with WPForms. WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.
Let’s take a look at the most common placement option: page/post embedding.
To begin, create a new page or post in WordPress, or go to the update settings on an existing one.
After that, click the black plus (+) button to add a new block. From the options that pop up, choose WPForms.
The handy WPForms widget will appear inside of your block. 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 the form you created that has the coupon code field.
Now, publish or update your post or page so your form will appear on your website.
To view form entries after they’ve been submitted, check out this complete guide to form entries. For example, you can view, search for, filter, print, and delete any form entries, making the work order process that much easier.
Next, Create a Coupon Code Form in a Popup
And there you have it! You now know exactly how to add a coupon code field to your WordPress payment forms. You can easily set this up without using WooCommerce or a separate WordPress promotion code plugin.
Don’t forget to check out our article on how to create a WordPress lightbox popup, a great place to insert a discount code on your site!
So what are you waiting for? Get started with the most powerful WordPress forms plugin today. WPForms Pro includes a free online payment form template and offers a 14-day money-back guarantee.