Mastering WordPress: Effortless Steps to Build Forms with Payment Options

Selling products or services directly through your website is an excellent way to expand your business. You can achieve this with a straightforward payment form, eliminating the need for a complicated online store.

This simple method is ideal for various purposes. You can offer consulting services, sell event tickets, or provide a digital download.

The process involves linking your form to a reliable payment service such as Stripe or PayPal, providing your visitors with a secure and familiar way to make their purchases.

To ensure a dependable setup, having the right tools is essential. Plugins like WPForms and WP Simple Pay are highly effective, as they manage the technical aspects for you.

This guide will walk you through the steps to set everything up. Let’s prepare your new payment form for business.

Why Should You Create WordPress Forms with Payment Options?

If you’re looking to create a simple form with tailored payment options, there’s no need for a full-fledged online store. Therefore, eCommerce plugins like Easy Digital Downloads and WooCommerce may be overly complex if you’re only selling a few items or need to accept varying amounts from customers.

In many situations, a simple payment form is a far better option than utilizing a dedicated eCommerce plugin.

For instance, on a non-profit website, you might want to allow visitors to make a donation while completing a volunteer application form.

Some website owners prefer to accept optional tips from visitors who are seeking assistance.

Alternatively, you could offer a digital download with a ‘pay what you want’ model, allowing visitors to decide how much to pay for a product or service.

We have also observed WordPress websites providing products as free downloads while giving visitors the option to pay for premium upgrades or additional content.

With that in mind, we will demonstrate how to create optional payment forms. You can use the quick links below to jump directly to the method you wish to use:

• Method 1: Using WP Simple Pay (Best Free Option)
• Method 2: Using WPForms (Best for Flexible and Optional Payments)
• Frequently Asked Questions: WordPress Payment Forms

Let’s get started.

Method 1: Using WP Simple Pay (Best Free Option)

Creating a straightforward payment form on WordPress is simple with WP Simple Pay.

WP Simple Pay is the top Stripe payment plugin for WordPress, allowing you to accept credit card payments, Apple Pay, Google Pay, and more without needing additional eCommerce plugins.

We have thoroughly tested this tool on our demo site and found it to be very user-friendly. For further information about the plugin, check out our comprehensive WP Simple Pay review.

This plugin is ideal for non-profits, small businesses, volunteers, and anyone looking to collect payments without the need for complex eCommerce solutions.

To begin, you need to install and activate the WP Simple Pay plugin. If you require assistance, please refer to our guide on how to install a WordPress plugin.

In this guide, we will utilize the free version of WP Simple Pay, as it includes all the essential features for accepting payments online. There is also a Pro version available that supports ACH direct debit, recurring payment plans, buy now pay later options, and much more.

After activation, the plugin will automatically open the setup wizard. Click the ‘Let’s Get Started’ button to proceed.

In the next step, you will connect your Stripe account to WP Simple Pay, which is an easy-to-use payment processor for website owners.

To enable the payment processor, simply click the ‘Connect with Stripe’ button.

Next, you can either log into your existing Stripe account or create a new one.

If you already have a Stripe account, just enter your email address and password.

WP Simple Pay will guide you through the process of linking your Stripe account to WordPress.

If you don’t have a Stripe account yet, enter your email address and follow the on-screen instructions to set up your free account.

Once you are logged into your Stripe account, click on ‘Create a Payment Form.’

If you accidentally navigate away from this screen, don’t worry. You can return to it by going toWP Simple Pay » Add Newin your WordPress dashboard.

The free WP Simple Pay plugin offers several payment templates that allow you to create various payment forms in just minutes.

You can access additional templates by upgrading to WP Simple Pay Pro, which includes a template for adding a Stripe donate button to your WordPress site.

To create a straightforward payment form in WordPress, hover over the ‘Payment Button’ template and click on ‘Create Payment Button’ when it appears.

In the ‘Title’ field, enter a name for your payment form.

This title is for your own reference, so feel free to choose any name you like.

You can also utilize the ‘Description’ field to provide additional information about your payment form.

While WordPress does not display this to your site visitors, it can be helpful for your own reference or for anyone else accessing your WordPress dashboard.

After that, click on the ‘Payment’ tab.

By default, WP Simple Pay sets your payment form to test mode, which means you cannot accept payments from visitors.

We suggest keeping the ‘Global Settings (Test Mode)’ radio button selected to test the form functionality before accepting real payments.

