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). By default, your form will consist of four fields: name, email, subject, and message. Give your form a name to make it easy for you to identify it in the future. If you want to create a new form instead, you can go to Contact -> Add New. Activate the plugin right away once installed.Ĭontact Form 7 comes with a default form (a contact form).
Type “contact form 7” on the search box and click the Install Now button once you found it. We recommend Contact Form 7 since it is the most popular form plugin for WordPress and completely free.įirst off, install the Contact Form 7 plugin. There are actually many other form plugins out there. 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. Creating a form on Elementor Free using Contact Form 7 If your HTML form uses external CSS, images, or JavaScript for the styling, make sure to upload the folders that hold the CSS code, images, and JavaScript to the root directory of your website. Publish/update the page once you are done editing it.
Next, go to the left panel and paste the HTML code of the form on the HTML Code field under the Content tab. 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.Īdd 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. Of course, you can also edit an existing page. To get started, create a new page and edit it with Elementor ( Pages -> Add New). W3docs has over 60 HTML form templates you can download for free. Or, you can download an HTML form template from the internet. This method requires you to have an HTML skill to create the form. Creating a form on Elementor Free using HTML widget 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. 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.Įlementor, be it the pro version or the free version, comes with two widgets that you can use to create a form.
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.