{"id":190385,"date":"2020-08-07T05:39:57","date_gmt":"2020-08-07T05:39:57","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=190385"},"modified":"2020-08-03T21:29:46","modified_gmt":"2020-08-03T21:29:46","slug":"create-free-payment-forms-with-forminator","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/create-free-payment-forms-with-forminator\/","title":{"rendered":"Create an Easy Payment Form (for free!) with Forminator"},"content":{"rendered":"<p>Selling items on WordPress has never been as streamlined, thanks to <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">Forminator<\/a>, our 5-star forms plugin. You can set up your shop quickly and efficiently with free payment options like Stripe and Paypal integration, customizable product features, discount codes, and more &#8212; all for free!<\/p>\n<p>If you\u2019re trying to figure out an easier way to accepts payments online securely or put together a functional eStore without overcomplicating things, this tutorial will show you how you can sell stuff super easily without having to worry about an elaborate WooCommerce setup.<\/p>\n<p>We&#8217;ll take you step-by-step through some of Forminator\u2019s more advanced features that will benefit you and your shoppers.<\/p>\n<p>You\u2019ll also see how Forminator, combined with our free email capture plugin, <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-popup\/\" rel=\"noopener\" target=\"_blank\">Hustle<\/a>, can make your online shop \u201cpop\u201d (literally, as you\u2019ll see). Hustle can offer special discounts to your visitors before leaving your site and collect their email at the same time so you can continue marketing to them.<\/p>\n<p>With Forminator, your visitors can be shopping in no time on a storefront like this&#8230;<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/store-front.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/store-front.mp4\" type=\"video\/mp4\"><\/video>\n<p style=\"text-align: center;\"><small>Sell stuff super easily&#8230;no WooCommerce required!<\/small><\/p>\n<p>We\u2019ll start by setting up an order form and then look at enhancing it further with Hustle.<\/p>\n<p>Throughout this tutorial, we\u2019ll be working with an ordering form for a Dev Man t-shirt as an example:<\/p>\n<figure id=\"attachment_190529\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190529\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/online-shop.png\" alt=\"An online shop image made with Forminator.\" width=\"600\" height=\"375\" \/><figcaption class=\"wp-caption-text\">The sales page we\u2019re using has a ton of customized options.<\/figcaption><\/figure>\n<p><em><strong>BONUS:<\/strong> As we go through this, join the fun! <\/em><a href=\"https:\/\/online-store.wpmudev.host\/devman-t-shirt\/\" rel=\"noopener\" target=\"_blank\"><em>Click here to check this t-shirt site demo<\/em><\/a><em> for yourself and try it out. Also, you can <\/em><a href=\"https:\/\/docs.google.com\/document\/d\/1QzmaXEdic30EsC110JdfmJbolCWnUCHaVJWl6Jsgaxs\/edit?usp=sharing\" rel=\"noopener\" target=\"_blank\"><em>download this form&#8217;s file<\/em><\/a><em> and upload it to your WordPress site.<\/em><\/p>\n<p>We\u2019ll show you how to use Forminator to:<\/p>\n<ol>\n<li><a href=\"#options\">Choose Advanced Order Form Options<\/a><\/li>\n<li><a href=\"#pagination\">Structure Your Order Form with Pagination<\/a><\/li>\n<li><a href=\"#product\">Create Product Labels with Select Field Options<\/a><\/li>\n<li><a href=\"#discounts\">Set Up Discounts and a Base Price<\/a><\/li>\n<li><a href=\"#calculate\">Calculate the Tax and Total Price<\/a><\/li>\n<li><a href=\"#checkout\">Create the Checkout Section<\/a><\/li>\n<li><a href=\"#exit-intent\">Set Up a Special Discount Exit-Intent Pop-Up (with Hustle)<\/a><\/li>\n<\/ol>\n<h2><a name=\"options\" target=\"_blank\"><\/a>1. Choose Advanced Order Form Options<\/h2>\n<p>Sure, you can <a href=\"https:\/\/wpmudev.com\/blog\/how-to-build-order-forms-with-payments-for-free-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">create a simple order form<\/a> with Forminator in just a few clicks, but we\u2019re taking things up a notch.<\/p>\n<p>Forminator can build pretty impressive sales pages with advanced options, such as the number of items, sales tax, discount codes, and more.<\/p>\n<p>As you\u2019ll see, you can create professional payment and order forms that will give your shoppers more choices and be visually appealing. Plus, depending on your offering, many of these features may need to be included.<\/p>\n<p>Though it\u2019s advanced, it\u2019s still simple to set up.<\/p>\n<p>By the time we&#8217;re done, you will know how to put together a sophisticated eCommerce payment form with advanced functionality, calculations, and more&#8230;all built with free components!<\/p>\n<h2><a name=\"pagination\" target=\"_blank\"><\/a>2. Structure Your Order Form with Pagination<\/h2>\n<p>Pagination is the field for page breaks. This is perfect for breaking down your ordering form into sections and making it less cluttered.<\/p>\n<p>When you add your first <strong>Page Break<\/strong> field to your form, you\u2019ll see a <strong>Pagination<\/strong> at the top of the other areas.<\/p>\n<p>This order form has three sections. Here\u2019s a quick look at them&#8230;<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/dev-man-3-screens.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/dev-man-3-screens.mp4\" type=\"video\/mp4\"><\/video>\n<p>&nbsp;<\/p>\n<p>Click the Pagination section to open it up and edit the page breaks in the form. In this example, under <strong>Labels<\/strong>, it\u2019s broken up as:<\/p>\n<ul>\n<li>Page 1: Choose Product<\/li>\n<li>Page 2: Shipping Address<\/li>\n<li>Finish: Checkout<\/li>\n<\/ul>\n<figure id=\"attachment_190530\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190530\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Pagination.png\" alt=\"A look at the pagination set up.\" width=\"600\" height=\"583\" \/><figcaption class=\"wp-caption-text\">Where you add the page break labels for the form.<\/figcaption><\/figure>\n<p>In the<strong> Settings<\/strong> section, you have the option for a progress indicator to show users how far they are through your form. Also, you can customize the text for the <strong>Next <\/strong>and <strong>Previous<\/strong> buttons.<\/p>\n<figure id=\"attachment_190531\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190531\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/pagination-settings.png\" alt=\"Progresss indicator and buttons text.\" width=\"600\" height=\"889\" \/><figcaption class=\"wp-caption-text\">Pagination settings area.<\/figcaption><\/figure>\n<p>Breaking up an order form is a great way to walk your users through the checkout process.<\/p>\n<h2><a name=\"product\" target=\"_blank\"><\/a>3. Create Product Labels with Select Field Options<\/h2>\n<p>It\u2019s time to determine the options for t-shirts and incorporate this into the form. For this, we are using the <strong>Select <\/strong>fields for the choices of <strong>Style<\/strong>, <strong>Color,<\/strong> and<strong> Size<\/strong>.<\/p>\n<p>They are labeled accordingly and placed at the top of the form in the upper section.<\/p>\n<figure id=\"attachment_190532\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190532\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Select-Options.png\" alt=\"The select fields options for style, color, and size.\" width=\"600\" height=\"315\" \/><figcaption class=\"wp-caption-text\">The Select fields labeled according to what they are.<\/figcaption><\/figure>\n<p>Each one can then be edited by what to include in the <strong>Labels<\/strong> section. For example, with the colors, the form has the options of <strong>green<\/strong> and <strong>yellow<\/strong>.<\/p>\n<figure id=\"attachment_190534\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190534\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/color-options.png\" alt=\"The labels section where you can add various color options.\" width=\"600\" height=\"744\" \/><figcaption class=\"wp-caption-text\">The labels section where you can add various options.<\/figcaption><\/figure>\n<p>The process is the same for the <strong>Style <\/strong>field.<\/p>\n<p>With <strong>Size<\/strong>, this has some calculation variables that we need to include since this is also where it displays the price. The prices are all different, depending on the size.<\/p>\n<figure id=\"attachment_190536\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190536\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/size-options-1.png\" alt=\"Different size options for t-shirts.\" width=\"600\" height=\"740\" \/><figcaption class=\"wp-caption-text\">You can see the various prices that vary by size.<\/figcaption><\/figure>\n<p>The<strong> Calculations<\/strong> tab is where you\u2019ll make calculations (I\u2019ll show you how this all adds-up soon).<\/p>\n<p>You can <strong>Enable<\/strong> this and indicate the price by a numerical value for each size. As you can see, they all vary.<\/p>\n<figure id=\"attachment_190537\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190537\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculations.png\" alt=\"Where individual calculations are added.\" width=\"600\" height=\"847\" \/><figcaption class=\"wp-caption-text\">Individual prices are calculated here.<\/figcaption><\/figure>\n<p>The next option to indicate is the amount. For this, we\u2019re using a <strong>Number <\/strong>field. <em>How many do you want? <\/em>is the way it\u2019s labeled.<\/p>\n<figure id=\"attachment_190538\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190538\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/How-Many-Do-You-Want.png\" alt=\"Number fields option for the amount of items that are to be purchased.\" width=\"600\" height=\"230\" \/><figcaption class=\"wp-caption-text\">The Number field option to indicate the number of items a user wants to purchase.<\/figcaption><\/figure>\n<p>You can adjust the settings in the field and indicate a minimum and maximum amount available for purchase.<\/p>\n<h2><a name=\"discounts\" target=\"_blank\"><\/a>4. Set Up Discounts and a Base Price<\/h2>\n<p>When a user decides what they want to purchase, it all needs to be added up. This section is where you add calculations and discounts.<\/p>\n<p>With a <strong>Text<\/strong> field, you can mention an option for a discount. Here we have it worded <em>Have a discount coupon?<\/em><\/p>\n<figure id=\"attachment_190539\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190539\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/have-a-discount.png\" alt=\"The Text field with the discount feature.\" width=\"600\" height=\"228\" \/><figcaption class=\"wp-caption-text\">The Text field with the discount feature.<\/figcaption><\/figure>\n<p>We\u2019ll now include two <strong>Calculations<\/strong> fields to get the discount feature to function. Calculations are to the right of the <strong>Text<\/strong> field.<\/p>\n<p>The first<strong> Discount<\/strong> field is for when someone enters the correct discount code. The Calculation field then calculates a 20% discount and becomes visible.<\/p>\n<p>The calculation field is still required when the coupon code isn\u2019t entered, so that, in these cases, this Discount field will become visible (you\u2019ll see in the <strong>Visibility<\/strong> screenshot coming up) and show the discounted amount as 0.<\/p>\n<figure id=\"attachment_190540\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190540\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Discount-calculator.png\" alt=\"Two calculations fields for discounts.\" width=\"600\" height=\"304\" \/><figcaption class=\"wp-caption-text\">The two Calculations fields.<\/figcaption><\/figure>\n<p>To get this to function, go to the <strong>Settings<\/strong> area of the first field (calculator-4). The <strong>Field Type<\/strong> needs to be set at <strong>Read-Only,<\/strong> and the <strong>Decimal Places<\/strong> placed at 2.<\/p>\n<figure id=\"attachment_190541\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190541\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculator-settings.png\" alt=\"The detailed calculation settings.\" width=\"600\" height=\"576\" \/><figcaption class=\"wp-caption-text\">Calculation settings.<\/figcaption><\/figure>\n<p>In the <strong>Calculations<\/strong> area, we\u2019ve added the formula <code>({select-3}*{number-1})*0.2<\/code>. This indicates that Select-3 (<em>Size<\/em>) multiplies the Number-1 (<em>How many do you want?<\/em>) and the percentage discount we want to offer (in this case, 20%).<\/p>\n<figure id=\"attachment_190542\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190542\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculations-settings.png\" alt=\"Calculations formula for the number of items.\" width=\"600\" height=\"615\" \/><figcaption class=\"wp-caption-text\">Where you\u2019ll enter the calculations formula for size and the number of items.<\/figcaption><\/figure>\n<p>This calculation works by multiplying the \u201csize*quantity\u201d by 0.2 to find out the discounted amount.<\/p>\n<p>The rule for the discount coupon is in the<strong> Visibility <\/strong>tab. We\u2019ll be using the coupon code DEVMAN20. We used the<strong> Field<\/strong> as Text-1 (<em>Have a discount coupon?<\/em>), have the <strong>Condition<\/strong> as <em>Is<\/em>, and the <strong>Value<\/strong> is <em>DEVMAN20<\/em>.<\/p>\n<figure id=\"attachment_190543\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190543\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculations-rule.png\" alt=\"Calculations rule for the promo code.\" width=\"600\" height=\"815\" \/><figcaption class=\"wp-caption-text\">When all the conditions are in place, hit Done and Apply to save.<\/figcaption><\/figure>\n<p>The next <strong>Calculations<\/strong> field (calculation-5) will be set similar to the other one; however, there are a couple of changes.<\/p>\n<p>We\u2019ll be using the calculation <code>({select-3}*{number-1})*0<\/code>.<\/p>\n<figure id=\"attachment_190544\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190544\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculations-2.png\" alt=\"The calculation formula for the size and number of items a customer wants.\" width=\"600\" height=\"625\" \/><figcaption class=\"wp-caption-text\">The calculation formula for the size and number of items a customer wants.<\/figcaption><\/figure>\n<p>Also, in the <strong>Visibility<\/strong> tab, we\u2019re changing the<strong> Condition<\/strong> to <em>Is not<\/em>. Every other setting is the same as the previous Calculations tab.<\/p>\n<figure id=\"attachment_190545\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190545\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/calculations-visibility-2.png\" alt=\"A rule for the calculations tab.\" width=\"600\" height=\"830\" \/><figcaption class=\"wp-caption-text\">The other rule in the Calculations tab.<\/figcaption><\/figure>\n<p>Now that we have these conditions set, we add the base price. The <strong>Base Price<\/strong> is another <strong>Calculation<\/strong> field (calculation-1).<\/p>\n<figure id=\"attachment_190546\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190546\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/base-price.png\" alt=\"The field for the base price.\" width=\"600\" height=\"302\" \/><figcaption class=\"wp-caption-text\">Where to put the Base Price field.<\/figcaption><\/figure>\n<p>Under <strong>Settings<\/strong>, it\u2019s set as <strong>Read-Only<\/strong> and has two as the number of decimals.<\/p>\n<p>For the <strong>Calculations<\/strong> field, it includes the calculation set at <code>({select-3}*{number-1})-({calculation-4})<\/code>.<\/p>\n<figure id=\"attachment_190548\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190548\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/base-price-calculations-copy.png\" alt=\"Base price calculation.\" width=\"600\" height=\"633\" \/><figcaption class=\"wp-caption-text\">The calculation formula for the base price.<\/figcaption><\/figure>\n<p>This calculation works by finding the original price and multiplying the size with the quantity field (e.g., <code>{select-3}*{number-1}<\/code>) and then subtracting the discount.<\/p>\n<p>Beyond that, there are no rules or anything else to add to this field.<\/p>\n<h2><a name=\"calculate\" target=\"_blank\"><\/a>5. Calculate the Tax and Total Price<\/h2>\n<p>The last piece of the numbers puzzle is adding in the <strong>Tax<\/strong> and <strong>Total Price<\/strong>. These are both <strong>Calculation<\/strong> fields (calculation-1 and calculation-2) added below <strong>Base Price<\/strong> in our form.<\/p>\n<figure id=\"attachment_190549\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190549\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/tax-and-total-price.png\" alt=\"The fields for the tax and total price.\" width=\"600\" height=\"229\" \/><figcaption class=\"wp-caption-text\">The Tax and Total Price fields.<\/figcaption><\/figure>\n<p>For the tax field, add a description of the tax amount under <strong>Labels, <\/strong>so users will know that it\u2019s 18% (you can set any rate that you require).<\/p>\n<figure id=\"attachment_190550\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190550\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/tax-amount.png\" alt=\"Amount of tax entered and description.\" width=\"600\" height=\"403\" \/><figcaption class=\"wp-caption-text\">Where you describe the amount of tax a customer will be charged.<\/figcaption><\/figure>\n<p>In <strong>Settings<\/strong>, the <strong>Field Type<\/strong> is Read-Only, and the <strong>Decimal Places <\/strong>is 2.<\/p>\n<p>As for the <strong>Calculations<\/strong>, the one that included for tax is the formula <code>{calculation-1}*0.18<\/code>. This means that 18% of Base Price is the price that we calculated in the previous step.<\/p>\n<figure id=\"attachment_190551\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190551\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/tax-field-calculation.png\" alt=\"Where the tax formula is entered.\" width=\"600\" height=\"623\" \/><figcaption class=\"wp-caption-text\">The tax formula.<\/figcaption><\/figure>\n<p>Nothing else is necessary for this field.<\/p>\n<p>Finally, the field for the<strong> total price<\/strong> (calculation-3) includes the formula <code>{calculation-1}+{calculation-2}<\/code>. This formula will add up the total amount by combining the base price with tax.<\/p>\n<figure id=\"attachment_190552\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190552\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/total-price-calculation.png\" alt=\"The total amount is calculated here.\" width=\"600\" height=\"627\" \/><figcaption class=\"wp-caption-text\">Total amount calculation.<\/figcaption><\/figure>\n<p>That will do it for all of the calculations and the first section of the form. Forminator will calculate the numbers for the customer and add everything up to determine the price.<\/p>\n<p>From here, customers will go onto the next section, where they\u2019ll enter their address.<\/p>\n<p>You can see a page break indicates that the next section will be just for the <strong>Address<\/strong>, created with the Address field. Another page break follows it.<\/p>\n<figure id=\"attachment_190553\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190553\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Address-page-breaks.png\" alt=\"Where the address field is entered between page breaks.\" width=\"600\" height=\"343\" \/><figcaption class=\"wp-caption-text\">The address field between page breaks.<\/figcaption><\/figure>\n<p>For the address field, it includes the vital information needed and nothing else. You can edit specific information (e.g., \u2018country\u2019) anyway that you\u2019d like.<\/p>\n<p>Customers can now click \u2018Next\u2019 to check out. <em>Cha-ching!<\/em><\/p>\n<h2><a name=\"checkout\" target=\"_blank\"><\/a>6. Create the Checkout Section<\/h2>\n<p>Getting this part set up is extremely simple. Just be sure you have a Stripe or PayPal account connected with Forminator. If you need help with this, please <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator\/#payments\" target=\"_blank\" rel=\"noopener\">refer to our documentation<\/a>.<\/p>\n<p>All we\u2019ve included are fields for <strong>Name<\/strong>, <strong>Email<\/strong>, and <strong>Stripe<\/strong>.<\/p>\n<figure id=\"attachment_190554\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190554\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/payment-fields.png\" alt=\"Payment fields for the checkout area.\" width=\"600\" height=\"81\" \/><figcaption class=\"wp-caption-text\">The fields created for the checkout area.<\/figcaption><\/figure>\n<p>From this point, the only thing that was changed is the <strong>Submit <\/strong>button at the bottom of the fields. <strong>Place Order <\/strong>is the text.<\/p>\n<figure id=\"attachment_190555\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190555\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/bottom-field.png\" alt=\"Where the submit button field is located.\" width=\"600\" height=\"301\" \/><figcaption class=\"wp-caption-text\">The Submit button field.<\/figcaption><\/figure>\n<p>We also edited the<strong> Error Message<\/strong> in the <strong>Labels <\/strong>area to <em>Error: Your form is not valid, please fix the errors!<\/em><\/p>\n<figure id=\"attachment_190556\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190556\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/button-text-error-message.png\" alt=\"Where you'll enter the button text and error message.\" width=\"600\" height=\"414\" \/><figcaption class=\"wp-caption-text\">The Button Text and Error Message.<\/figcaption><\/figure>\n<p>With all of this information in place, it\u2019s now time to cash out and complete the purchase!<\/p>\n<p>But uh-oh\u2026<\/p>\n<p>It looks like a customer is about to leave the page without buying our fantastic t-shirt. The pop-up is where you hook them with an offer they can\u2019t refuse before they take-off.<\/p>\n<h2><a name=\"exit-intent\" target=\"_blank\"><\/a>7. Set Up a Special Discount Exit-Intent Pop-Up &#8212; (with Hustle)<\/h2>\n<p><a href=\"https:\/\/wpmudev.com\/blog\/introducing-hustle-email-optin-plugin\/\" target=\"_blank\" rel=\"noopener\">Hustle<\/a> is our free marketing plugin that pops-in and saves the sale just when you need it. You\u2019ll see how beneficial it is to include him with Forminator when a customer is ready to bail.<\/p>\n<figure id=\"attachment_190557\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190557\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Forminator-And-Hustle.png\" alt=\"Image of Forminator and Hustle teaming up.\" width=\"600\" height=\"421\" \/><figcaption class=\"wp-caption-text\">Hustle and Forminator: Together they form the perfect duo.<\/figcaption><\/figure>\n<p>You can set up a promotion that pops up and offers a special discount code that corresponds with the order form.<\/p>\n<p>If they opt for the discount, you\u2019ll also capture their email address to continue marketing.<\/p>\n<p>So, let\u2019s set this form up and keep this shopper from going anywhere&#8230;<\/p>\n<p>When <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-popup\/\" rel=\"noopener\" target=\"_blank\">Hustle is downloaded<\/a> and activated, you can create a new pop-up in the WordPress admin.<\/p>\n<p>In the <strong>Content <\/strong>area of Hustle, we\u2019ve added the title <em>Don\u2019t miss this! <\/em>and a subtitle of <em>We are giving away a 20% discount. <\/em>We also added images.<\/p>\n<figure id=\"attachment_190558\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190558\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/content-area-in-hustle.png\" alt=\"View of the content area of Hustle.\" width=\"600\" height=\"321\" \/><figcaption class=\"wp-caption-text\">The Content area of Hustle.<\/figcaption><\/figure>\n<p>In the <strong>Main Content<\/strong> area, we\u2019ve included a message urging users to sign up.<\/p>\n<figure id=\"attachment_190559\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190559\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Main-content-hustle.png\" alt=\"View of Hustle\u2019s main content area.\" width=\"600\" height=\"250\" \/><figcaption class=\"wp-caption-text\">Hustle\u2019s Main Content area.<\/figcaption><\/figure>\n<p>To offer the code, the user needs to enter their email address. Inserting email is done in the <strong>Email <\/strong>section of Hustle. You\u2019ll simply place the <strong>Email <\/strong>field. Also, the button text was changed to <em>Get my discount coupon.<\/em><\/p>\n<figure id=\"attachment_190560\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190560\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/emails-hustle.png\" alt=\"Where the email area of Hustle is located.\" width=\"600\" height=\"296\" \/><figcaption class=\"wp-caption-text\">The Email area of Hustle.<\/figcaption><\/figure>\n<p>Once they opt-in, the discount code is provided to them by adding it in <strong>Submission Behavior<\/strong>.<\/p>\n<figure id=\"attachment_190561\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190561\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/submission-behavior-hustle.png\" alt=\"Showing where you'll enter a message and promo code.\" width=\"600\" height=\"340\" \/><figcaption class=\"wp-caption-text\">Where you\u2019ll enter any message and also the promo code.<\/figcaption><\/figure>\n<p>Their email address can also be added to a 3rd party application (e.g. MailChimp) in the <strong>Integrations<\/strong> area.<\/p>\n<p>With this promo now launched, Hustle knows when to grab their attention before they leave. In the <strong>Behavior<\/strong> section, under <strong>Pop-up Trigger<\/strong>, you can pick <strong>Exit Intent <\/strong>on when this is displayed.<\/p>\n<figure id=\"attachment_190562\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190562\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/exit-intent-hustle.png\" alt=\"View of the exit intent area of Hustle.\" width=\"600\" height=\"356\" \/><figcaption class=\"wp-caption-text\">Where to set the pop-up for the ad.<\/figcaption><\/figure>\n<p>And users will then be greeted with a special discount:<\/p>\n<figure id=\"attachment_190563\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190563\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Hustle-pop-up.png\" alt=\"Look at the promotion created by Hustle.\" width=\"600\" height=\"299\" \/><figcaption class=\"wp-caption-text\">The promotion pop-up.<\/figcaption><\/figure>\n<p>Once they opt-in, they get the promo code. Who could pass on 20% off?<\/p>\n<figure id=\"attachment_190564\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-190564\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Discount-Code.png\" alt=\"A look at the discount code being displayed.\" width=\"600\" height=\"292\" \/><figcaption class=\"wp-caption-text\">DEVMAN20 is what they can use for the discount.<\/figcaption><\/figure>\n<p>And with this, there\u2019s a good chance they\u2019ll hit PLACE ORDER&#8230;<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Dev-Man-Checking-Out.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2020\/08\/Dev-Man-Checking-Out.mp4\" type=\"video\/mp4\"><\/video>\n<p>&nbsp;<\/p>\n<p>Adding a <a href=\"https:\/\/wpmudev.com\/blog\/create-wordpress-popup-hustle\/\" target=\"_blank\" rel=\"noopener\">pop-up and promotions can help sales<\/a>, build your list, and create a positive experience for users that appreciate a good discount.<\/p>\n<p>And in case you were wondering,<a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" rel=\"noopener\" target=\"_blank\"> Elementor <\/a>helped create our form. Elementor is a 5-star WordPress page builder plugin. You can <a href=\"https:\/\/wpmudev.com\/blog\/elementor-woocommerce\/\" target=\"_blank\" rel=\"noopener\">find out more about Elementor here<\/a>.<\/p>\n<h2>These Forms are Not the Norm<\/h2>\n<p>As you can see, thanks to <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">Forminator<\/a>, you can launch and fund off an online store on WordPress for free by creating an above normal checkout process.<\/p>\n<p>There\u2019s also much more you can do with Forminator. He has <a href=\"https:\/\/wpmudev.com\/blog\/forminator-wp-esignature-form\/\" target=\"_blank\" rel=\"noopener\">options for eSignatures<\/a>, integration with <a href=\"https:\/\/wpmudev.com\/blog\/forminator-fortressdb-wordpress-data-security\/\" target=\"_blank\" rel=\"noopener\">FortressDB<\/a>, <a href=\"https:\/\/wpmudev.com\/blog\/installing-a-free-wordpress-calculator-plugin\/\" target=\"_blank\" rel=\"noopener\">calculators<\/a>, and much more! With all of the customization options, you can set up your online store exactly how you want.<\/p>\n<p>And for more information on creating order forms and accepting credit card payments, be sure to check out this quick video:<\/p>\n<p><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><span class=\"embed-youtube-lazy-id dev-hidden\">hha0W-A1Kq8<\/span><\/span><\/p>\n<p>Finally, if you ever need additional help setting up shop, contact our WPMU DEV 24\/7 support superheroes.<\/p>\n<p>With Forminator and Hustle, your store should take form in no time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selling items on WordPress has never been as streamlined, thanks to Forminator, our 5-star forms plugin. You can set up your shop quickly and efficiently with free payment options like Stripe and Paypal integration, customizable product features, discount codes, and more &#8212; all for free! If you\u2019re trying to figure out an easier way to [&hellip;]<\/p>\n","protected":false},"author":811449,"featured_media":221949,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"11","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260,11259],"tags":[],"tutorials_categories":[11232],"class_list":["post-190385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","category-wpmudev-tutorials","tutorials_categories-forminator-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/811449"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=190385"}],"version-history":[{"count":52,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190385\/revisions"}],"predecessor-version":[{"id":190617,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/190385\/revisions\/190617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/221949"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=190385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=190385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=190385"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=190385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}