How To Add A Contact Form With Elementor

Published: 8 months ago

The most important element on most websites is the contact form. Many websites are designed to convert visitors into leads, and the contact form is where this happens. Users browse through your website, checking out the services that you have to offer, the experience that your company brings to the table, the testimonials that previous customers have, and eventually end up on a contact form.  

graphical user interface

It is here where you want your visitor to enter their information, click the submit button, and transition from a visitor to a lead. You can then take the information that was submitted on this contact form, an attempt to convert the lead into a paying customer. 

If you are like most small business owners, you manage your own website, and it is probably built with Elementor and WordPress. There's a good reason why Elementor is one of the most popular page building plugins out there. It is incredibly simple to set up a website for your business, display what you have to offer online, and convert visitors into leads. 

If you're reading this article, you probably want to know how to add a contact form to Elementor. After all, you just built out a complete website using the Elementor page builder, and now need to add the most vital aspect of any conversion oriented website. 

Adding a contact form with Elementor is fairly simple, but there are a couple of ways to do this, and a couple of best practices to follow, ensuring that  you are generating the most leads possible. 

If you are an Elementor user, you're either using the free version or the pro version. This article will help you add a contact form to Elementor on either one of these pricing tiers. First, let's discuss how to add a contact form to Elementor free. 

graphical user interface, application, website

You have your choice from many contact form plugins. We recommend WP forms or WP fluent forms. Take your pick. Both of these plugins are freely available on the WordPress repository, and come with several features. WP forms is easy to use, and fluent forms comes with some advanced features. If you're looking for simplicity, go with WP forms, if you're looking for features, go with fluent forms. 

Install the plugin, and build your form. Both form plugins include a drag and drop builder similar to Elementor's. 

graphical user interface

Virtually every WordPress form builder plugin operates with Shortcodes. You create your form in the builder, and then you use the shortcode to insert it into your page. With Elementor, that is no different. Build out the form in your respective form builder plugin, then do exactly that in your Elementor page builder.  

The Elementor free version comes with a shortcode widget. Drag and drop the shortcode widget onto the page, paste in your form shortcode, and save the page. On the front end, your new contact form will show up on your Elementor website’s frontend.  

graphical user interface, application

If you are looking for something with more functionality, you're going to need to pay for it. We have two recommendations if you are looking for a paid form plugin. The first is Piotnet forms which is a one time payment. This is relatively advanced, and comes with a drag and drop builder interface that is almost identical to Elementor. You can easily style and build out forms in a front end interface. 

If you need enterprise level features an integrations with email marketing platforms, we definitely recommend taking a look at WS forms. This is a relatively new entry to the crowded WP forms plugin market, but because of that it comes with a ton of features at an affordable price for most businesses. 

Piotnet Forms review: https://isotropic.co/piotnet-forms-review-better-than-legacy-competitors/

WSform Review: https://isotropic.co/ws-form-review-enterprise-level-features-but-is-it-worth-it/

If you are using Elementor pro, you have several new options. Elementor pro comes with a fully featured contact form builder, which you can use to create and insert a form directly from the builder. This is a good option if you need basic functionality. when a user submits content into the form, it is emailed directly to you. There are also additional integrations to third party services like MailChimp and other email marketing tools. 

A drawback is that you don't natively have access to a database of all entries in your WordPress website. However, that is easy to remedy as there is a free plugins that enables the database functionality for you. 

You can also follow the method above if you are looking to add a contact form to Elementor with a bit more power. 

We hope that this article helped you add a contact for to your Elementor – built website.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram