How to Create/ Use a Coupon/Promo Code Two-Step Form

Using Coupon/Promo codes with your audience can generate more sales and allow you to offer specific products and deals to specific leads or customers. This article quickly explains how to use a Promo code within the 2-Step Order Form in the Funnel Builder.

NOTE: This article assumes that you have already created a funnel, associated product(s), and have a 2-Step Order Form in the funnel. If you haven't done these items, we highly recommend you check out the other videos in the Funnel Builder section. The Coupon Feature does not support subscription products, only one-time products. However, Promo Codes will work for recurring purchases.

Part 1: Coupons

Step One: Create a Coupon Code

Navigate to the Payments Page, and select "Coupon."

From here, fill out the necessary fields
Choose between Fixed Coupon and Percentage Coupon
Set the time range this Coupon is Active.

Step Two: Add to the Checkout

Note: 100% Off Coupon

Your customer can redeem a coupon code for 100% off the cart value.
They will still need to enter their card details in case it is required for upsells in the next steps.
Only Stripe can be used to give 100% off on order amounts. This will not work with Paypal. If both Stripe and Paypal exist, the Paypal option will not appear.
"Card details will be used for verification purposes" will show beside the card element during the $0 checkout.

Part 2: Promo Code

Step 1: You must have two products added to your funnel. The first product will be the full-price product, and the second will be the discounted product. The second product will be initially hidden and revealed as the discount option when the code is entered. This will also hide the full-price product.

NOTE: This will only work with one full-price and discount product. The code is for Two-Step Order Form products only. It is not for bumping or upselling products.

Step 2: Custom Code for Promo Code

Edit the Funnel Step where the 2-Step Order form resides
In Settings, click on Tracking Code

Select Footer Code
Paste in Copied Code (from the bottom of this article)

Step 3: Customize Your Coupon Code

Before saving, scroll up to the top of the code
Type in the Coupon Code you wish to use. You should type over the examples 'TESTCODE,' 'DISCOUNT,' and 'PROMO.'

NOTE: If you want to use more than one coupon code, you can enter multiple separated by commas. This is the default setting in the code you copied in.

Click Yes, Save

Step 4: Test Your Code

Preview your page.
Enter in details for the first step.
Enter your promo code for the second step and watch your discount product offer appear!

<style>
  .d-none_0x4e4858 {
  	display: none !important;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
	window.hlpt = window.hlpt || {};
	window.hlpt.mycodes = [
		/DO NOT EDIT ANYTHING ABOVE THIS LINE/
		"TESTCODE", "DISCOUNT", "PROMO" /Enter your desired promo codes here, similarly as shown/
		/DO NOT EDIT ANYTHING BELOW THIS LINE/
	];
	function hlpt_apply_coupon_code(product_regular, product_offer, form_base, product_description) {
		window.hlpt.mycodes = window.hlpt.mycodes.map(function (a) {
			return a.toUpperCase();
		});
		if ($("#promo_code").length == 0) {
			var coupon_input = '<input type=\'text\' id=\'promo_code\' name=\'promo_code\' placeholder=\'Enter promo code...\' class=\'form-input\'/>';
			$('.product-cost-total').last().append(coupon_input);
		}
		$(form_base + ' [id=' + product_offer + ']').closest(product_description).addClass("d-none_0x4e4858");
		$('body').on('keyup', '#promo_code', function (e) {
			if (window.hlpt.mycodes.indexOf($('#promo_code').val().toUpperCase()) == -1) {
				$(form_base + ' [id=' + product_regular + ']').click();
				$(form_base + ' [id=' + product_offer + ']').closest(product_description).addClass("d-none_0x4e4858");
				$(form_base + ' [id=' + product_regular + ']').closest(product_description).removeClass("d-none_0x4e4858");
			} else {
				$(form_base + ' [id=' + product_offer + ']').click();
				$(form_base + ' [id=' + product_regular + ']').closest(product_description).addClass("d-none_0x4e4858");
				$(form_base + ' [id=' + product_offer + ']').closest(product_description).removeClass("d-none_0x4e4858");
			}
		});
	}
	function hlpt_handle_products_description() {
		var product_regular = 'regularprod';
		var product_offer = 'offerprod';
		var form_base = ".form-payment .product-detail .product-description";
		var product_description = ".product-description";
		if ($(form_base).length == 0) {
			form_base = ".form-payment .product-detail .--mobile-product-description";
			product_description = ".--mobile-product-description";
		}
		var all_pds = $(form_base);
		if (all_pds.length > 1){
			$(all_pds[0]).find('input[type=radio]').attr('id', product_regular);
			$(all_pds[1]).find('input[type=radio]').attr('id', product_offer);
		}
		hlpt_apply_coupon_code(product_regular, product_offer, form_base, product_description);
	}
	$(function () {
		var notGloballyApplied = true;
		if (Array.isArray(window.hlpt.mycodes)) {
			var observe = new MutationObserver(function (mutations) {
				if ($('.product-cost-total').length != 0 && notGloballyApplied) {
					notGloballyApplied = false;
					hlpt_handle_products_description();
				}
			});
			observe.observe(document.body, {
				childList: true,
				subtree: true
			});
		}
	});
</script>