However, if you’re ready to start accepting real payments immediately, you can select the ‘Live Mode’ button instead.

Next, determine the amount you will charge visitors by entering a number in the ‘One-Time Amount’ field.

Note: By default, WP Simple Pay uses US dollars for transactions. If you wish to accept payments in a different currency, simply navigate to WP Simple Pay – SettingsNext, navigate to the ‘Currency’ tab to select your preferred currency.

Once that is complete, proceed to the ‘Form Fields’ tab.

The default label for your button will be ‘Pay Now,’ but you can customize it by entering your desired text in the ‘Button Text’ field.

Since this is an optional payment form, consider using phrases like ‘Send Us a Tip’ or ‘Buy Me a Coffee.’

You can also modify the ‘Button Processing Text,’ which is the message displayed to customers while their payment is being processed.

For an optional payment form, you might want to use a message like ‘We’re processing your donation.’

By default, WP Simple Pay adopts the button style of your WordPress theme, but it also offers a ‘Stripe blue’ style, as shown in the image below.

To use the ‘Stripe blue’ button style, simply select the corresponding radio button in the ‘Payment Button’ section.

Then, go to the ‘Stripe Checkout’ tab to choose the information that WP Simple Pay will gather from visitors during checkout.

For instance, if you are selling a physical product, make sure to check the ‘Collect Shipping Address’ option.

While creating your payment form, you can easily preview its appearance at any time by clicking the ‘Preview’ button.

This action will open the payment form in a new tab, similar to how you preview posts and pages in the standard WordPress editor.

Once you are satisfied with the design of your payment form, click the ‘Publish’ button to make it live for users.

You can now incorporate the payment form into any page, post, or widget-ready area using the ‘Form Shortcode’ provided.

For detailed instructions on how to insert the shortcode, refer to our guide on adding a shortcode in WordPress.

If you published the form in test mode, please note that the Stripe dashboard will not display any payments received during this period, making it challenging to test your optional payment form.

To view your transactions, you must enable test mode in Stripe by logging into your Stripe dashboard and selecting the ‘Payments’ tab.

Then, click on the ‘Developers’ toggle located in the upper right corner.

After completing this step, all your test payments will be visible in the Stripe dashboard, allowing you to verify that the form functions correctly.

When you are confident that the form is properly configured, you can begin accepting real payments by visiting WP Simple Pay » Payment Formsin the WordPress admin area.

Simply hover over the optional payment form and click the ‘Edit’ link.

Next, select the ‘Payment’ tab.

Then, select the radio button for ‘Live Mode.’

Finally, click on ‘Update’ to save your changes.

Congratulations! Your payment form is now live, and you are ready to start receiving payments from your audience.

Method 2.Using WPForms (Ideal for Flexible and Optional Payments)

Sometimes, you may want to allow customers to choose the amount they wish to pay or donate.

For instance, you might implement a ‘pay what you want’ model. Additionally, you may want to gather extra information through the form or enable users to submit paid content to your blog or website.

To create a flexible payment form, you will need an advanced form builder plugin.

WPForms is the leading form builder plugin for WordPress, allowing you to quickly create a variety of forms, including contact forms, booking forms, and more.

With over 6 million users, WPForms is trusted by website owners, including us. We utilize it for contact forms, annual surveys, and site migration forms. To learn more about this plugin, check out our detailed WPForms review.

With this plugin, you can easily create a form that displays different fields based on whether the customer intends to make a payment.

In this tutorial, we will utilize WPForms Pro, as it includes add-ons that simplify the process of collecting payments through popular payment gateways like Stripe and PayPal, without any extra transaction fees.

There is also a completely free version called WPForms Lite, which allows you to accept Stripe payments, but please note that it incurs an additional 3% fee for transactions processed through your forms.

To get started, you need to install and activate WPForms Pro. If you require assistance, please refer to our guide on installing a WordPress plugin.

Once activated, navigate to WPForms » Settings in your WordPress dashboard.

The first step is to enter your license key in the ‘License Key’ field, which you can find in your WPForms account.

After activating the WPForms plugin, you will need to install at least one payment add-on.

To motivate visitors to purchase your product or service, consider setting up multiple add-ons to allow them to pay using their preferred method.

To install one or more payment add-ons, simply go to WPForms » AddonsOn the next screen, you will find the payment add-on you wish to use.

WPForms allows you to accept payments through popular platforms like Stripe, Square, PayPal, and Authorize.net. To begin accepting payments, simply click the ‘Install Addon’ button for your chosen payment method.

