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.

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.

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.

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.