In this article you will find out how to create a form with free Elementor.
Although the Form widget is only available on Elementor Pro, it does not mean that you cannot create a form on the free version of Elementor.
If you need to add a form to the page you are creating with the free version of Elementor, you can use the two methods that we are going to cover in this article.
Elementor, whether it is the pro version or the free version, comes with two widgets that you can use to create a form. These are the HTML and Shortcode widgets. With the HTML widget, you can embed an HTML form, while the Shortcode widget allows you to embed a form from form plugins that use the shortcode such as Contact Form 7.
Create Form with Elementor Free Version Using HTML Widget
This method requires you to have an HTML skill to create the form. Or, you can download an HTML form template from the Internet. W3docs has more than 60 HTML form templates which you can download for free.
To get started, create a new page and edit it with Elementor (Pages – > Add). Of course, you can also modify an existing page. If you want to create a form on a new page, remember to set the form layout by clicking the gear icon in the lower left panel.
Add a new section by clicking the plus button in the editing area and add the HTML form by dragging it from the left panel to the editing area. Place it in the area you want. Then go to the left panel and paste the HTML code of the form in the field HTML code under the tab Contents.
Publish/update the page once you are done editing it.
See also: How to Use Elementor Widgets/Templates as Gutenberg Blocks
A thing. If your HTML form uses external CSS, images, or JavaScript for styling, be sure to upload the folders containing the CSS code, images, and JavaScript to your website's root directory.
Create a form on Elementor free using contact form 7
If you don't have any HTML skills and don't want to use an HTML form template, you can create a form on the free version of Elementor using the plugin Contact form 7. There are actually many other form plugins. We recommend Contact Form 7 because it is the most popular form plugin for WordPress and completely free.
First, install the plugin Contact Form 7. To do this, go to Extensions – > Add. Type “contact form 7” in the search box and click the button install now once you've found it.
Activate the plugin immediately once installed.
Contact Form 7 comes with a default form (a Contact form ). You can use it if you want. If you want to create a new form instead, you can go to Contact – > Add. Give your form a name so you can easily identify it in the future.
By default, your form will consist of four fields: name, email, subject, and message.
If you want to add a new field, place your pointer in the area where you want to add the new field (you can place it below or above an existing field). Add label for new form field in format <label> votre label préféré </label>.
Place your pointer just after the label and select a field in the field tab. You can add a new line break to make your new field cleaner than other existing fields.
Fill in the fields and click on Insert the tag (you can leave everything as default).
Contact Form 7 will send submissions submitted through your form to an email. You can set the email from the tab E-mail.
You can go to the tab Messages if you want to override the default messages. You can customize the message that appears after your visitors successfully submit the form or the error message when the form is not submitted, etc.
Click on the button Save once you are done editing the form and copying the shortcode.
To add the form you just created to your Elementor page, create a new page and edit it with Elementor, or you can also edit an existing page.
Read also: How to Disable an Elementor Popup on Smartphones
Add a new section to place the form and add the Shortcode-widget. Once the Shortcode widget is added, go to the left panel and paste the shortcode you copied into the field Shortcode under the tab Contents.
Publish/update your page once you are done editing it.
Contact Form 7 uses the style format of the WordPress theme that you use. You can style your Contact Form 7 form, but CSS skills are required. You can also view this article at How to customize a Contact Form 7 form with Essential Addons and Elementor.
Get Elementor Pro Now!!!
Conclusion
So ! That's it for this article that shows you how to create a form with free Elementor. If you have any concerns about how to get there, let them 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.
...