For instance, if you want to accept payments via PayPal, click the ‘Install Addon’ button for the PayPal Standard Addon.

After activating one or more payment add-ons, the next step is to link WPForms to your relevant payment account. If you installed the Square add-on, you will need to connect WPForms to your Square account.

To establish this connection, navigate to WPForms » Settings. Then, click on the ‘Payments’ tab.

On this screen, you will see a ‘Connect with…’ button for each payment add-on you have installed.

Simply click the ‘Connect with…’ button. This will open a setup wizard that will guide you through connecting WPForms to your payment account.

Repeat these steps for each payment add-on you wish to use.

Once you have completed the setup, click the ‘Save Settings’ button at the bottom of the screen. Then, go to WPForms » Add New.

Enter a name for your form in the ‘Name Your Form’ field.

This name is for your reference only and will not be visible to your site visitors.

WPForms offers over 2,000 templates, allowing you to quickly create various types of forms.

To take a closer look at a template, hover over it and click the ‘View Demo’ button.

For this tutorial, we will use the ‘Simple Contact Form’ template, but you can add a payment field to any WPForms template.

When you find a template you’d like to use, click the ‘Use Template’ button to open WPForms’ drag-and-drop form builder.

The ‘Simple Contact Form’ template includes fields for customers to enter their name, email address, and message.

Next, we need to add a field that allows visitors to choose whether to make a payment. The simplest method is to use a ‘Multiple Choice’ field.

Locate the ‘Multiple Choice’ field in the left-hand menu and drag it into your form.

Next, we need to update the label displayed at the top of the ‘Multiple Choice’ section in WPForms.

This is an ideal opportunity to ask visitors if they would like to make a payment. For instance, you could ask, ‘Would you like to contribute a donation?’ or ‘Do you wish to support our website?’

To modify the default label, simply select the ‘Multiple Choice’ section in your form. The left-hand menu will display all the settings available for customizing this section.

In the left-hand menu, remove the placeholder text ‘Multiple Choice’ from the ‘Label’ field. You can then enter your desired new text.

By default, the ‘Multiple Choice’ section includes three options, but we only require two.

To eliminate one of these options, click the ‘-‘ button next to it.

The next step involves customizing the text for ‘First Choice’ and ‘Second Choice.’

In the left-hand menu, simply erase the placeholder text and input your preferred text. For example, you might use ‘Yes, I want to support the website’ and ‘No, thank you.’

When designing WordPress forms with a payment option, you may want to give visitors the choice of how much money to contribute.

To accomplish this, click on the ‘Add Fields’ tab in the left-hand menu, then drag and drop a ‘Single Item’ field onto your form.

To modify this field, just click on it.

Initially, the field displays a ‘Single Item’ label. You can change this label to your preferred text by entering it in the ‘Label’ field located in the left-hand menu.

For instance, you might want to enter phrases like ‘I want to send you…’ or ‘Donation Amount.’

Next, open the ‘Item Type’ dropdown and select ‘User Defined’.

Visitors will now have the ability to enter any amount in this field and send you that specified amount.

You may also wish to propose specific amounts you would like to receive. This can simplify the process for visitors, allowing them to click and select an amount instead of deciding on their own.

To include suggestions in your form, simply drag and drop a ‘Multiple Items’ field onto your WordPress form.

Then, customize the section’s label and option text by following the same steps outlined above.

After that, you’ll need to assign a price for each option by entering the value in the adjacent field.

By default, the ‘Multiple Items’ section includes three options. To add more choices, simply click on the ‘+’ icon.

You can then personalize the text for the new option and enter a value using the same method described above.

Do you want to remove an option from the Multiple Items section?

To remove it, simply click the ‘-‘ button.

After adding fields, you can rearrange their order in your form by dragging and dropping them.

Once you’ve completed that, make sure to add at least one payment option to your form.

In the left-hand menu, scroll down to locate the ‘Payment Fields’ section.

Here, you will find fields for all the payment add-ons you have installed. To add a payment option to your form, simply click on your preferred choice, and the field will appear in the live preview.

For instance, we have added the ‘Stripe Credit Card’ field to our form.

After adding a payment option field, it’s time to customize it. Click on the payment field, and WPForms will display all the settings available for configuring this field.

For example, by clicking on the ‘Stripe Credit Card’ field, you can edit the label, add a description, and enable the ‘Required’ option.

