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 any type of forms. There are about 19 field types offered by this widget, including a field for 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.
Read our guide on: How to install Elementor on WordPress
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 are going to create a form made up of 4 fields: Name, E-mail, 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.
Read also: How to add reCAPTCHA to your Elementor form
Click on the button ADD AN ITEM to add a new field. Define the type of field on Upload File. If you want to define it as a mandatory field, activate the option Required. Set the maximum file size from the drop-down menu to Max file size.
To define the allowed file types, enter the file extensions Allowed File 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, activate the option Multiple Files and set the maximum number of files they can download.
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 such as getform ou Formcarry. Unfortunately, Elementor does not support integration with any form backend service.
Find out how: How to add divider to create section in Elementor
So, in this article, we are going to define the action on 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 make sure from the option Actions After Submit.
Then open the option E-mail and set the email address to which form submissions will be sent. Also define the subject of the e-mail.
Always under the option E-mail, set email body to option Message
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 tab ADVANCED of each field.
You can also customize the body metadata of your email in the section metadata. Remove any metadata that you don't want to include.
The metadata itself will appear below the body of the email.
In the fields From Email, From Name and Reply-To, you can leave them empty.
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 turn it off, you can do it from Form Fields option under the Content tab.
To create more advanced styling options, you can access the tab style. 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 option Form
Set the line space on the section Rows Gap. To define the typography of the labels (font size, font style and font family), you can click on the pencil icon of Typography in the section labels.
- Define the field typography, background color, border color, border width and border radius
You can open the option Field to define the typography of the control, the background color of the control, the border color, the border width and the border radius.
- Customize button
To customize the button, you can open the option Buttons. From there you can set the background color, text color, typography, border color, border radius, etc ... Switch to the tab HOVER to customize the button pointing.
There are several other customization options that 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 button PUBLISH 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 serviceWeb hosting sharing. Most suppliers ofWeb hosting shared disable function php send_mail, which is used by the WordPress functionality wp_mail to send e-mails.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a file upload form in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
