how-to-add-a-coupon-code-field-to-your-wordpress-forms_o

How to Add a Coupon Code Field to Your WordPress Forms

Last updated on Nov 9, 2022 by Molly Tyler
LinkedIn

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.

Create Your Coupon Code Form Now

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

Step 1: Install the WPForms Plugin

The first thing you’ll need to do is install and activate the WPForms plugin. It’s an easy-to-use, drag-and-drop form builder that is great for creating contact forms as well as eCommerce order forms with coupon code fields.

The WPForms homepage

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.

An example of a coupon code field

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.

Selecting the Billing/Order Form template

So, your order form will populate these fields:

  • Name (First and Last)
  • Email
  • Phone
  • Address
  • 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.

Deleting a Multiple Items field

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.

Customizing a Multiple Choice field to use in a coupon code 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.

You could also follow this tutorial and create an order form for multiple products by using the Checkboxes field instead of the Multiple Choice field.

In this tutorial, we also set up the WPForms Stripe addon for our payment gateway, so you’ll see we added a credit card field. We’ll be creating a form for a one-time purchase, but the Stripe addon also support recurring payments for subscriptions.

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 a new coupon 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.

Adding a Dropdown field to a coupon code 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:

  • Yes
  • No

Customizing a Dropdown field for a coupon code form

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.

Adding placeholder text to a coupon code form Dropdown field

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.

Opening the Smart Logic options tab for a coupon code field

Next, click on the toggle next to Enable Conditional Logic, and in the area that expands, enter the following:

Creating a conditional logic rule to show or hide a coupon code field

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.

A coupon code form with the coupon code field hidden by conditional logic

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.

Adding Content fields to your coupon code order form

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.

Creating a success message for your coupon code order form

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

Creating a conditional logic rule to show a success message when the correct coupon code is entered

Have more than one discount code you’d like to use? Simply click the And New Group button to repeat this process.

Adding a new logic rule group to a success message field

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.

Creating a coupon code failure message

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.

Creating a conditional logic rule to show a failure message if the wrong coupon code is entered

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.

Creating a conditional logic rule so the coupon failure message doesn't show if the coupon field is 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.

Changing the item type to hidden for a full price item in a coupon code 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.

Setting up conditional logic rules for a full price item in a discount code form

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 discount amount to $8.00 to give a percentage discount of 20% discount on our First Item. We’ll also set this field’s Item Type to Hidden.

Creating a Single Item field for a discounted price in a coupon code form

Because you’re setting custom discount amounts, you can allow any discount type you want in your order form.

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.

Setting conditional logic rules for a discounted item in a coupon code form

So, if a user enters our coupon code and picks the First Item option, they will only be charged $8.00. The Total field will also update to show the discounted price.

A coupon code field in an order form

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.

Single Item fields in a coupon code form

Finally, don’t forget to hit Save in the top right corner of the page.

Save form

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

Adding the WPForms block to a post or page

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.

Choosing your order form in the WPForms block

Now, publish or update your post or page so your form will appear on your website.

Publishing your order form post or page

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.

Create Your Coupon Code Form Now

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.

And if you enjoyed this guide, make sure to follow us on Facebook and Twitter for more free WordPress tutorials.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Comments

  1. Hi there, is there also a way that a logged in user on wordpress can use one coupon only one time?

    Reply

    1. Hi Lilith.
      As we currently don’t have the Coupon code field functionality in WPForms, there is no built-in option to restrict this.
      However, with our Form Locker addon, you can set it up so the logged in users can send a form one time only.
      I hope this helps.
      Have a good one 🙂

      Reply

      1. Hello there !

        As I understood, currently, there is any way to put a one time-one use discount code on our WP Forms ?

      2. Hey llian – Yes, you understood it correctly! Currently, we don’t have a built-in way to have a one time use coupon code but you can use or Form Locker Addon to restrict the coupon field to have only unique values so that once a user fill it out, it won’t allow the next user to fill the same code again.

        I hope that helps!

      3. can i set up 1000 discount code in 1 time？and can it set up 100%discount code？

      4. Hey there, in order to make sure we answer your question as thoroughly as possible, could you please contact our team with some additional details about what you’re looking to do?

        If you have a WPForms license, you have access to our email support, so please submit a support ticket. Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.

        Thanks.

  2. I really need your help, my problem is that how can I add a ‘input coupon’ in my website. When a visitor click on a course you have to input your name email address and password with coupon. And I want to give them different coupon. They have to contact me inorder to get coupon code. I want to create a list of different coupon codes so if they contact me I will give each of them a different coupon code. Is this possible please I need help

    Reply

    1. Hi Ojo!
      You can absolutely create such a field in your form by following this tutorial (the one on this page where you have commented). Then when you send a new coupon code to your users, you can add it into the Coupon field conditional logic, so the form recognizes new coupon codes when the users will enter them.
      For more help, if you have a WPForms license, you have access to our email support, so please submit a support ticket.

      Otherwise, we provide limited complimentary support in the WPForms Lite WordPress.org support forum.
      I hope this helps.
      Have a good one 🙂

      Reply

  3. I have an issue that I cannot figure out. My order form has multiple checkbox items, so a user can select one or many items and get a total price for all items. If they have a coupon code, the price is 0.

    Using this tutorial, the second validation requires you to enter the non-discounted price. But the non-discounted price is not a static number – it is the total of the items selected. How can I have the second validation show the total non-discounted price?

    Reply

    1. Hi Wanning.
      Currently, we do not have a builtin feature to use the Total field in the Conditional logic. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.
      You would need to create alternative checkbox fields with 0 prices and use them conditionally. So if a user has chosen 3-4 checkboxes, then by adding a discount code, new checkbox fields will be displayed and when user choose them it will still be 0 amount in the total field.
      I apologize for any inconvenience.
      Have a good one 🙂

      Reply

      1. +1 for this feature request. to create more complex forms it would be very beneficial to be able to run calculations on user input fields and prices.

      2. Hey Henry – Sure! I have added your vote to the feature request, hopefully the dev team can consider this for the future. I am sorry for the inconvenience!

      4. Hey Amin, I have added your vote to the feature request, hopefully, the dev team can consider this for the future. I am sorry for the inconvenience!

  4. +1 for this feature request. It would be really awsome, if there would be a coupon option within forms.

    Reply

    1. Hey Robert – Yes, I have gone ahead and added your vote to the feature request.

      Have a good one!

      Reply

  5. Hello we’re using your wpforms we like it very much it’s great product and very us full, the way it built in and works.

    It would be really very us full adding percentage % , plus and minus calculations in the form fields to create more input fields coupon and prices with percentage, different currency.
    I know other calculation forms plugin have this kind features.
    Please add this kind features. Thanks

    Reply

    1. Hey Michael, Thanks for the feedback. Indeed, this is going to be a great addition to WPForms, I have gone ahead and added your vote to the feature request.

      Thanks 🙂

      Reply

      1. Please add my vote for form total calculations! We have a gathering registration with A LOT of options. Some of those options automatically create a discount. We need the discounts to calculate, plus we need the option to pay in full or just a deposit.

      2. Hey Bill – Sure! I have gone ahead and added your vote to the feature request.

        Have a good one 🙂

  6. Is having the initial drop down with yes/no needed? Or can there just be a single field for inputting a discount code with an ‘apply’ button?

    Reply

    1. Hi Mitch,

      Yes, you can absolutely use a Single Line Text field instead of the initial dropdown to let the user/ submitter enter the coupon code.

      Currently, we do not have the ability to add a separate button to ‘Apply’ as you’ve mentioned. I have added your vote to the feature request, hopefully, the dev team can consider this for the future. I am sorry for the inconvenience!

      In case if it’s helpful, here is a screencast on adding a coupon code field to your forms

      Have a good one 🙂

      Reply

  7. PLEASE! ADD A DISCOUNT/COUPON FIELD!

    I do not understand why this wasnt already being worked on when you are selling an item.

    I need a coupons that are only good for a one time use. We have several products, and we create a form for each product. Desperately need this function.

    Reply

    1. Hey Cutter- Sure! I have added your vote to the feature request, hopefully, the dev team can consider this for the future. I am sorry for the inconvenience!

      Reply

  8. Is there a way to have stripe only charge the discounted rate when using a coupon one time? For instance, I have a coupon that will be 1/2 off their first month, but I don’t want to have to instruct them to “sign up again” to enable recurring payments.

    So is there a way to charge the discounted rate one time only, and still have the recurring payments enabled for the full price after the first month is up?

    Reply

    1. Hey Robert – I apologize! We don’t have a way to process a one-time discounted payment and continue with a different recurring rate. This is a current feature request and I’ve added your vote to it.

      I apologize for the inconvenience!

      Reply

      1. My company also needs this. No company gives a discount forever, but for a limited time only. And that period of time, it goes to 100%. Since you don’t have this at this point in time, I’ve unfortunately also just advised a fellow company to look for another solution as they also need this.

      2. Hey Martin- I agree it would be super helpful to remove the discount/ coupon field after a particular time interval. Currently, we do not have an inbuilt feature for this. I have added your vote for future enhancements.

        Thanks! 🙂

  9. Yes, I also need to total price to update based on what a customer selected in the Multiple Items payment field! Any progress on this front?

    Reply

    1. Hey Jason – Thanks for reaching out! Yes, it’s possible to update the total price based on what the customer selected. You can find more information on how to set things up here.

      If you need further help with this, please feel welcome to contact our support team.

      I hope this helps! :

      Reply

  10. Is there a way to add a coupon for subscriptions? I am trying to discount the first month for free but have it continue a charge at the regular price for the following months.

    Reply

    1. Hi katie! Currently, we do not have an option for providing a discounted period before the regular subscription rate is charged. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.

      I apologize that we can’t provide what you’re looking for right now, but I appreciate the suggestion and any other details you may be able to provide! It’s always helpful to get insights from our users.

      If you have any further questions about this, please contact us if you have an active subscription. If you do not, don’t hesitate to drop us some questions in our support forums.

      Reply

  11. We want to offer a 3% discount off the Total Amount if customer opts to pay with check instead of Paypal or credit card. Are there configurable fields to calculate discounted $ amount from the Total field and then subtract from Total? I notice folks asking for % and add/substract fields over 12 months ago.

    Reply

    1. Hi Karen! Currently, our plugin isn’t capable of processing calculations required for discount percentages. I do agree it would be super helpful, though. I’ve made a note of the feature request and we’ll keep it on our radar as we plan out our roadmap for the future.

      I apologize that we can’t provide what you’re looking for right now, but I appreciate the suggestion! It’s always helpful to get insights from our users.

      Thanks!

      Reply

    1. Hi Gabriel,

      Thank you for your suggestion! I’ve passed this on to our team for consideration 🙂

      If you have any further questions or suggestions about this, please don’t hesitate to contact us.

      Reply

  13. Hello, what is your view of Page Source regarding coupons? For instance if I setup any string as coupon and add condition to show/hide some fileds based on this value string will be visible in page source.
    I am guessing that page source encriptions is not covered by wpforms but is there any advised method to cover this? Thank you!

    Reply

    1. Hey Nik, that should work just fine, since the field will be hidden based on conditional logic I don’t think it could be an issue.

      If you run into any issues, please let us know so we can advise further, to do so, please submit a support ticket her and we will be happy to advise on the same.

      Thanks.

      Reply

  14. Everything goes well the only issue is we cant add pictures with out products while selecting a single item field…!

    Reply

    1. Hey Ehtisham, we are sorry for any trouble. In order to make sure we answer your question as thoroughly as possible and avoid any confusion.

      Would you mind reaching out to us with additional details so that we can help you further on this case?

      Thanks.

      Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.