Coupon Codes: How to Offer a Discount with Ninja Forms

Offering coupon codes is a great way to draw attention to your WordPress product or service. If you’re using Ninja Forms as part of your website’s commerce package, you’re in luck! Adding coupon codes to your forms has never been easier than what I’m about to show you. Unlimited discount codes, discounts as a percentage or a flat rate, whatever you want to offer, you can. Let’s look at how!

How to Setup Coupon Codes in Ninja Forms

All you’re going to need special for this is our Conditional Logic extension. Since we’re going to be collecting a payment, you’ll of course need to have PayPal or Stripe as well. We’re going to make 2 calculations and then write a conditional statement to tell the form which calculation to use based on whether or not the coupon code has been entered. That’s really all there is to it. If you’ve not used calculations or conditional statements before that might sound intimidating, but believe me it’s not! Let’s look at how to put this together.

Step 1: Getting Fields in Place

Here’s our demo form:

coupon codes demo form: product field, single line text field, 2 html fields, submit button

I’ve chosen a Product field to account for the price and quantity of the product. You could alternatively use any combination of list, commerce, or hidden fields to represent those values as suits your need.

The Single Line Text field is for entering the coupon code.

The 2 HTML fields are for displaying our 2 possible totals: one with the coupon code entered, the other without.

Let’s dress this up a bit now:

screen-shot-2017-01-11-at-11-08-40-am

Part of that is form and part function; you can see I’ve enabled quantities in the product field and set a price of $10 per widget. I simply renamed the Single Line Text Field for clarity. I also differentiated between the two HTML fields as HTML1 and HTML2, which will be important when making our calculations. Let’s do that now.

Step 2: Adding Calculations

Click on the Advanced tab, and then on Calculations. Here we’ll set up 2 calculations, which I’ve very creatively named calc1 and calc2:

  • calc1: Price without coupon code entered
  • calc2: Price with coupon code entered

Here’s what they look like:

screen-shot-2017-01-11-at-11-16-47-am

Calc1 is quite simply the merge tag for the product field. If you had two separate price and quantity fields instead, you’d add both of those merge tags and put a * between them to multiply. Whatever your formula needs to be to arrive at the total w/o the coupon code, enter that here.

Calc2 is the exact same formula as calc1, but multiplied by .9. That results in a total with a 10% discount applied. Adjust that for whatever value you want your coupon code to be. You could multiply by .8 for a 20% discount, or subtract 5 for $5 off, whatever you want.

Now we need to display these calculations for the user via our HTML fields. I’m placing calc1 into HTML1 and calc2 into HTML2 using merge tags, as you can see below. I’ve added the “Total: $” text in front of the merge tag for the user’s benefit.

coupon codes demo: gif of adding calc1 to html1 and calc2 to html2

Now all that’s left to do is write a conditional statement that will display only one of the HTML fields based on whether or not a valid coupon code is entered. Here we go.

Step 3: Setting Conditional Statements

Now that we have our calculations in place and set up our HTML fields to display them, we have to set a conditional statement that will govern which is displayed for the user. Head back to the Advanced tab of your form builder and click into Conditional Logic (you’ll need to install & activate the extension if it’s not there).

Remember, HTML1 is set up to display the total sans the coupon code, while HTML2 is set to display the discounted total with the coupon code. We want to add a conditional statement that:

  1. Hides HTML1 & displays HTML2 when the coupon code is entered
  2. Displays HTML1 & hides HTML2 if no coupon code is entered

It should look like so (I’ve chosen coffee as my coupon code):

coupon codes demo form conditional statement

That’s it. When a user types “coffee” into the coupon code field, they’ll receive a 10% discount on their total!

coupon codes demo- front end gif of form applying coupon code

With that accomplished, we have one last matter to tend to. Your user only sees one total, but two technically exist and your payment gateway (Stripe or Paypal) needs to know which total to process. We can do this easily by creating two Collect Payment actions, one for if the coupon code has been entered, one for if it hasn’t.

In the first Collect Payment action we’ll set Payment Total to calc1, and add a conditional statement that tells it to process only when the coupon code field does not equal coffee. In the second Collect Payment action, we’ll set Payment Total to calc2, and add a conditional statement that tells it to process only when the coupon code field does equal coffee. It’s that simple. You’re done!

coupon codes demo coditional statement in the Collect Payment action

You Have Coupon Codes!

This is a process that’s a little harder to explain than actually do. If you don’t have the hang of calculations and conditionals yet, you’ll probably experience a few hiccups taking this and tailoring it to your unique use-cases. Once you get the hang of it though, it’s really quite a bit easier and far more flexible than the older 2.9.x method. Have fun with your new tool!

How do you see yourself using coupon codes? Are there specific and cool ways you’re applying them on your website? Let us know in the comments! We’d love to hear what you’re up to!

SIGN UP FOR OUR NEWSLETTER

Get the latest Ninja Forms news & articles..