How To Create An Elementor Contact Form

Create and customize an Elementor Contact Form with a few clicks

Are you looking for some simple ways to establish long-term relationships with your target audience? If you answered yes, you must include a contact form on your website. Despite the fact that WordPress has made the entire procedure simple for its customers. Users of Elementor, on the other hand, advance one step in this area. You can quickly add and customize any sort of contact form to your website with the Elementor Contact Form widget. It also includes all of the needed elements and functions, allowing users to engage with your website with ease.

Today, I’ll teach you how to use the Elementor Contact Form widget to construct a form in just a few clicks.

What You Will Need:

 

1. Insert The Elementor Contact Form Widget To The Page Of Your Choice

To begin, search the Elementor Widgets for the Form widget. Now go to the page where you want to connect with your subscribers or leads and add a contact form.

 

elementor contact form

 

Click and drag the form element into the page itself.

 

 

2. Customize The Input Fields In The Form

Elementor has already pre-populated your form as you can see. It has all of the fields that every contact form should contain:

  • Name
  • Email
  • Message

Now that you have these three fields by default, it’s time to alter them to meet your needs. You may do so by looking at the Content section of the Form settings. You will be introduced to Form Field in this section. It also contains:

Form Name – Name Of The Form

Form Fields – You may put as many fields as you like in this field. There are other options for duplicating and removing files. Simply click on any field to see its settings. The things you will receive are as follows:

  1. Type: Select the input type. Here are the different types –
    • Text
    • Email
    • Textarea
    • URL
    • Tel
    • Radio
    • Select
    • Checkbox
    • Acceptance
    • Number
    • Date
    • Time
    • File Upload
    • Password
    • HTML
    • Hidden
    • reCAPTCHA
    • reCAPTCHA V3
    • Honeypot
  2. Label: It is the field’s name that will appear on the form. It will also appear in any emails you get from customers or leads.
  3. Placeholder: It is the frontend display name of that field.
  4. Required: As a Required field, you may turn it on or off. It indicates that the user must complete the section prior to submitting the form.
  5. Column Width: This is where you can control the width of the input field

3. Advanced Section

This tab has a limited number of options. However, if you don’t understand them, the current ones become more complex.

elementor contact form 4

 

  • Default Value: This is distinct from the placeholder and the field’s default value. If you haven’t included any value in the submission, this value will be sent in.
  • ID: It saves the data in the field and you don’t have to change it.
  • Shortcode: This code will assist you in retrieving the field from another page. You don’t have to utilize it if you don’t want to.

4. Customize The Submit Button

You may personalize your Submit Button in this section.

  • Size: In this area, you can adjust the size of the button
  • Column Width: Decide the width of the submit button
  • Alignment: ALign the position of the button
  • Icon: Add an icon to the button
  • Text Of Button: Add the desired text to the button
  • Button ID: This is optional. This section gives the button a unique ID for use down the road

 

5. Adjust Actions After Submit

A typical question arises when someone creates an Elementor contact form. And that is why, after submitting the form, nothing happens. So, let’s find out what the solution is.

You’ve done a fantastic job with the Elementor Form. That is not a problem. But, my buddy, if you don’t put up the Actions After Submit area, you won’t get any feedback.

You’ll have a lot of alternatives with Elementor types of actions. It will be much easier to integrate with third-party services. Such As:

  • Drip
  • HubSpot
  • Mailchimp
  • Slack
  • Convertkit

Working with these services is simple because of Elementor’s built-in connectors. Additionally, you may connect with Zapier using the Webhook function. Zapier can connect to over 1000 services, which is an interesting fact. As a result, it will help you by serving as a link between the services and the form.

Elementor Form Actions Include:

  • Email
  • Email2
  • Mailchimp
  • Redirect
  • Webhook
  • Drip
  • ActiveCampaign
  • GetResponse
  • Convertkit
  • MailerLite
  • Slack
  • Discord
  • Popup

So, go to your form’s Actions After Submit option. When you click on the Add Action area, you’ll see all of the options listed above. Select what you require.

Assume you’ve selected the Email action. It will include an Email tab, which will be used to display the findings to the website’s admin user.

 

Select the Email2 option to send an email to the form user or the person who submitted the form.

Within Email, here are the options that are at your disposal:

  • To
  • Email Subject
  • Email Content
  • From Email
  • From Name
  • Reply-To
  • CC
  • BC
  • Meta Data
  • Send As

Set the requirements for your form action and configure it so that it integrates neatly with your website.

 

6. Elementor Contact Form Messaging

The Elementor forms editor is always available to personalize your form to your specifications. When something goes wrong with the form, such as an error or a successful submission, the user should be notified.

You may personalize that message right here. This is a more complex Elementor contact form function.

Select the Additional Options and switch the Custom Messages slider to Yes.

 

You now can edit the four form responses:

  • Success Message: This message will be displayed to the user who has successfully completed and submitted the form
  • Error Message: If an unknown error occurs when submitting the form, this message is displayed to the form user
  • Required Message: When a form field is needed but the user hasn’t filled it out and submitted the form, this message appears
  • Invaild Message: When the user enters an incorrect cellphone number or email address, this message appears

7. Adjust The Styling Of The Elementor Contact Form

Your form should have a neutral appearance that suits your website. Consider how dull it would be if it didn’t match. Elementor, fortunately, provides custom style possibilities. It’s a piece of cake.

Select the Style tab. There will be a plethora of choices and options for customizing the look of your contact form.

8. Publish You Elementor Contact Form

You’ve done a fantastic job setting things up. It’s now time to make your form available to your site’s visitors. To update the form set, go to the bottom of the page and click the Update button, as seen in the figure below.

 

Final Thoughts On Elementor Contact Form

I hope this tutorial has clarified any misunderstandings you may have had. Actually, the creation and appearance of your contact form is entirely up to you.

I strongly advise that you alter the form’s Actions After Submit and Additional Options sections. You will not receive any reflection of your effort if you do not modify these parts, which is really disheartening.

 

 

 

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents