How To Build An Elementor Contact Form

This tutorial introduces user-friendly tools and shows you how to create a clean Elementor contact form, perfect for any website.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

 

Hey guys! In this tutorial, I’ll be walking you through Elementor’s form widget. You’ll learn how to customize this widget to create a clean, Elementor contact form perfect for any project. Keep in mind that this form must be built and edited using Elementor Pro, which is a part of their paid membership. Let’s get started!

Step 1: Open Elementor Editor

Sign in as an admin on your WordPress website. Viewing your dashboard on the back-end of your site, you may begin editing with Elementor by first creating or selecting a Post of your choice. There you will find the blue button that reads “Edit with Elementor”.

Edit with Elementor from the WordPress Dashboard
Edit with Elementor from the WordPress Dashboard

If you are on the front-end of your website, you will have a gray bar at the top of every page that allows you to click “Edit with Elementor”. Once clicked, the Elementor side bar opens to the left.

Edit with Elementor at the top of any page view

Step 2: Create New Section

When the page you are editing is empty, you will initially see the lined box asking you to “Drag widget here”. The burgundy plus sign creates a new section. Select the burgundy plus-sign and, for the pruposes of building a single contact form, select the first box option. This means you are creating a single column section.

Creating new section
Creating new section

Step 3: Nest Column

Nesting is a design choice made when more than one element will need to be edited without affecting other elements around it. In this case, we’ll be nesting our form in order to resize it, without affecting the added title and description text later.

Now that you have an empty section, add the Columns widget into the section you’ve just created.

Two columns will appear side by side. Delete one of the columns by hovering over either of them, right clicking the grey box and selecting delete.

Deleting the extra column
Deleting the extra column

Step 4: Add Form Widget

Elementor’s widget sidebar will display 3 categories: Basic, Pro, and General. In the Pro category, find the widget labeled “form”. Drag and drop the form widget into the section you’ve just added. As you drag, before dropping the widget, you will see a blue line highlighting where it is being placed. Make sure you are placing it inside of your new section.

Finding the form widget under Pro category
Finding the form widget under Pro category

If it lands outside of your section, or between pre-placed items on your page, you can still move it around as needed. This is done by hovering over the form and finding the blue pencil button to the top right of the widget; select and hold this blue pencil in order to drag and drop where necessary.

Step 5: Resize Form Widget

As you hover your mouse over the form, the nested section it is placed in will highlight in blue. Making sure the section is placed correctly inside of original section, click the (:::) icon next to the (x).

Editing the nested section
Editing the nested section

Elementor then opens the section’s editing options in the sidebar. Edit the “Content Width” to 600, making sure the dropdown menu also reads “boxed”.

Editing content width
Editing content width

Step 6: Customize Form Fields

Hover your mouse over the form widget. Click the blue pencil button in the top right corner; this opens the form’s editing options. The editing options give you 3 categories to edit: Content, Style, and Advanced.

Blue pencil // Editing categories
Blue pencil // Editing categories

In content, a list of Form Field names will read “Name / Email / Message”. For the contact form we are creating today, delete the “message” form field by using the (x). Keep the “name” field but duplicate the “email” field until you have 3 “email” fields altogether. You can duplicate by selecting the icon just before the (x).

Duplicate icon
Duplicate icon

Clicking the form field’s name (i.e. Email) in the editing sidebar, notice the options that expand; this allows you to edit the chosen field’s Type, Label, Placeholder, Column Width, as well as the option to toggle whether the field is required to be filled in.

  • Type has a drop down menu to change the display and function of the field.
  • Label changes the form field title name, visible on the outside of each field. You have the option to turn all labels off if you wish to only use the placeholder as your field identifier (for design purposes). *However, for the back-end, and for personal clarity when receiving a completed form, always fill out Labels. Even when they’re turned off, it’s good to have visibly organized titles for customer/client responses.
  • Placeholder edits the text inside the field. If you are using the label, but wish to hide the placeholder text, simply erase the text in the placeholder naming option.

*In this tutorial, we turn off the labels. Please take a moment to look over our final product below, in order to match the text we chose as placeholders. Make sure to change the first and last Email field’s Type, to “text”. A text field type indicates to the form that there is no special action required (i.e. validating information).

Final image of the Elementor contact form we'll be creating in this tutorial.
Final image of the Elementor contact form we’ll be creating in this tutorial.

Step 7: Adjust Form Size

Before moving on to the Style category of the editing form, we’ll be modifying the size of our form. Set the input size of both the Form Field and Submit Button to medium.

Set input to size Medium
Set input to size Medium

Step 8: Curve Form Corners

In the Style category of the Form editor, locate and open the “Field” option. In it you will add a Border Radius of 50; the radius makes the form corners round. Do this for the Button option as well.

Editing border radius in the Style category
Editing border radius in the Style category

Step 9: Center Submit Button

Going back to the Content category of the Form editor, locate and open the “Submit Button” option. Using the Alignment tool, center the button. Next, change the Text written in the button from “send” to “send message”.

Editing Text and Alignment in the Content category
Editing Text and Alignment in the Content category

Step 10: Increase Form Row Gap

By increasing the row size, the form fields will be given more breathing room. Click edit on the form, go into Style category and increase Row Gap to 20.

Step 11: Adding Title And Description

At the top right corner of the pink Elementor editing bar, select the square icon in order to return to the main widget screen. Drag drop the Title widget into the main section, outside of your nested section, as seen below. Align your text to be centered and change the wording to what works for your website. You can also match what we used in our final product.

Title sits outside of nested section
Title sits outside of nested section

Edit the color, size, font and more by editing the text in the Style category and selecting typography. Next you will add a description by going back to the main widget bar for the Text Editor widget. Drag and drop it just below the Title. Change your text as you see fit, and center align.

Step 12: Final Touch

Your Elementor contact form looks great! For the final touch, edit the form’s button color in the Style category. There are two options to edit for the button: Normal and Hover. The hover option allows you to have fun with making your button come alive as your mouse hovers over it.

Simply clicking the box that is next to the words Background, Text, and Border Color, opens the color options. Set your button’s background color in the normal option, to the color of your choice. Edit the text color to be white.

Then click to the Hover option and add a border color and text color to match the button’s Normal color. As for the background, drag the outermost line to the bottom so that it is clear when hovering over it.

That’s it! You’ve successfully created an Elementor contact form.