Although the Form widget is only available on Elementor Pro, it doesn’t mean that you can’t create a form on the free version of Elementor. If you need to add a form to the page you are creating with Elementor Free, you can use the two methods we are going to cover in this article.
Elementor, be it the pro version or the free version, comes with two widgets that you can use to create a form. The widgets are HTML and Shortcode. With HTML widget you can embed an HTML form, while Shortcode widget allows you to embed a form of form plugins that use shortcode such as Contact Form 7.
Creating a form on Elementor Free 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 over 60 HTML form templates you can download for free.
To get started, create a new page and edit it with Elementor (Pages -> Add New). Of course, you can also edit an existing page. If you want to create a form on a new page, don’t forget to set the page layout form by clicking the gear icon on the bottom-left panel.
Add a new section by clicking the plus button on the canvas area and add the HTML form by dragging it from the left panel to the canvas area. Place it in the area you want. Next, go to the left panel and paste the HTML code of the form on the HTML Code field under the Content tab.
Publish/update the page once you are done editing it.
Creating a form on Elementor Free using Contact Form 7
If you have no HTML skill and don’t want to use an HTML form template, you can create a form on your Elementor Free using Contact Form 7. There are actually many other form plugins out there. We recommend Contact Form 7 since it is the most popular form plugin for WordPress and completely free.
First off, install the Contact Form 7 plugin. To do so, go to Plugins -> Add New. Type “contact form 7” on the search box and click the Install Now button once you found it. Activate the plugin right away 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 New. Give your form a name to make it easy for you to 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 cursor in the area you want to add the new field in (you can place it beneath or above an existing field). Add a label for the new form with the format of
<label> your preferred label </label>.
Place your cursor right after the label (not the label tag) and select a field from the field tab. You can add a new line break to make your new field looks neater as other existing fields.
Fill out the fields and click Insert Tag (you can leave everything default).
Contact Form 7 will send the submissions submitted via your form to an email. You can set the email from the Mail tab.
You can go to the Messages tab if you want to replace the default messages. You can customize the message after your visitors have successfully sent the form, error message when the form is failed to be sent, and so on.
Click the Save button once you are done editing the form and copy the shortcode.
To add the form you have just created to your Elementor page, create a new page and edit it with Elementor, or you can also edit an existing page. 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 have copied to the Shortcode field under the Content tab.
Publish/update your page once you are done editing it. Contact Form 7 uses the styling format of the WordPress theme you use. You can actually style your Contact Form 7 form, but CSS skill is required.