Many times, installing and customizing a shopping cart for your WordPress website can be an unnecessary hassle. This is especially true if you’re a small business or just starting out with your blog and want to set up your online shop later.<\/p>\n\n\n\n
That’s where Gravity Forms comes into play. Gravity Forms helps you create a WordPress payment form where shoppers can choose products or services and make a payment right through the form. This is all without the need for WooCommerce or another ecommerce platform.<\/p>\n\n\n\n
In this post, you’ll learn step-by-step how to create your own online payment form<\/a> with WordPress and Gravity Forms.<\/p>\n\n\n\n But first, why a WordPress payment form<\/a>? \ud83e\udd14 Let’s talk about the benefits in more detail…<\/p>\n<\/div>\n\n\n\n Forms are one of the most versatile online tools. Actually, a form might be the simplest way to sell your products or services online.<\/p>\n\n\n\n Payment forms have two main tasks:<\/p>\n\n\n\n If you want to create a WordPress payment form, using a dedicated form plugin makes a lot of sense because…<\/p>\n\n\n\n If you just want a contact form on your website, so that users can easily get in touch with you, there’s a wide range of contact form plugin choices.<\/p>\n\n\n\n However, when it comes to payments, if we were to recommend an online form builder plugin for WordPress, we would suggest you choose Gravity Forms.<\/a> We have successfully used it in the implementation of one of our projects, Askademic.com<\/a> – an online platform that connects teachers to students and focuses on helping students with their homework.<\/p>\n\n\n\n So, the way we’ve done it was that for the homework request form, we have customized the Gravity Forms plugin. The same tool was also used for online payment integration along with WooCommerce add-ons for Stripe and Paypal payment systems.<\/p>\n\n\n\n If you want to learn more about this case study, you can check it out here<\/a>.<\/p>\n\n\n With Gravity Forms and the right payment gateway<\/a>, you can create a simple WordPress payment form to process your own transactions online. Gravity Forms integrates with some of the most popular payment processors on the web and it supports their integration via its webhooks<\/a> and API.<\/p>\n\n\n\n Here are the main payment gateways\/add-ons you can choose from:<\/p>\n\n\n\n If you want an in-depth comparison of the top payment gateways, check out this article<\/a>.<\/p>\n\n\n\n Once you decide which add-on works best for your business needs, the next step is to set it up. \ud83d\udc47<\/p>\n\n\n Once you’ve chosen your payment processor, you should follow the following steps to set up your payment gateway:<\/p>\n\n\n\n You can read the Getting Started Guide<\/a> if you need help with Gravity Forms or our guide to installing WordPress plugins<\/a>.<\/p>\n\n\n Gravity Forms has extensive and useful documentation<\/a> that can help you with the setting up process of the payment add-on you selected.<\/p>\n\n\n\n You can install add-ons just like you would any other WordPress plugin.<\/p>\n\n\n You can do this by clicking New Form<\/strong> under Forms<\/strong> on the left side of your dashboard.<\/p>\n\n\n\n When it comes to best practices to create a successful payment form, here are a few Gravity Forms approved tips that will help you out:<\/p>\n\n\n\n You can show the customer how many steps are left until the check out right within the form.<\/p>\n\n\n\n You can find out more tips for high converting payment forms here (PDF)<\/a>.<\/p>\n\n\n The main form fields that you must add are contact fields including…<\/p>\n\n\n\n You’ll also need product fields to control what items people can purchase and how much each item costs.<\/p>\n\n\n\n To set this up, you can use the Option<\/strong> and Quantity<\/strong> fields to add more information about the products and their prices.<\/p>\n\n\n\n Finally, to process payments and shipping (for physical products<\/em>), you’ll want to use these three fields:<\/p>\n\n\n\n A “feed” lets you connect your WordPress payment form to the payment processor so that you can process payments. This is the payment processor you chose in Step #2<\/em>.<\/p>\n\n\n\n You can set up a feed by hovering over Settings and clicking on your add-on. Here<\/a>‘s an example for setting up a feed for the PayPal Payments add-on that will help you out.<\/p>\n\n\n There are various ways of adding a form to your WordPress page and you can check them out here<\/a>. Also, in order to make sure that the form works when your customers access it, you can complete a transaction with it by making a purchase with a credit card, basically from yourself.<\/p>\n\n\n\n In the end, it should look like this:<\/p>\n\n\n Now, let’s have a look at how you can apply all of the above practically speaking. \ud83d\udc47<\/p>\n\n\n In the case of Askademic<\/a>, the e-learning platform we have mentioned before, we have integrated Stripe Connect<\/a> with Gravity Forms. What this platform does is to enable students to contract teachers who can help them with their homework.<\/p>\n\n\n\n Based on the service type (academic writing, creative writing, etc.), the deadline date, the academic level (high school, college, etc.), and on the number of pages in the homework, the WordPress payment form automatically calculates the project pricing. The tighter the deadline, the higher the price.<\/p>\n\n\n And here’s how the payment process on Askademic works:<\/p>\n\n\n\n The payment can be made via PayPal as well, but in this case, the full amount will be paid to Askademic’s Paypal account. Then the sum of money will be manually split by the Askademic admins. Formerly, Paypal used to offer PayPal adaptive payments, however, this service is not available anymore to new businesses.<\/p>\n\n\n Gravity Forms can be a great alternative for small businesses that don’t want to implement a full ecommerce solution<\/a> for their website.<\/p>\n\n\n\n A WordPress payment form helps you to create a simplified and user-friendly custom payment solution that can deliver a high number of successful transactions and happy customers.<\/p>\n<\/div>\n\n\n\n Finally, while a secure third-party will handle processing your payments, you’ll still want to implement these ecommerce security best practices<\/a> to go along with your payment form and you’ll definitely want to make sure your WordPress site is using HTTPS<\/a>.<\/p>\n\n\n \ud83e\uddd1 About the author<\/strong>: Marius is a WordPress expert and founder at WPRiders.com agency. He builds a lot of custom plugins and platforms, so he knows what works and what doesn’t when it comes to WordPress.<\/p>\n\n\n\n Have you used online payment forms before for your online business? Are you interested in trying them out? Let us know if we can help. Get in touch with WPRiders.com, here<\/a>.<\/p>\n\n\n<\/div><\/div>\n\n\nHow can using an online payment form benefit your business?<\/h2>\n\n\n\n
\n
\n
What payment gateways integrations does Gravity Forms support?<\/h2>\n\n\n
![\"gravity](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/10\/gravity-forms-addons.png\")
<\/figure><\/div>\n\n\n\n
How to create a WordPress payment form with Gravity Forms<\/h2>\n\n\n\n
\n
1. Install Gravity Forms if you haven’t already<\/h3>\n\n\n\n
2. Install the appropriate add-on for your payment processor<\/h3>\n\n\n\n
3. Create a new form for your transaction<\/h3>\n\n\n
![\"gravity](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/10\/gravity-forms-form-builder.png\")
<\/figure><\/div>\n\n\n\n
\n
4. Create the necessary form fields for your transaction<\/h3>\n\n\n\n
\n
\n
5. Create a feed for your form to send the billing data to your payment processor<\/h3>\n\n\n\n
6. Add the payment form to your website (and don’t forget to test it)<\/h3>\n\n\n\n
![\"Example](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/10\/credit-card.png\")
<\/figure><\/div>\n\n\nHow to use a custom payment workflow with Gravity Forms<\/h2>\n\n\n\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2019\/10\/askademic-signup.png\")
<\/figure><\/div>\n\n<\/div><\/div>\n\n\n\n\n
Conclusion \ud83e\uddd0<\/h2>\n\n\n\n