{"id":3132,"date":"2021-02-11T12:46:59","date_gmt":"2021-02-11T12:46:59","guid":{"rendered":"https:\/\/www.arformsplugin.com\/?p=3132"},"modified":"2021-02-18T13:06:12","modified_gmt":"2021-02-18T13:06:12","slug":"wordpress-payment-form-with-calculation","status":"publish","type":"post","link":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/","title":{"rendered":"Easy Ways to Create a WordPress Payment Form with Calculation"},"content":{"rendered":"Selling items on your WordPress website can be cumbersome at times. You won&#8217;t be able to simply do that through your WordPress website by default!\r\n\r\nIf your business is to sell online products through your WordPress website, then you need to streamline an easy way to accept payments online securely and effortlessly to your customers.\r\n\r\nThat being said, you would need to offer multiple products or services options from your WordPress website with the means of your online WordPress forms.  \r\n\r\nLuckily, you can do so with the utilization of the best WordPress form builder plugin!\r\n\r\nThanks to the ARForms WordPress form builder plugin, a one of its kind ultimate plugin that offers an awesome set of highly advanced level features to help you build not just contact forms, but rather can accept the payments through WordPress forms for various purpose.   \r\n\r\nThat is, you can accept payments for your products or services, events, or even charge the registration fee depending on the user&#8217;s selection.\r\n\r\nNow, creating a WordPress payment form is one thing, but if you want to showcase a WordPress payment form that can perform a mathematical calculation, then it is possible with the ARForms WordPress form builder plugin.\r\n\r\nAs with the <a href=\"https:\/\/www.arformsplugin.com\/\" rel=\"noopener\" target=\"_blank\">ARForms WordPress form builder plugin<\/a>, your visitors can be able to get the seamless shopping experience for multiple products to shop for your multiple products right away!\r\n\r\nHere in this article, we will take you to the step-by-step guide that will help you to create and build a WordPress form that can let you accept the payments at the same time.\r\n\r\nWe will take you to the guided methods to create a WordPress payment form with calculation.\r\n\r\n<strong>Methods to Create the WordPress Payment Forms that can handle the transactions <\/strong>\r\n\r\nWe will exactly show you the usage of the ARForms WordPress form builder plugin:\r\n\r\nHere are the steps to look for creating a WordPress payment form with ARForms WordPress form builder plugin:\r\n\r\n<strong>Method 1: Creating the WordPress online order form from Scratch<\/strong>\r\n\r\nWell, when you install and activate the ARForms WordPress form builder plugin, you can then navigate to the <strong>ARForms> Add New Form<\/strong> directly from your WordPress dashboard.\r\n \r\nYou will be able to see the new window that popup with the options of <strong>Blank Form, Templates,<\/strong> and <strong>Sample Forms<\/strong>.\r\n \r\nThe first option of <strong>a Blank Form<\/strong> can be selected if you want to create and build a WordPress payment form from the scratch itself.\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Blank-Form-Payment-Form-min.png\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Blank-Form-Payment-Form-min.png\" alt=\"WordPress Payment Form with Calculation - Blank Form Payment Form-min\" width=\"822\" height=\"419\" class=\"aligncenter size-full wp-image-2814\" \/><\/a>\r\nIf you ought to create a payment form by choosing the blank form, then you got to consider adding all the fields from the beginning. \r\n\r\nHere are the fields you need to consider while you are creating and building a payment form:\r\n\r\n<strong>Inserting Fields for your product options.<\/strong>\r\n\r\nFirst off, you would need to include the following fields into your Order online form:\r\n<ul>\r\n\t<li>Customer Information like (First Name, Last Name, Email, Phone number)<\/li>\r\n\t<li>Single Checkbox<\/li>\r\n\t<li>Checkboxes List (Adding the images in the checkboxes)<\/li>\r\n\t<li>Drop Down Menu<\/li>\r\n\t<li><a href=\"https:\/\/www.calculator.net\/math-calculator.html\" rel=\"noopener\" target=\"_blank\">Math Calculations<\/a><\/li>\r\n\t<li>Billing Details<\/li>\r\n<\/ul>The above mentioned are the essential fields that you would require while creating a WordPress payment form with calculations.\r\n\r\nAt last, you would require to configure your WordPress payment form with the popular payment gateways. Well, the ARForms WordPress form builder plugin offers popular payment methods like Authorize.Net, PayPal, Stripe, and more.\r\n\r\nWe will dive deeper into it in our next step of choosing a WordPress payment form with calculation with Templates option in ARForms. \r\n\r\n<strong>Method 2: Selecting a WordPress Payment Form with the calculation for ARForms Pre-Built Templates<\/strong>\r\n\r\nThis is the option that you will see next to the Blank form option when you go to <strong>ARForms> Add New Form<\/strong>. You can simply select the pre-defined Order Form from <strong>Templates<\/strong> that will display you the pre-made payment form in a hassle-free manner.\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Templates-Order-Form.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Templates-Order-Form.gif\" alt=\"WordPress Payment Form with Calculation - Templates Order Form\" width=\"817\" height=\"551\" class=\"aligncenter size-full wp-image-2815\" \/><\/a>\r\nThis is how the payment form appears when you select the Order form from the Templates. \r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Order-Form-Long-and-Lengthy.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Order-Form-Long-and-Lengthy.gif\" alt=\"Order Form - Long and Lengthy\" width=\"1000\" height=\"514\" class=\"aligncenter size-full wp-image-2816\" \/><\/a>\r\n\r\nWell, you might be thinking that this is quite a bit long and lengthy form to look at, right? But, the beauty of the ARForms WordPress form builder plugin is such that, you can easily split up the long and lengthy form in a <strong>Multi-step form<\/strong>. \r\n\r\nIf you are wondering how to do that? Then it is simply done with the use of the <strong>Page Break<\/strong> option that you can find in the <strong>Other fields<\/strong> option on the left-hand side of the ARForms form editor.\r\n\r\nLet&#8217;s have a glance at the below image to check how to add the \u201cPage Break field option: \r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Page-Break-Option.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Page-Break-Option.gif\" alt=\"WordPress Payment Form with Calculation - Page Break Option\" width=\"1000\" height=\"458\" class=\"aligncenter size-full wp-image-2817\" \/><\/a>\r\n\r\nFinally, when the payment form goes live on your WordPress website, then the payment form will appear as the multi-step form and not a long lengthy form. \r\n\r\nHave a look at the image below to see how the payment form is displayed live:\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Payment-form-Live.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Payment-form-Live.gif\" alt=\"WordPress Payment Form with Calculation - Payment form Live\" width=\"753\" height=\"491\" class=\"aligncenter size-full wp-image-2818\" \/><\/a>\r\nDid you notice the grand total part of the select product step? There, you can see that the first product cost is $10, the second one costs $20, and $30 for the third product. Hence, when we select 1 quantity for all 3 products, the payment form automatically gives the grand total of $60.\r\n\r\nThat is done by utilizing the HTML Field option by activating the Enable Running Total toggle option.\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Running-Total-in-ARForms.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Running-Total-in-ARForms.gif\" alt=\"Running Total in ARForms\" width=\"782\" height=\"447\" class=\"aligncenter size-full wp-image-2819\" \/><\/a>\r\nWhile you apply the payment form from the ARForms templates, if you further want more customization and want to personalize with some more styling options, then you do not need to worry as you can easily apply various <strong>style options<\/strong>, even if you want to make your payment form more appealing then you can make use of the <strong>Custom CSS<\/strong> option as well.\r\n\r\nCheck the image below for the same:\r\n \r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Style-Option-and-Custom-CSS-min.png\" style=\"display:inline-block;position:relative;left:50%;transform:translateX(-50%);\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Style-Option-and-Custom-CSS-min.png\" alt=\"Style Option and Custom CSS-min\" style=\"width:auto;\" width=\"284\" height=\"548\" class=\"aligncenter size-full wp-image-2820\" \/><\/a>\r\nFurther, we will dive you into configuring your WordPress payment form with the payment method. Say, for instance, you need to configure your created Payment WordPress form with PayPal Configuration.\r\n\r\nFor that, you need to navigate to <strong>ARForms> PayPal Configuration<\/strong>. You will be directed to the new window of <strong>PayPal Configuration<\/strong>. \r\n \r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/PayPal-Configuration-min.png\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/PayPal-Configuration-min-1024x530.png\" alt=\"PayPal Configuration-min\" width=\"1024\" height=\"530\" class=\"aligncenter size-large wp-image-2821\" \/><\/a>\r\nYou need to click on the Configure New Form option that will drive you to the new screen to easily select your WordPress payment form and configure it with PayPal.\r\n\r\nYou will see a lot more options on the PayPal configuration screen.\r\n\r\nIf you want to know more about the PayPal Configuration with ARForms, then read our documentation of <a href=\"https:\/\/www.arformsplugin.com\/documentation\/paypal\/\" rel=\"noopener\" target=\"_blank\">ARForms PayPal integration<\/a>.\r\n\r\n<strong>Method 3: Choose the WordPress Payment Form from Sample Forms<\/strong>\r\n\r\nAt last, if the above-given WordPress payment form doesn&#8217;t fit your Payment form requirements, then you can take a step ahead and select the WordPress <strong>Order form<\/strong> that can be found under the <strong>ARForms> Add New Form> Sample Forms<\/strong>.\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Sample-Form-Order-Form-min.png\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Sample-Form-Order-Form-min.png\" alt=\"Sample Form - Order Form-min\" width=\"816\" height=\"559\" class=\"aligncenter size-full wp-image-2822\" \/><\/a>\r\nThis is the kind of WordPress order form that is suitable if you want to show multiple products.\r\n\r\nThe pre-built sample WordPress order form in ARForms shows the different variants of the shirts with different colors and sizes. \r\n\r\nSo, whenever a customer chooses a single or multiple shirts (filling the quantity) from the WordPress order form, they will automatically get the total amount \r\n\r\nHave a look at the image below that shows the WordPress order form with multiple product selections (by selecting the size, color picking option, total quantity with total amount)\r\n\r\n<a href=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Sample-Order-Form-product-select.gif\"><img decoding=\"async\" src=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Sample-Order-Form-product-select.gif\" alt=\"Sample Order Form product select\" width=\"750\" height=\"487\" class=\"aligncenter size-full wp-image-2823\" \/><\/a>\r\n\r\nWell, all the above order form things are made possible with the below fields:\r\n<ul>\r\n\t<li>Dropdown field<\/li>\r\n\t<li>Checkboxes field (it allows to add the images)<\/li>\r\n\t<li>Math calculation (for running total based on the selected quantity of the product)<\/li>\r\n<\/ul>Back and forth, you can see the basic order form details like customers information fields (first name, last name, email, phone number, and shipping details as well.\r\n\r\nAnd just in case, if you want to make use of the ARForms WordPress payment forms with popular page builders like WPBakery Page Builder, Cornerstone, and Elementor, then ARForms WordPress form builder plugin has got that covered for that as you can find the native blocks for that!\r\n\r\n<strong>Over to you<\/strong>\r\n\r\nFinally, you can use the ARForms WordPress form builder plugin premium feature like math calculations to create a WordPress payment form like a Pro. Further, you need to ensure the payment method integration like PayPal, Stripe, and more to start making money by selling your multiple products\/services utilizing the ARForms WordPress form builder plugin.\r\n\r\nHave you found this post a good read? Do share it on social media channels to show us your support!","protected":false},"excerpt":{"rendered":"<p>Selling items on your WordPress website can be cumbersome at times. You won&#8217;t be able to simply do that through your WordPress website by default! If your business is to sell online products through your WordPress website, then you need to streamline an easy way to accept payments online securely and effortlessly to your customers. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3144,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Easy Ways to Create a WordPress Payment Form with Calculation<\/title>\n<meta name=\"description\" content=\"Need to create an order form that accepts payment with the calculation? Here are the ways to create a WordPress payment form with calculation\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easy Ways to Create a WordPress Payment Form with Calculation\" \/>\n<meta property=\"og:description\" content=\"Need to create an order form that accepts payment with the calculation? Here are the ways to create a WordPress payment form with calculation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/\" \/>\n<meta property=\"og:site_name\" content=\"Best WordPress Form Builder Plugin - ARForms\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-11T12:46:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-18T13:06:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-600X314.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"314\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Brian Denim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Denim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easy Ways to Create a WordPress Payment Form with Calculation","description":"Need to create an order form that accepts payment with the calculation? Here are the ways to create a WordPress payment form with calculation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/","og_locale":"en_US","og_type":"article","og_title":"Easy Ways to Create a WordPress Payment Form with Calculation","og_description":"Need to create an order form that accepts payment with the calculation? Here are the ways to create a WordPress payment form with calculation","og_url":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/","og_site_name":"Best WordPress Form Builder Plugin - ARForms","article_published_time":"2021-02-11T12:46:59+00:00","article_modified_time":"2021-02-18T13:06:12+00:00","og_image":[{"width":600,"height":314,"url":"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-600X314.gif","type":"image\/gif"}],"author":"Brian Denim","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Brian Denim","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#article","isPartOf":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/"},"author":{"name":"Brian Denim","@id":"https:\/\/www.arformsplugin.com\/#\/schema\/person\/af3e673eb01a202b365acc07d6e091ed"},"headline":"Easy Ways to Create a WordPress Payment Form with Calculation","datePublished":"2021-02-11T12:46:59+00:00","dateModified":"2021-02-18T13:06:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/"},"wordCount":1382,"image":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-750X350.gif","inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/","url":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/","name":"Easy Ways to Create a WordPress Payment Form with Calculation","isPartOf":{"@id":"https:\/\/www.arformsplugin.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#primaryimage"},"image":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-750X350.gif","datePublished":"2021-02-11T12:46:59+00:00","dateModified":"2021-02-18T13:06:12+00:00","author":{"@id":"https:\/\/www.arformsplugin.com\/#\/schema\/person\/af3e673eb01a202b365acc07d6e091ed"},"description":"Need to create an order form that accepts payment with the calculation? Here are the ways to create a WordPress payment form with calculation","breadcrumb":{"@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#primaryimage","url":"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-750X350.gif","contentUrl":"https:\/\/www.arformsplugin.com\/wp-content\/uploads\/2021\/02\/Create-a-WordPress-Payment-Form-with-Calculation-750X350.gif","width":750,"height":350,"caption":"WordPress Payment Form with Calculation"},{"@type":"BreadcrumbList","@id":"https:\/\/www.arformsplugin.com\/wordpress-payment-form-with-calculation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.arformsplugin.com\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/www.arformsplugin.com\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"Easy Ways to Create a WordPress Payment Form with Calculation"}]},{"@type":"WebSite","@id":"https:\/\/www.arformsplugin.com\/#website","url":"https:\/\/www.arformsplugin.com\/","name":"Best WordPress Form Builder Plugin - ARForms","description":"Best WordPress Form Builder Plugin - ARForms","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.arformsplugin.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.arformsplugin.com\/#\/schema\/person\/af3e673eb01a202b365acc07d6e091ed","name":"Brian Denim","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62d90f493368a291254091af92b43992bcc1d34d239ed14b98a41e188064d2a3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/62d90f493368a291254091af92b43992bcc1d34d239ed14b98a41e188064d2a3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62d90f493368a291254091af92b43992bcc1d34d239ed14b98a41e188064d2a3?s=96&d=mm&r=g","caption":"Brian Denim"}}]}},"_links":{"self":[{"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/posts\/3132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/comments?post=3132"}],"version-history":[{"count":0,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/posts\/3132\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/media\/3144"}],"wp:attachment":[{"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/media?parent=3132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/categories?post=3132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.arformsplugin.com\/wp-json\/wp\/v2\/tags?post=3132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}