Hey guys! Joshua Mayo here back with another tutorial. 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”.
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.
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.
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.
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.
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).
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”.
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.
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).
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).
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.
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.
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”.
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.
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.
By the way, if you’d like to learn how to start a blog for yourself, head over to my definitive guide on starting a blog.
