How to Create a File Upload Form in Elementor

As you have probably known, the pro version of Elementor comes with a Form widget that you can use to create forms in your WordPress site. With this widget, you can create nearly all types of forms. From a registration form, an email subscription form, a booking form, and so on.

There are about 19 field types offered by this widget, including a field to accept a file upload. In this post, we will show you how to create a form that consists of a file upload field.

Before getting started, make sure you have upgraded your Elementor to the pro version since, once again, the Form widget is only available on Elementor Pro.

Creating a File Upload Form in Elementor

First off, create a new page or post and edit it with Elementor.

Creating a new page with Elementor

Before start creating the page to add your form, set the page layout first. To do so, click the gear icon on the bottom-left corner on the left panel. Set your preferred page layout from the dropdown menu on Page Layout.

Setting the page layout.

Add a new section by clicking the plus icon in the canvas area. You can select any structure according to the design concept you want to create. We choose a single-column structure in this example.

Adding a new section

Add the Form widget by dragging it from the left panel to the canvas area.

By default, you will have a form that consists of three fields: Name, Email, and Message. Remove a field you don’t need by clicking the x icon on the field.

In this example, we will create a form that consists of 4 fields: Name, Email, Message and File Upload. Since the form has only 3 fields by default, you need to add a new form for the File Upload field.

Click the ADD ITEM button to add a new field. Set the field type to File Upload. If you want to set it as a required field, enable the Required option. Set the maximum file size from the dropdown menu on Max. File Size. To set the allowed file types, enter the file extensions on Allowed File Types. You can accept multiple file types by separating the file extensions by a comma.

If you want to allow your visitors to submit multiple files, enable the Multiple Files option and set the maximum number of files they can upload.

If you want to change the order of the fields, you can simply drag each field up or down. In this example, we place the File Upload field above the Message field.

Setting the Action

It would be great if you could connect your Elementor form with form backend services like Getform or Formcarry. Unfortunately, Elementor doesn’t support integration with any form backend service. So, in this post, we will set the action to email. This means that the submissions submitted via your form will be sent via the specified email.

By default, the form action has been set to email. You can make it sure from the Action After Submit option.

Next, open the Email option and set the email address where the form submissions will be sent to. Set the subject of the email as well.

Still on the Email option, set the email body on the Message option. By default, all of the form fields are sent via [all-fields] shortcode so your email body will look like the following.

To customize the email body, you can paste the shortcodes of the fields you want to add to the body. You can find them on the ADVANCED tab on each field.

You can also customize the metadata of your email body on the Meta Data section. Remove metadata you don’t want to include.

Metadata itself will appear beneath the email body.

On the From Email, From Name, and Reply-to fields, you can set them empty.

Styling Up the Form

Until here, your form is ready to publish. Before you publish it, you can style the form to make it more appealing. By default, each field on your form contains a label. If you want to disable it, you can do so from the Form Fields option under the Content tab.

To make more advanced styling options, you can go to the Style tab. Here are some styling options you might want to set.

  • Set the gap between rows and the typography of the label

To set the gap between rows (fields) as well as the typography of the label, you can open the Form option. Set the rows gap on the Rows Gap section. To set the typography of the label (font size, font style, and font family), you can click the pencil icon on Typography on the Label section.

  • Set typography of the field, background color, border color, border width, and border radius

You can open the Field option to set the typography of the field, field background color, border color, border width, and the border radius.

  • Styling up the button

To style the button, you can open the Button option. From here, you can set the background color, text color, typography, border color, border radius, and so on. Switch to the HOVER tab to style the button hover.

There are several other styling options you can set. You can play around with the left panel until you get satisfied with the look of your form. Once done, you can click the PUBLISH button to publish your form.

Potential Error

When testing your form, you might see the following error message after pressing the button.

The error above usually happens if you use a shared web hosting service. Most shared web hosting providers disable the PHP send_mail function, which is used by WordPress wp_mail function to send emails. We have covered this issue in this post. Go read the article if you get this issue.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

11 thoughts on “How to Create a File Upload Form in Elementor”

  1. You just missed one important bit.
    By adding this below, I was able to view the image uploaded directly into my email witth a bit of html.

    You got a new message!

    Username: [field id=”name”]

    Email: [field id=”email”]

    Phone: [field id=”tel”]


    Don’t forget to call them back soon 🙂

  2. Thanks a lot for your content!
    Do you know where the images uploaded are saved?
    I cannot see them anywhere.
    Cheers, Ben

    • Hi Benjamin. Unless you connect your form with a form backend service, your images are saved to your server. You can find them under the forms folder (full path wp-content/uploads/elementor/forms). If you set the form action to email, you can find the URL of each image on your email. Starting version 3.2, Elementor offers a bult-in form submission manager. You can set the form action to Collect Submissions. You can then find the URL of images from form submission manager by going to Elementor -> Submissions.

  3. Hi – Is there any way the uploaded images go directly to the wordpress image library? This will save me a lot of time downloading them to my desktop, renaming them (as for some reason the original name of the file is replaced by random numbers) and uploading them back to my media library.
    Hope u have a solution for this

  4. Uploaded files seem to be public— as in anyone can access them if they have a link!

    Is there anyway to make them private to admin or logged in users?

    • Uploaded files seem to be public— as in anyone can access them if they have a link!

      Is there anyway to make them private to admin or logged in users?

      Same question

  5. Hi!
    How can I send attached files visible in email instead of a link?
    Our website is a job portal and the email is collected dynamically, so the customer receives the CV attached instead of a link.


  6. Created a form which was allowed to have multiple attachments and when uploading files from two different locations on the submitters computer, the first file is removed. Without having the submitters files in one location(say one is in desktop and one is in documents) to attach how would we do we go about making this work so that the submitter is able to attach them both without replacing the first submission. I understand they work when the files are packaged together in the same location.

  7. Is there a way to fix the form submissions properties? Even if I have no documents attached and hit “send”, it still says it was sent successfully and my test email shows something was uploaded, but it’s blank. Where would I change this to not submit unless there are files attached?

  8. Too bad the “Allowed File Types” does not actually filter the available file types shown to the user, as it seems the generated code does not include the “accept=” setting. So when a visitor clicks “Browse”, he is shown all file types, not only the selected file types.

    So the upload file is BROKEN


Leave a Comment

Haven’t used Elementor Pro yet?