Want to know how to create a Contact form in Elementor?
The contact page is one of the crucial pages of a website. It is often used as a parameter whether or not a website is approved. Elementor comes with a native widget - the Form widget - to let you add a form to a page. This article will show you how.
The Form widget itself is only available on Elementor Pro. Which means you have to upgrade to the pro version if you are still using the free version. Not only can you use the Form widget to create a Contact form, but you can also use it to create other types of forms including email registration form, user registration form, the file upload formEtc. ...
How to create a contact form in Elementor
When you create a Contact form Using Elementor's Form widget, you can set the location where the form data will be sent. Whether in your email account or in Elementor's default form submission manager.
In this article, we'll jump straight to adding the Form widget to Elementor's edit box. Just add the Form widget from the widget panel to the edit box as follows:
As you can see, the Form widget automatically creates a form consisting of three fields.
Read also: How to add a price grid in Elementor
To edit an existing field, you can simply open it. You can change the field type, override the default label and placeholder, and set it as a required field if you want.
To delete an existing field, you can simply click on the X of the field you want to delete.
To add a new field, you can simply click on the button ADD AN ELEMENT. The Form widget itself supports twenty types of fields.
Defining the form action
As we mentioned earlier, you can send the form data (submissions) to your email account or to Elementor's built-in form submission. To set the destination, you can open the block After Submit Actions under the tab Contents from the settings panel.
See also: How to create a rounded image in Elementor
Select an action that you want to define on the available field (you can add multiple actions). In this example, we select E-mail.
If you also set the form action on E-mail, you can open the block E-mail to define the e-mail address for receiving the form data. As you can see, you can also set the subject if you want.
By default, Elementor includes the content of all fields on the form. If you want to include only content from specific fields, you can paste the shortcodes of your preferred fields into the field. Message
For example, the parameter below will only send the contents of the message field.
To get the shortcode of a field, you can click on the tab ADVANCED in the associated field of the block Form fields.
Definition of messages
When the form data is submitted successfully, your visitors will see a successful message below the form. Likewise, they will also see an error message when the form data is not submitted.
See also: How to create a team member section with Elementor
You can override these default messages, as well as two other messages, from the block Additional options under the tab Contents from the settings panel. Activate the custom posts to override the default messages.
Customizing the form
Once you are done making the basic settings under the Content tab from the settings panel, you can switch to the Style to customize the form. There are five blocks you can open here.
Form
You can open this block to define the space between the columns and the lines of the form, the label spacing, the typography (font family, font size, font style, etc.) of the form label and the color of the latter's text.
- Field
You can open this block to define the typography of the text of the field as well as the color, the background color of the form fields, the size, the border color and the border radius of the form fields.
- Buttons
You can open this block to customize the submit button. You can set things like button text typography as well as color, background color, border radius, border size, border color, and text fill. To set the size of the button, you can do it from the block Buttons under the Content tab.
- Messages
You can open this block to define the typography as well as the color of the text of the messages.
- Steps
You can open this block only if you want to create a multi-step form.
Once you are done customizing the form, as well as the page, you can publish your page.
Potential error
One of the common mistakes when you set the form action to E-mail is that the form is not sent. Instead, you will see the following message.
Elementor and most contact form plugins - including Contact Form 7 - use WordPress' default mail delivery feature called wp_mail. This function depends on the function send_mail which depends on PHP to function.
Read also: How to add a testimonial slider in Elementor
Unfortunately, all providersWeb hosting do not activate the function send_mail of PHP. If so, your form will not be sent. Instead, you will get an error message like the one above.
To resolve the issue, you can install and configure a custom mail delivery service on your WordPress. Alternatively, if possible, you can ask your hosting provider to enable the feature send_mail of PHP.
Ultimately
Elementor is one of the most comprehensive page builder plugins. It comes with a number of design elements (called widgets) for you to easily add elements to the page, including a contact form.
Although you can use the Form widget to create a contact form from scratch with your own design, Elementor also offers form templates that you can use. You can even create a contact page (complete with the contact form, of course) from a template.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create a contact 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.
...
