{"id":176705,"date":"2019-07-31T05:05:46","date_gmt":"2019-07-31T05:05:46","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=176705"},"modified":"2022-02-09T20:01:16","modified_gmt":"2022-02-09T20:01:16","slug":"how-to-build-order-forms-with-payments-for-free-in-wordpress","status":"publish","type":"post","link":"https:\/\/wpmu-dev.pro\/blog\/how-to-build-order-forms-with-payments-for-free-in-wordpress\/","title":{"rendered":"How to Build Order Forms with Payments for Free in WordPress"},"content":{"rendered":"<p>You lose 100% of the sales you don\u2019t ask for, and the same holds true for having a clunky checkout experience. Order forms help you to collect order information and process payments efficiently, thereby increasing your conversion rates significantly.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" target=\"_blank\">Forminator<\/a> makes it easier than ever to build an order form and accept payments on WordPress. Oh ya&#8230;and the best part is, <a href=\"https:\/\/wpmu-dev.pro\/blog\/best-free-form-plugin-wordpress\/\" target=\"_blank\">it\u2019s completely free<\/a>! And that includes PayPal and Stripe payment gateways!<\/p>\n<p>Whether you\u2019re planning to sell merchandise, collect donations or get rooms booked, Forminator does them all without skipping a beat. His simple drag-and-drop interface means that you don\u2019t need to know any coding whatsoever. It\u2019s truly the one form maker plugin to rule them all!<\/p>\n<p>**Long live Forminator!**<\/p>\n<p>In this post, I\u2019ll show you step-by-step how to use Forminator to build an order form from scratch and have it set up to collect payments effortlessly with Stripe and\/or PayPal.<\/p>\n<ul>\n<li><a href=\"#introducing\">Introducing the Fantastic Forminator<\/a><\/li>\n<li><a href=\"#build\">Let\u2019s Build an Order Form<\/a>\n<ul>\n<li><a href=\"#step-1\">Step 1: Install Forminator<\/a><\/li>\n<li><a href=\"#step-2\">Step 2: Access the Forminator Dashboard<\/a><\/li>\n<li><a href=\"#step-3\">Step 3: Let\u2019s Create a Form<\/a><\/li>\n<li><a href=\"#step-4\">Step 4: Adding the Order Form Fields<\/a><\/li>\n<li><a href=\"#step-5\">Step 5: Adding the Stripe Payment Button and Integration<\/a><\/li>\n<li><a href=\"#step-6\">Step 6: Let\u2019s Jazz It Up<\/a><\/li>\n<li><a href=\"#step-7\">Step 7: Form Submitted. What Next?<\/a><\/li>\n<li><a href=\"#step-8\">Step 8: Email Me Please, and to the User Too<\/a><\/li>\n<li><a href=\"#step-9\">Step 9: Hit the Publish Button<\/a><\/li>\n<li><a href=\"#step-10\">Step 10: Add the Order Form to Your Sales Page<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#reach-engage-convert\">Reach &gt; Engage &gt; Convert<\/a><\/li>\n<\/ul>\n<h2 id=\"introducing\">Introducing the Fantastic Forminator<\/h2>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" target=\"_blank\">Forminator<\/a> is a powerhouse of a form plugin. He supports conditional logic, stores all the form entries in an easily accessible database, sends emails to both the user and the admin, and does it all without reloading the page.<\/p>\n<p>To supercharge your forms, Forminator integrates with popular third-party tools such as <a href=\"https:\/\/mailchimp.com\/\" target=\"_blank\">Mailchimp<\/a>, <a href=\"https:\/\/www.aweber.com\/\" target=\"_blank\">AWeber<\/a>, <a href=\"https:\/\/www.activecampaign.com\/\" target=\"_blank\">ActiveCampaign<\/a>, <a href=\"https:\/\/www.example.com\/sheets\/about\/\" target=\"_blank\">Google Sheets<\/a>, <a href=\"https:\/\/zapier.com\/\" target=\"_blank\">Zapier<\/a>, and <a href=\"https:\/\/slack.com\/\" target=\"_blank\">Slack<\/a>. Here\u2019s an <a href=\"https:\/\/wpmu-dev.pro\/blog\/zapier-wordpress-form-integrations\/\" target=\"_blank\">integration guide to automate your form workflow with Zapier<\/a>.<\/p>\n<p>He\u2019s also <a href=\"https:\/\/wpmu-dev.pro\/blog\/web-privacy-wordpress-gdpr-compliance\/\" target=\"_blank\" rel=\"noopener\">GDPR compliant<\/a> and works seamlessly with WordPress\u2019 new Gutenberg block editor. If you can think of a form, Forminator can almost certainly get it done.<\/p>\n<h2 id=\"build\">Let\u2019s Build an Order Form<\/h2>\n<p>For this demo, we\u2019ll build a simple order form, like the one below, to sell a custom notebook. We\u2019ll make it so that the users can enter their personal information (such as name, address, email and phone number), and then at the very end, place an order by completing the payment.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Simple-Order-Form-Full.jpg\" alt=\"Screenshot of the order form we'll be building\" width=\"516\" height=\"600\" \/> <\/div>\n<p>Follow the steps below and\/or enjoy the video we&#8217;ve put together to accompany this post:<\/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<h3 id=\"step-1\">Step 1: Install Forminator<\/h3>\n<p>To install Forminator, just go to your WordPress Dashboard, and under <em>Plugins<\/em>, choose <em>Add New<\/em> and search for <em>Forminator<\/em>. Click the <em>Install Now<\/em> button and <em>Activate<\/em> the plugin after installation.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Installing-Forminator-WP-Plugins-Repo.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"370\" \/> <\/div>\n<p>If you\u2019re a WPMU DEV Member, you can also install and activate <a href=\"https:\/\/wpmu-dev.pro\/project\/forminator-pro\/?icn=wordpress_order_form&amp;ici=text_link_forminator_pro\" target=\"_blank\">Forminator Pro<\/a> directly from the WPMU DEV Dashboard. If you\u2019re not a member yet, what are you waiting for? Try it 100% risk-free with one of our <a href=\"https:\/\/wpmu-dev.pro\/pricing\/\" target=\"_blank\" rel=\"noopener\">paid membership plans<\/a>!<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Installing-Forminator-WPMU-Dashboard.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/> <\/div>\n<p>Using the free WordPress.org version of Forminator is totally cool too. This tutorial works perfectly fine with either version.<\/p>\n<h3 id=\"step-2\">Step 2: Access the Forminator Dashboard<\/h3>\n<p>Go to Forminator\u2019s Dashboard. This will give you a quick overview of all your forms, quizzes, and polls.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/The-Forminator-Dashboard-WPMU-DEV.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/><figcaption class=\"wp-caption-text\">Forminator\u2019s minimalist yet easy-to-use Dashboard.<\/figcaption><\/figure>\n<\/div>\n<p>You won\u2019t see any data here now, but as you start creating forms and collecting user entries, the dashboard will start populating with views, submissions, conversion rates, and other interesting data.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Forminator-Dashboard-with-Stats.png\" alt=\"Post image\" aria-hidden=\"true\" width=\"512\" height=\"207\" \/> <\/div>\n<h3 id=\"step-3\">Step 3: Let\u2019s Create a Form<\/h3>\n<p>Go to <em>Forminator &gt; Forms<\/em> and click either of the blue <em>Create<\/em> buttons to begin making your new form. You can also do the same directly from Forminator\u2019s dashboard.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Creating-Forms-in-Forminator.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/> <\/div>\n<p>A popup will appear where you need to enter your new form\u2019s name. Keep the form name unique and memorable so that you can recall it easily. Click the blue <em>Create<\/em> button after entering your form name.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Enter-Form-Name.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/> <\/div>\n<p>By default, every form in Forminator comes with the following predefined fields: <em>First\u00a0Name<\/em>, <em>Email Address<\/em>, <em>Phone Number<\/em>, and <em>Message<\/em>.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Default-Form-Fields.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"346\" \/> <\/div>\n<p>The default form fields can be edited or deleted, and with the option of adding many other fields, you have unlimited customization possibilities.<\/p>\n<p><strong>Note:<\/strong> The fields marked with a red asterisk (<span style=\"color: #ff0000;\">*<\/span>) at the end are <em>Required<\/em> fields. The form won\u2019t submit until the user fills them up.<\/p>\n<h3 id=\"step-4\">Step 4: Adding the Order Form Fields<\/h3>\n<p>We\u2019ll keep the <em>First\u00a0Name<\/em>, <em>Email Address<\/em> and <em>Phone Number<\/em> fields, and delete the <em>Message<\/em> field which we don\u2019t need for this form.<\/p>\n<p>In the <em>First Name<\/em> field, click on the gear icon and select <em>Duplicate<\/em>. This is a faster way to insert multiple fields of the same type without accessing the <em>Insert Fields<\/em> menu repeatedly.<\/p>\n<p>Rename the duplicated field as <em>Last Name<\/em>.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Duplicating-First-Name-Field.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/> <\/div>\n<p>Drag the <em>Last Name<\/em> field to the same row as the <em>First Name<\/em>, to its right, so that they appear side by side in the form.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Dragging-Last-Name-to-First-Row.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"306\" \/> <\/div>\n<p>And just like that, you have a two-column row in your form.<\/p>\n<p>All Forminator fields can be dragged and dropped into rows and columns, so you have maximum flexibility in designing your forms just the way you want them.<\/p>\n<p>Next, click on the purple <em>Insert Fields<\/em> button. It should open a popup with all the field options you can add to the form. There\u2019s also another <em>Insert Fields<\/em> link at the bottom of the form.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Inserting-New-Fields.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"151\" \/> <\/div>\n<p>Select the <em>Address<\/em> option from the popup window, and click the <em>Insert Fields<\/em> button.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Insertt-Address-Field.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"410\" \/> <\/div>\n<p>Once inserted, click on the <em>Address<\/em> row to open its field settings. In the <em>Labels<\/em> tab, you can activate or deactivate the different address subfields (they\u2019re all enabled by default).<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Address-Field-Options.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"378\" \/> <\/div>\n<p>Underneath the <em>Settings<\/em> tab, mark all the address subfields as required since they\u2019re essential to ship the product.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Mark-Address-Subfields-as-Required.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"410\" \/> <\/div>\n<p>Finally, click on the gear icon of <em>Message<\/em> field and hit <em>Delete<\/em>.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Delete-the-Message-area-field.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"151\" \/> <\/div>\n<p>You can retain the <em>Message<\/em> field if you want to give users an option to add a comment or preference.<\/p>\n<h3 id=\"step-5\">Step 5: Adding the Stripe Payment Button and Integration<\/h3>\n<p>Click on the purple <em>Insert Fields<\/em> button and select the <em>Stripe<\/em> option.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Add-Stripe-Field.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"396\" \/> <\/div>\n<p>Stripe enables you to supercharge your online sales with its hassle-free and secure payment gateway.<\/p>\n<p><strong>Note:<\/strong> You need an activated Stripe account to configure the Stripe field. Otherwise, it won\u2019t let you edit it. If you need help to set it up, use <a href=\"https:\/\/wpmu-dev.pro\/docs\/wpmu-dev-plugins\/forminator\/\" target=\"_blank\">Forminator\u2019s documentation<\/a> as a cheatsheet.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Stripe-Error.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"182\" \/> <\/div>\n<p>You can configure <em>Stripe<\/em> by going to <em>Settings &gt; Payments &gt; Stripe<\/em> under <em>Forminator<\/em>.<\/p>\n<p>Once Stripe is configured, under the <em>Stripe<\/em> field settings, we need to set the payment amount. Since this is a single product with an all-inclusive price and no variations, we\u2019ll select the <em>Fixed<\/em> payment option.<\/p>\n<p>When user inputs affect the price (ex. different sized t-shirts or customization options), or if there is a calculation such as tax or shipping that will be added to the original price, the <em>Variable<\/em> option should be used instead.<\/p>\n<p>Select <em>Fixed<\/em> in the <em>Stripe<\/em> field settings and enter the amount.<\/p>\n<p>Also, note the <em>Test<\/em> and <em>Live<\/em> mode options mentioned on the top here. We\u2019ll be using the <em>Test<\/em> mode for now.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Stripe-Fixed-Payment-Settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"408\" \/> <\/div>\n<p>From the <strong>Advanced<\/strong> tab, you can add advance settings, such as a payment receipt, payment details, billing details, and meta data.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/advanced.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/advanced.mp4\" type=\"video\/mp4\"><\/video>\n<p>Next, change the <em>Submit<\/em> button label from <em>Send Message<\/em> to <em>Order Now<\/em>.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Order-Now.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"193\" \/> <\/div>\n<p>Preview the form and ensure it\u2019s working as you intend. You can edit the default placeholders in the form if they\u2019re not to your liking.<\/p>\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Preview-the-Form.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"523\" height=\"600\" \/><figcaption class=\"wp-caption-text\">The order form is good to go!<\/figcaption><\/figure>\n<div  class=\"wpdui-pic-regular  \"> <\/div>\n<p><strong>Note:<\/strong> You can also setup PayPal using the same method described above. Just insert the <em>PayPal<\/em> field instead of <em>Stripe<\/em>. However, you cannot insert both the fields. As of now, you can only use one payment gateway in a form.<\/p>\n<h3 id=\"step-6\">Step 6: Let\u2019s Jazz It Up<\/h3>\n<p>Forminator lets you make basic style changes to the form easily. The <em>Appearance<\/em> section helps you set your form\u2019s <em>Design Style<\/em>, <em>Colors<\/em>, <em>Fonts<\/em>, <em>Padding<\/em>, <em>Borders<\/em>, <em>Spacing<\/em>, etc.<\/p>\n<p>Click on the <em>Appearance<\/em> button to move on to its settings.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Appearance-Settings-Button.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"244\" \/> <\/div>\n<p>You can choose your preferred style here. I like the look of the <em>Flat<\/em> style more than the <em>Default<\/em> one, however this choice is up to you. It also offers you a way to add <em>Custom CSS<\/em> for your form.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Appearance-Form-Design-Style.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"340\" \/> <\/div>\n<p>As for the <em>Colors<\/em> and <em>Fonts<\/em>, I prefer the theme defaults and will leave them as is. Save your form draft after making your changes.<\/p>\n<h3 id=\"step-7\">Step 7: Form Submitted. What Next?<\/h3>\n<p>Forminator is like a cool and casual professor. He\u2019s fun and intelligent, but he also makes sure that the forms behave properly.<\/p>\n<p>In the <em>Behavior<\/em> settings, you can define how the form will behave after the user successfully submits the form, or in this case, places an order.<\/p>\n<p>By default, the form will show an inline message that will close automatically within 5 seconds. Change the message here to better reflect an order form.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Behaviour-Settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"344\" \/> <\/div>\n<p>You also have the option of redirecting the user to a new page or hiding the form altogether.<\/p>\n<p>If you\u2019re collecting payments, it\u2019s highly recommended that you have the \u201c<em>Require SSL certificate to submit this form<\/em>\u201d option checked. It\u2019ll enable your form to collect payments securely.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Payments-SSL.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"129\" \/> <\/div>\n<p>The rest of the <em>Behavior<\/em> settings can be left as is.<\/p>\n<h3 id=\"step-8\">Step 8: Email Me Please, and to the User Too<\/h3>\n<p>After finishing up with setting the <em>Behavior<\/em>, move to the <em>Email Notifications<\/em> settings.<\/p>\n<p>By default, every form will send you (the admin) an email with details of all the form fields entered.<\/p>\n<p>You can change it and\/or add multiple recipients too. You also have the option of adding <em>Cc<\/em> and <em>Bcc<\/em> fields to the email.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Email-Notifications-Settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"285\" \/> <\/div>\n<p>It\u2019s good practice to send an automatic order confirmation email to the user. This option can be enabled in the <em>Email Notifications<\/em> settings.<\/p>\n<p>Make sure that the recipient here is set to <em>Email Address<\/em>, which is the label for the email address entered by a user in the form. For example, if a user enters <em>username@gmail.com<\/em> as their email address in the form, the order confirmation email will be sent to that address automatically.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/User-Confirmation-Email.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"257\" \/> <\/div>\n<p>Forminator also lets you set <em>Integrations<\/em> with various third-party apps, and change the overall form settings. For this order form, we won\u2019t be adding any <em>Integrations<\/em>, and will stick to the default settings.<\/p>\n<h3 id=\"step-9\">Step 9: Hit the Publish Button<\/h3>\n<p>Preview the form one last time before pressing the <em>Publish<\/em> button.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Publish-It.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"253\" \/> <\/div>\n<p>Hey, give yourself a pat on the back. You just created your first order form!<\/p>\n<p>After hitting the <em>Publish<\/em> button, a popup will present you with the form\u2019s shortcode. Copy and place this shortcode anywhere in your site to display it to users.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Copy-the-Shortcode.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"341\" \/> <\/div>\n<p>You can also copy the shortcode later from Forminator\u2019s Dashboard.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Forminator-Shortcode-from-Dashboard.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"202\" \/> <\/div>\n<h3 id=\"step-10\">Step 10: Add the Order Form to Your Sales Page<\/h3>\n<p>Create a sales page if you don\u2019t have one yet. It should contain all the important product details such as name, image, description, price, etc.<\/p>\n<p>If you\u2019re using the Classic Editor plugin, you can copy and paste the shortcode to add the form to your post\/page. For sites that are using the default Block Editor, adding a form is much simpler.<\/p>\n<p>To place the order form at the bottom of your sales page, in your WordPress post\/page editor, click the <em>Plus<\/em> icon and add a <em>Form<\/em> block.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Add-the-Form-block.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"299\" \/> <\/div>\n<p>Next, select your order form from here to add it to the page.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Select-the-form-you-want-to-add.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"155\" \/> <\/div>\n<p><em>Publish<\/em> or <em>Update<\/em> your sales page after you\u2019ve added the order form to it.<\/p>\n<p>Visitors to your website can now use this form to place an order. It\u2019s that simple!<\/p>\n<p><strong>Important Note:<\/strong> The <em>Stripe<\/em> field in your order form is still set to <em>Test<\/em> mode. This is to help you make test payments and make sure that everything is working fine. Before accepting actual orders, you need to change it from <em>Test<\/em> to <em>Live<\/em>.<\/p>\n<p>Once an order has been placed, you\u2019ll be notified of it via mail. Forminator also stores all the form submissions in a database so that it\u2019s easier for you to sort through them later.<\/p>\n<p>To view all of a form\u2019s submissions, visit <em>Forminator &gt; Forms<\/em> in your dashboard. Click on the gear icon and select <em>View Submissions<\/em>.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/View-Submissions.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"202\" \/> <\/div>\n<p>You can click on any individual submission row to get its complete details. You can also push the <em>Export<\/em> button to download all the submissions as a .csv file.<\/p>\n<div  class=\"wpdui-pic-regular  \"> <img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmu-dev.pro\/blog\/wp-content\/uploads\/2019\/07\/Submissions.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"600\" height=\"293\" \/> <\/div>\n<h2 id=\"reach-engage-convert\">Reach &gt; Engage &gt; Convert<\/h2>\n<p>Running an online business comes with a lot of challenges. Anything that helps you engage with your potential customers and get paid easier is a welcome addition, and that\u2019s exactly what Forminator does.<\/p>\n<p>What we\u2019ve built here is the simplest of order forms that you can make with Forminator. With its support for conditional logic, it can do much more!<\/p>\n<p>You can set taxes, shipping rates, product variations, and then have the form calculate the final order amount automatically.<\/p>\n<p>Ready for next-level form creating? <a href=\"https:\/\/wpmu-dev.pro\/blog\/create-free-payment-forms-with-forminator\/\" target=\"_blank\" rel=\"noopener\">Learn more here<\/a>.<\/p>\n<p>Start creating!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You lose 100% of the sales you don\u2019t ask for, and the same holds true for having a clunky checkout experience. Order forms help you to collect order information and process payments efficiently, thereby increasing your conversion rates significantly. Forminator makes it easier than ever to build an order form and accept payments on WordPress. [&hellip;]<\/p>\n","protected":false},"author":761786,"featured_media":176477,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"10","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260],"tags":[537,11003,10983,10507,11002,2167],"tutorials_categories":[],"class_list":["post-176705","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","tag-paypal","tag-stripe","tag-forminator","tag-forms","tag-order-forms","tag-payment-gateways"],"_links":{"self":[{"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/posts\/176705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/users\/761786"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/comments?post=176705"}],"version-history":[{"count":33,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/posts\/176705\/revisions"}],"predecessor-version":[{"id":218408,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/posts\/176705\/revisions\/218408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/media\/176477"}],"wp:attachment":[{"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/media?parent=176705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/categories?post=176705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/tags?post=176705"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmu-dev.pro\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=176705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}