How to Create a Coupon System for Your Wufoo Payment Forms

Easily add coupons to your payment forms and offer discounts to your customers.

Not already signed up for Wufoo? Let's get started!

By: Chris Coyier

One of the new payment integration upgrades that we released yesterday was the ability to use negative price amounts in your payment settings. One of the cool things you can do with this new feature is allow coupon codes on your forms that can give your users specific discounts. In this tutorial, we’ll show you how to use our Rule Builder and the new negative price feature to create a dynamic coupon system that will impress your friends and incentivise your customers.

View Demo

Step 1: Create a Coupon Checkbox

The first thing we’ll do is ask the user whether or not they have a coupon code. This should help clarify that ordering the product is possible with or without a coupon, which might be less clear if we displayed a coupon code field at all times. In the Form Builder, just add a checkbox field with a single option entitled “Got a coupon?” and then, directly below that, our Coupon Code text field.

Got a coupon?

Step 2: Create a Cloaked Field

In your form, you’ll now need to add a field that we can assign a negative price to in the payment settings. The easiest way to do this is to add a Multiple Choice field with a single choice. This may seem a little strange, but this is how we’ll attach the negative prices dynamically to the form and make our coupons system work.

Fields Needed to Create Coupon Form

For the Field Title, give it the confirmation message you need to show whether the coupon code is valid. In this example, we’ve entitled ours “YIPPEE! That coupon gets you $5 off.” For the choice, you can entitle it whatever you want (this part won’t be shown to the user when we’ve finished), but I recommend using something to remind you of the discount amount you’ll assign to it.

Cloak Keyword

In order not to show the choices and radio input to the user, just add cloak to the CSS Keyword options under the Field Setting tab for this Multiple Choice field. This is a new CSS Keyword created by us that will hide the inputs and choices for any field on a public form but still show the Field Labels. This is very useful in dynamic situations, such as these when you don’t want the user to be able to manipulate the values of the inputs on the fly but still want to show some sort of confirmation without having to use a Section Break.

Step 3: Assign Prices and Discounts in Payment Settings

After you’ve saved your form, go to the Payment Settings area for the form and assign the discount amount to the Multiple Choice field using a negative price amount. It should look something like this:

Negative Price to Create a Coupon

Please note that you have to use fixed values for these negative values. You cannot use percentages.

Step 4: Add Field Rules to Make Coupon Logic Work

The final step is to set up a variety of conditional logic that makes our form respond properly to our users’ input and calculate the price accordingly. Here’s what we need to happen:

Rules for Coupon Code

Just set up each Field Rule by wording out the sentence in the Rule Builder. When you’ve finished, you should have a form that works like our demo coupon code form, which will pass on the coupon codes dynamically to the payment processor like so:

PayPal payment page showing discounted price.

Thanks a lot for following along! We hope you enjoyed learning how to use the Rule Builder and the new Negative Price feature to create a basic coupon system. You can actually get pretty fancy with this setup with a little imagination and play, so we hope you check it out and share with us any cool things you do to enhance your Wufoo payment experiences. Until next time, happy form-building!