In Elementor, you don’t need to install an extra plugin to create a contact form. It already has a native widget — the Form widget — to allow you to add a form to a page. This article will show you how to use the widget on your contact form page.
Contact page itself is one of the crucial pages of a website. The page make it easier for your visitors to reach you out.
The Form widget itself only available on Elementor Pro. Meaning that you need to upgrade to the pro version if you still use the free version. Not only you can use the Form widget to create a contact form, but you can also use it to create other form types, including email opt-in form, user registration form, file upload form, and so on.
How to Create a Contact Form in Elementor
When creating a contact form using the Form widget in Elementor, you can set where the form data to be sent to. Whether to your email account or the default form submission manager of Elementor.
If you are new to Elementor, you can read previous article to learn how to use it. In this article, we will go straight to adding the Form widget to the canvas area. Simply add the Form widget from the widget panel to the canvas area as follows:
As you can see, the Form widget automatically creates a form that consists of three fields. You can go to the settings panel to customize the form. To edit an existing field, you can simply open it. You can change the field type, replace the default label and placeholder, and set it as a required field if you want. To remove an existing field, you can simply click the X on the field you want to remove.
To add a new field, you can simply click the ADD ITEM button. The Form widget itself supports twenty field types.
Setting the Form Action
As we mentioned earlier, you can send the form data (submissions) to your email account or Elementor’s built-in form submission instead. To set the destination, you can open the Actions After Submit block under the Content tab on the settings panel. Select an action you want to set on the available field (you can add multiple actions). In this example, we select Email.
If you set the form action to Email too, you can open the Email block to set the email address to receive the form data. As you can see, you can also set the subject if you want it.
By default, Elementor will include the content of all form fields. If you want to include content from specific fields only, you can paste the shortcodes of your preferred fields to the Message field. For instance, the setting below will only send the content of the message field.
To get the shortcode of a field, you can click the ADVANCED tab on the associated field on the Form Fields block.
Setting the Messages
When the form data is successfully sent, your visitors will see a successful message beneath the form. Similarly, they will also see an error message when the form data is failed to send. You can replace these default messages, as well as two other messages, from the Additional Options block under the Content tab on the settings panel. Enable the Custom Messages to replace the default messages.
Styling Up the Form
Once you are done making the basic settings on the Content tab on the settings panel, you can switch to the Style tab to style up the form. There are five blocks you can open here.
- Form
You can open this block to set the gap between form columns and rows, the label spacing, typography (font family, font size, font style, and so on) of the form label, and the text color of the form label.
- Field
You can open this block to set the typography of the field text as well as the color, background color of the form fields, border size and color of the form fields, and border radius of the form fields.
- Buttons
You can open this block to style up the submit button. You can set things like the typography of the button text as well as the color, background color, border radius, border size, border color, and text padding. To set the button size, you can do so from the Buttons block under the Content tab.
- Messages
You can open this block to set the typography as well as the text color of the messages.
- Steps
You can open this block only if you want to create a multi-step form. You can read our previous article to learn more about how to create a multi-step form in Elementor.
Once you are done styling up the form, as well as the page, you can publish your page.
Potential Error
One of the common errors when you set the form action to Email is the form is not sent. Instead, you will see the following message.
Elementor and most contact form plugins — including Contact Form 7 — use the default mail delivery function of WordPress called wp_mail. This function depends on the send_mail function belongs to PHP to work. Unfortunately, not all web hosting providers enable the PHP’s send_mail function. If this is the case, your form won’t be sent. Instead, you will an error message as the one above.
To fix the issue, you can install and configure a custom mail delivery service on your WordPress. Read this article to learn more. Alternatively, if it is possible, you can ask your hosting provider to enable the PHP’s send_mail function.
The Bottom Line
Elementor is the most complete page builder plugin. It comes with a bunch of design elements (called widgets) to make it easy for you to add elements to page, including a contact form via the Form widget.
While you can use the Form widget to create a contact form from scratch with your own design, Elementor also offers premade form templates you can make use of. You can even create a contact page (complete with contact form, of course) from a template.