Now, we want to display the payment field only to visitors who choose to make a payment. To achieve this, enable conditional logic for your payment field.

Begin by selecting the payment field within your form. Next, click on the ‘Smart Logic’ tab located in the left-hand menu.

After that, toggle the ‘Enable Conditional Logic’ slider from grey (inactive) to blue (active).

Now, we need to configure WPForms to display the payment field only when the visitor selects the ‘Yes, I want to support the website’ option.

To achieve this, ensure that the ‘this field if’ dropdown is set to ‘Show.’

Next, click on ‘Select Field’ and choose ‘Do you want to support the website?.’

In the following dropdown, select ‘is.’

Finally, open the dropdown labeled ‘Select Choice’ and choose the ‘Yes, I want to support the website’ option.

In the image above, we are instructing WPForms to display the payment field only when a visitor confirms their intention to support the website.

Integrating Payment Methods into WPForms

The next step involves activating payment options for the form. Click on the ‘Payments’ tab in the left-hand menu to proceed.

You will now see a variety of payment options available for you to enable for the form.

To begin, simply click on the payment option you wish to set up.

Afterward, check the box next to ‘Enable….’

Depending on the chosen payment method, you may need to adjust additional settings. For instance, if you are setting up PayPal, you will need to enter the email address where you wish to receive payments.

It’s also important to implement conditional logic rules with your payment options.

To activate conditional logic, toggle the ‘Enable Conditional Logic’ switch. Next, open the dropdown labeled ‘this charge if’ and select ‘Don’t process.’

After that, click on the dropdown that defaults to ‘Select Field.’ You can now select a field such as ‘Do you want to support this website?’ or a similar option.

Then, ensure that the next dropdown menu is set to ‘is.’

Once that is done, proceed to open the ‘Select Choice’ dropdown menu and select ‘No, thanks’ or a similar option.

At this point, your website will not process any payments if the visitor selects the ‘No, thanks’ option, regardless of their input in the rest of the form.

If you provide multiple payment options, simply repeat the above steps by checking the ‘Enable’ box and configuring any additional settings. You can also activate conditional logic.

The screenshot illustrates that Stripe has distinct settings compared to PayPal, making it essential to review these additional settings thoroughly.

After completing the initial setup, it’s advisable to enable AJAX form submissions. This feature allows users to submit the payment form without refreshing the entire page.

To enable AJAX submissions, navigate to Settings » General.

Next, click to expand the ‘Advanced’ section.

Then, check the box for ‘Enable AJAX form submission’.

Once you’re satisfied with the appearance of your WordPress form, make sure to save your changes.

To save, simply click the ‘Save’ button located at the top of the screen.

By default, WPForms sends an email notification to your WordPress admin whenever someone submits the form. However, you might prefer to receive notifications only when a payment is made.

To modify WPForms’ default email settings, click on the ‘Settings’ tab, and then select ‘Notifications’ from the left-hand menu.

Scroll down to the bottom of the screen and toggle the ‘Enable Conditional Logic’ slider.

Once you activate the slider, WPForms will display additional settings.

Next, ensure that the ‘this notification if’ dropdown is configured to ‘Send.’

After that, click on the dropdown that defaults to ‘Select Field’ and choose ‘Do you want to support the website?’ or a similar option.

Next, confirm that the dropdown is set to ‘is.’

Now, open the dropdown that defaults to ‘Select Choice.’

The final step is to select ‘Yes, I want to support the website’ or a similar option.

Once you are satisfied with these changes, remember to click the ‘Save’ button.

You can also send these notifications to any other email address or multiple addresses. When you enable these settings, WPForms will send all emails to the WordPress admin email as well as any other registered emails.

To modify the default settings, locate the ‘Send To Email Address’ field. By default, this is set to {admin_email}, which dynamically directs emails to your WordPress admin.

You can replace this dynamic text with a different email address by entering the new address in the ‘Send To Email Address’ field.

If you wish to send emails to multiple recipients, simply separate each address with a comma, as shown in the following screenshot.

By default, WPForms sets the email subject line to ‘New Entry’ followed by the name of your form.

If you prefer a different subject line, simply enter your desired text in the ‘Email Subject Line’ field.

You can also incorporate dynamic text into your email subject. To do this, click on the ‘Show Smart Tags’ link and select a tag from the ‘Available Fields’ list.

