Do you want to require payment on a WordPress file upload form? Getting a file and payment at the same time will save time and help to increase your conversions.
In this article, we’ll show you how to make sure that your visitors make payment when uploading a file on your website.
How Do I Create a Payment Form in WordPress?
It’s easy to make a payment form in WordPress using the WPForms plugin.
WPForms is the best form builder plugin for WordPress. It lets you build any kind of form for your website without writing any code.
The great thing about WPForms is that you can stop people submitting a form without a file upload and a payment. This is handy for forms like:
Using WPForms, you’ll save a lot of time chasing payments, or canceling orders if people don’t send the files you need.
It’s really easy to set up a file upload form with a credit card payment field. Let’s go ahead and step through the process.
How to Require Payment on a WordPress File Upload Form
In this example, we’re going to create a quote acceptance form for a business website. In order to start the project, our visitor will need to upload a file and pay a deposit.
Here are the steps we’re going to work through:
- Install the WPForms plugin
- Create a File Upload Form
- Add Stripe Payment to Your File Upload Form
- Configure Your Stripe Payment Settings
- Publish Your File Upload Payment Form
Let’s start by installing the plugin.
Step 1: Install the WPForms Plugin
Next, let’s set up payments. Stay in the WordPress dashboard for this next part.
We’ll use Stripe in this example.
To start, you’ll need to click WPForms in the left-hand navigation bar, and then Settings.
Now click the Payments tab at the top.
First, check that the Currency is set correctly. If it isn’t, you can go ahead and change it in the dropdown.
Then scroll down to the Stripe section and click the blue Connect with Stripe button.
You can create an account for Stripe now, or sign in to your existing account. If you need help, check out our detailed documentation on using the Stripe addon with WPForms.
Once Stripe is connected, you’ll see a message in the Stripe section of the page to confirm it’s all set up:
Did you notice that we’re running Stripe in test mode? If you want to try out your form without making real payments, you can check the Test Mode box to turn that on.
OK, so now we have Stripe working, let’s make the form.
Step 2: Create a File Upload Form
Now we’re going to create a form for our customers to accept a quote. On this form, they’ll need to pay a deposit and attach a document.
The form will look similar to a regular file upload form, but with some extra fields for Stripe.
WPForms comes with 100+ form templates, so making any kind of form is really easy. Let’s use the Simple Contact Form template and customize it.
So to start, click Add New from the WPForms menu.
In the form builder, type a name for your form at the top. Then click the Simple Contact Form template.
Even though this template is for a contact form, we can add more fields to get it to work the way we want it.
The WPForms form builder will open in your browser. Notice how the right-hand pane always shows a live form preview that makes it easy to see what the finished form will look like. On the left, you’ll see a list of fields that can be added.
Let’s click and drag a File Upload field from the left-hand pane to the right-hand pane.
Now click on the File Upload field and click the Required checkbox.
Now, if the user doesn’t add a file, the form won’t submit.
Let’s scroll down and expand the Advanced Options section. Did you notice that we’re using the Modern style for the field?
The Modern style is best because it lets people drag and drop files onto the field to upload them. You can also accept multiple files in the same form:
If you need extra help getting your form set up, check out this guide to creating a simple contact form in WordPress for more details.
OK, so now we have a File Upload field on the form, we just need to add the payment fields.
Click Save at the top to save your progress so far.
Step 3: Add Stripe Payment to Your File Upload Form
Now we have a working file upload form, all we need to do is take the deposit from the customer using a secure payment field.
For this form, let’s make a really simple example with 2 fields:
- A Single Item field
- A Stripe Credit Card field.
Go ahead and drag these 2 fields from the left hand pane onto the form on the right.
Now click on the Single Item field to open the settings. In Item Price, type the price you want to charge your customer.
That’s it. The payment fields are done!
If you want to add more payment fields, check out this guide on how to require a payment total on your form. Adding a Total field will help to prevent anyone from sending a $0.00 payment. In this case, we don’t need a Total field because we’re using 1 fixed price.
OK. We’re done here, so let’s move on to the form payment settings.
Step 4: Configure Your Stripe Payment Settings
The hard work is done! We’re in the home stretch. We just need to tell WPForms exactly what we want to do in Stripe when the form is submitted.
Stay in the form builder and click Payments » Stripe. From there, click on the Enable Stripe payments box.
There are a few settings that you can customize here:
- Payment description – This is the description that will appear on your customer’s credit card statement. You should normally type your business name here.
- Stripe payment receipt – Select Email from the dropdown to send a receipt to the email address your visitor entered on the form.
- Enable conditional logic – You can use this to process the payment only if certain conditions are met. This is helpful if you want to check that important fields are filled out before payment is taken.
The rest of the settings are for recurring payments, so we don’t need to edit those right now.
Here’s the last step. Click Settings on the left and click the Enable AJAX form submission checkbox.
All done? Click Save at the top.
Just one more step to go!
Step 5: Publish Your File Upload Payment Form
Now we’re ready to publish your form. This is the easiest part.
At the top of the form builder window, click Embed.
In this example, we’re going to Create New Page.
We’re going to name our page Pay Your Project Deposit. Type your preferred page name here and then click Let’s Go.
WPForms will now create a new page and adds the form we created. All that’s left to do is click the Publish or Update button at the top-right.
Now the form is live, you’re ready to take payments and file uploads in 1 form!
Did you notice that we used a special card number for the test submission? If you’re in test mode, you can use these same card details to try out your Stripe form.
And that’s it! You’re ready to take payment on your WordPress file upload form.
Next: Add Optional Payment to a Form
Do you want to take file uploads with optional payment? This could be a good way to take donations for a charity or nonprofit.
To find out how to make payment optional, check out this article on adding an optional payment field to a form.
Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes file upload form templates and offers a 14-day money-back guarantee.