Would you like to learn how to create a file upload form in Elementor?
As you probably know, the pro version of Elementor comes with a Form widget that you can use to create forms on your WordPress website. With this widget, you can create almost all types of forms. There are approximately 19 types of fields offered by this widget, including a field to upload a file.
In this article, we’ll show you how to create a form that consists of a file upload field.
But before you start, make sure you’ve upgraded your version of Elementor to the Pro version since, again, the Form widget is only available on Elementor Pro.
First, create a new page or publish and edit it with Elementor. Before you start creating the page to add your form, first set the layout. To do so, click on the gear icon in the lower-left corner of the left panel. Set your preferred layout from the drop-down menu layout.
Add a new section by clicking the plus icon in Elementor’s edit box. You can select any structure based on 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 have a form made up of three fields: Name, E-mail, and Message. Remove a field you don’t need by clicking the x icon on the field.
In this article, we will create a form made up 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 ELEMENT button to add a new field. Set the field type to Upload File. If you want to set it as a mandatory field, activate the Required option. Set the maximum file size from the drop-down menu to Max File Size.
To set the allowed file types, enter the file extensions Allowed Files Types. You can accept multiple file types by separating the file extensions with 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 just drag each field up or down. In this example, we are placing the File Upload field above the Message field.
Definition of action
It would be great if you could connect your Elementor form with form backend services like Getform or Formcarry. Unfortunately, Elementor does not support integration with any form of backend service.
So, in this article, we are going to define the action on the email. This means that submissions submitted through your form will be sent via the specified email.
By default, the form action was set to email. You can verify this from the Actions After Submit option.
Next, open the Email option and set the email address the form submissions will be sent to. Also, define the subject of the e-mail.
Still under the Email option, set the body of the email to the Message option.
To customize the body of the email, you can paste the shortcodes of the fields you want to add to the body. You can find them in the ADVANCED tab of each field.
You can also customize your email body metadata in the MetaData section. Remove any metadata that you don’t want to include.
The metadata itself will appear below the body of the email.
In the From Email, From Name, and Reply-To fields, you can leave them empty.
Read more: How to add pagination in Elementor or Elementor pro
Customizing the form
So far, your form is ready to be published. Before publishing it, you can customize the form to make it more attractive. 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 create more advanced styling options, you can access the Style tab. Here are some styling options you can set.
-
Define the space between the lines and the typography of the labels
To define the space between the lines (fields) as well as the typography of the labels, you can open the Form option.
Set the row space to the Rows Gap section. To define the typography of the labels (font size, font style, and font family), you can click on the typography pencil icon in the Label section.
-
Define the field typography, background color, border color, border width, and border-radius
You can open the Field option to set the typography of the field, the background color of the field, the border color, the border width, and the border-radius.
-
Customize button
To customize the button, you can open the Buttons option. From there you can set the background color, text color, typography, border color, border-radius, etc. Switch to the HOVER tab to customize the button pointing.
There are several other customization options you can set. You can play around with the left panel until you are happy with how your form looks. Once done, you can click on the PUBLISH button to publish your form.
Potential error
When you test your form, error messages may appear. Below is an example of an error.
The above error usually occurs if you are using a shared web hosting service. Most shared web hosting providers disable the PHP send_mail feature, which is used by the WordPress wp_mail feature to send emails.
For website maintenance service contact us.