When WPForms sends out emails, it will automatically replace the smart tags with the values from the submitted form. For instance, if you select ‘Total Amount,’ WPForms will display the total payment in the email subject line.

Additionally, you can modify the content included in the body of the email.

Once again, smart tags can be utilized to create a more informative email.

After setting up your custom email notifications, ensure they reach the recipient’s inbox instead of the spam folder.

The most effective way to achieve this is by using an SMTP service provider in conjunction with WP Mail SMTP to enhance email deliverability.

For further information, refer to our guide on resolving the WordPress email sending issue.

You may also consider displaying a confirmation message to your customers.

For instance, you can confirm the successful submission of their form or display a personalized ‘Thank You’ message. WPForms automatically presents this message whenever a customer submits the form on your WordPress site.

To customize this message, click on the ‘Confirmations’ tab. Then, open the ‘Confirmation Type’ dropdown and select ‘Message.’

If you want to display the same message to all users, simply enter your text in the ‘Confirmation Message’ box.

Alternatively, you can create a personalized message by incorporating smart tags, following the same steps mentioned earlier.

If you prefer to redirect users instead of showing a message, you can select a specific page or URL. To do this, open the ‘Confirmation Type’ dropdown.

You can then choose either ‘Show Page’ or ‘Go to URL.’

Afterward, use the settings to specify the page or URL that WPForms will display once the customer submits the form.

When you’re satisfied with these settings, remember to save your changes by clicking the ‘Save’ button.

Once completed, you’re ready to add this form to your website.

To publish your form, navigate to the page or post where you want to showcase the form. Then, click on the plus ‘+’ icon.

In the popup that appears, enter ‘WPForms’ to locate the appropriate block. Once you click on the WPForms block, it will be added to your page.

In your new block, click to open the dropdown menu.

You will see a list of all the forms you have created with WPForms. Simply click to select the WordPress form that includes a payment option.

WPForms will now display a preview of how your form will appear directly in the WordPress editor.

You can also view the entire page by clicking the ‘Preview’ button in the toolbar.

When you are satisfied with the appearance of your form, you can publish or update this page as usual.

Now, if you visit this page or post, you will see the optional payment form live on your WordPress website.

Frequently Asked Questions: WordPress Payment Forms

Here are some common questions from our readers regarding the creation of WordPress forms with payment options:

How can I securely collect payments on WordPress?

To ensure secure payments on your WordPress site, follow these essential steps:

• Activate SSL/HTTPS – This secures the data exchanged between your website and your visitors’ browsers. Most hosting providers offer a complimentary SSL certificate, so make sure to enable it before processing payments.
• Utilize reliable payment plugins – Plugins such as WPForms or WP Simple Pay utilize secure, embedded payment fields, ensuring that sensitive information never interacts with your server.
• Conduct tests in sandbox mode initially – Most payment gateways provide test modes that allow you to simulate transactions before launching your site.
• Exclude payment scripts from caching – If you are using a caching plugin, make sure to exclude files like wpforms.min.js to guarantee that forms load properly and tokens stay secure.

Following these steps establishes a secure environment for your users and helps avoid payment-related issues.

How can I test payments before going live?

Most payment plugins and gateways, such as Stripe or PayPal, provide a test or sandbox mode. This feature allows you to perform test transactions using dummy card numbers to ensure everything functions correctly before you start accepting real payments.

You can verify aspects such as form submissions, email notifications, and payment logs to ensure a seamless experience for your users.

For a comprehensive guide, refer to our detailed tutorial on testing Stripe payments in WordPress.

Where can I place my payment form on my website?

The location of your payment form significantly impacts the completion rate. Here are some effective placements to consider:

• Dedicated checkout or landing pages – These are ideal for directing users’ attention solely on completing the payment without any distractions.
• Product pages, blog posts, or sidebars – These are great for quick donations, signups, or when you want to integrate the payment form with additional content.
• Footers – A suitable choice for small contributions or subscription offers that do not require a prominent call-to-action.
• Off-site or hosted pages – For instance, Stripe Checkout redirects users to a secure, hosted payment page if you prefer that method.

You can incorporate your form using a shortcode or a Gutenberg block. We suggest testing different placements to determine which one yields the best results.

We hope this article has helped you understand how to create WordPress forms with payment options. You may also want to explore our guides on creating a recurring donation form and customizing and styling your WordPress form.

If you enjoyed this article, consider subscribing to our YouTube Channel for helpful WordPress video tutorials. You can also connect with us on Twitter and Facebook.