Create a Discount Code FieldPRO

This tutorial shows you how to add a discount code field to your e-commerce form. In this example we show how to add the following:

  • Coupon code: 50OFF
  • Discount amount: 50.00

You can adapt this same method to your own coupon needs.



The form shown in the demo above is made up from the following fields:

WS Form - Discount - Layout

The Price field is being used to apply a sub-total to the form. It could be any combination of e-commerce fields.

The Cart Total field will show the sub-total of the form minus the discount.

Discounts in WS Form are implemented by adding a Cart Detail field configured as a Discount. to your form. Because it is a discount and we want the field to reduce the cart total, we also need to allow negative values in that field.

WS Form - Discount - Cart Detail Field

By default, the discount will be zero. You can also set the field as read only so that it cannot be edited via the web browser.

Next we need to add a Text field for entering the coupon code and a Custom Button for applying the discount.

In order to apply an amount to the discount field we will use conditional logic.

To add conditional logic to your form:

  1. Click the Conditional Logic  icon at the top of the layout editor. The Conditional Logic sidebar will open.
  2. Click the Add icon.

An example of the conditional logic is shown below:

WS Form - Discount - Conditional Logic

If the Discount Code text field has a value of 50OFF entered into it and the Apply button is clicked, then the Discount field value is set to -50. Add as many other conditions as you need for other discount codes. You can also uncheck the Case Sensitive checkbox so that the couple will apply even if 50off (lowercase) is entered.

You can try and download this form in the demo above.