Require payment on a file upload form

How to Require Payment on a WordPress File Upload Form

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.

Create Your File Upload Payment Form Now

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:

WPForms is the best WordPress Form Builder plugin. Get it for free!

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:

  1. Install the WPForms plugin
  2. Create a File Upload Form
  3. Add Stripe Payment to Your File Upload Form
  4. Configure Your Stripe Payment Settings
  5. Publish Your File Upload Payment Form

Let’s start by installing the plugin.

Step 1: Install the WPForms Plugin

To start, let’s install and activate the WPForms plugin. If you need help with this, jump over to this guide on how to install a plugin in WordPress.

Next, let’s set up payments. Stay in the WordPress dashboard for this next part.

If you’re considering Stripe vs PayPal, the good news is that WPForms lets you use both. You can also take payment using Authorize.Net if you prefer that.

We’ll use Stripe in this example.

To start, you’ll need to click WPForms in the left-hand navigation bar, and then Settings.

WPForms settings menu

Now click the Payments tab at the top.

WPForms payment settings for file upload form

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.

Connect your file upload form to Stripe

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:

Stripe payments connected to WPForms

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.

WPForms add new menu

In the form builder, type a name for your form at the top. Then click the Simple Contact Form template.

File upload 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.

Add File Upload field to payment form

Now click on the File Upload field and click the Required checkbox.

Require file upload on payment form

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:

Modern file upload drag and drop

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.

Drag Stripe credit card field onto file upload form

Now click on the Single Item field to open the settings. In Item Price, type the price you want to charge your customer.

File upload form with single payment field

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.

Enable Stripe payments on file upload form

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.

Turn on AJAX form submission for Stripe payment form

You can add extra form notifications and change the confirmation message here if you’d like to.

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.

Embed your file upload payment form

In this example, we’re going to Create New Page.

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.

Name your file upload payment form

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.

Publish your file upload payment form

Now the form is live, you’re ready to take payments and file uploads in 1 form!

Finished file upload payment 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.

Create Your File Upload Payment Form Now

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.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.