In this article, I will go over creating a contact page using Elementor.
A contact page will generally consist of a few common elements that are consistent throughout websites. You will often find – email addresses, phone numbers, social media links, and perhaps an address and map. Being able to have visitors contact you easily and efficiently is important so they can get the answers to any questions or queries they may have.
So let’s see how we can create a contact page with Elementor.
Step 1 – Preparation
I will assume that you already have WordPress installed along with Elementor and Elementor Pro. If you need help to install the plugins you can check out our Plugin Guide.
Step 2 -Create or Edit a Page
After ensuring you have everything you need ready to go you’ll need to create a new page or use an existing one. You will need to open this page using the Elementor editor.
Step 3 – Page Heading Section
We’ll start by placing a page heading section at the top of the page and giving it a title. To do so, click on “+” icon and create a single column section. We need to add a background image now. I used an image as a background. Check out our blog post on adding backgrounds in Elementor if needed. To make the background image more clear, you can now apply padding, and adjust the height and location of your text to your liking. I’m using the advanced tab in the Edit section to apply 10% top and bottom padding. After that, we’ll drag and drop the heading widget from the widget list to add a page title. Then modify the text and style as needed.
This is essentially everything needed in the top header section of the page. If you would like to add a sub heading or text below the title you can do so.
Step 4 – Contact Details Section
Now, we will add a new section where we will place the contact information and contact form.
Some people used will only add a contact form but it is not enough, if your customers wish to contact you in another/ their preferred way then they will be unable to. You should make it as easy for your customers to reach you as possible, you may miss out an opportunity if they have to search and look hard for the information.
For this, first we will add a section with two columns and will add 3% padding at the top and bottom of the section from advance tab. Now search for the icon list widget and drag and drop the Info list widget on the page.
Step 5 – Linking Contact Details
So, first, we’ll add a contact number with a phone alt icon, an email address with an envelope icon, and a location with a map marker alt icon to the content tab. You are free to add as many lists as you want.
You can also simply type (tel:YOURPHONENUMBER, for example, tel:992012456464) in the link area to link the phone number. You can also include mailto before the email address to link the email. (For example, mailto:[email protected]). This is how you can link the phone number and email address. You can also include a hyperlink to the address. Simply add the Google Maps link to the address icon list.
Step 6 – Edit the Icons
Now we will edit the icon widget, where we will style contact information.
Then, using the style tab, we’ll increase the spacing between them to something that looks good.
The icon color and hover color can then be changed, as well as the icon size. You are free to do whatever you wish. Then you’ll see the same choices for text, including the ability to change the text’s color and hover color.
You may also adjust the text’s typography to your liking. It is however recommended to keep this styling consistent throughout your site.
Step 7 – The Form
In the next column, we will add a contact form using the form element of Elementor Pro. To do so search for the form widget from the Elementor widget search bar, then drag and drop it into the page.
Then you can see, Elementor gives you a default form with the necessary fields such as name, email, and message.
If you want to add a field to your Elementor form, click “Add Item“ and you will see a new field appear in the form. Then, under type, you will see a range of field types you can choose whatever you need.
The “Label” choice comes next. This is the label text that appears above each field to help people understand what they need to fill out.
There’s also the “Placeholder” option. When a user hasn’t entered any data, the placeholder appears in the field area. Using the placeholder text as an example of what you want the user to enter is helpful.
After that, you can enable or disable the required option from there. This option will not allow the user to submit the form if they left any field blank that you make required.
Then you will also get the option to set input size, show or hide the label and required mark.
Step 8 – Button Editing
You can now edit your buttons in areas such as button size, adjust column width, alignment, changing the text of buttons, etc.
After that, we will set up where our form submissions will go. To do that, go to the email tab and you will see the options of – To, Subject, Message, From Email, From Name, Reply-To, Cc, and BCC.
In the To field, we will add the email address where we would like to receive the submitted form. After that, we will add the subject of the form that will be visible as the subject title in our email that we will get after someone submits a form.
Then, in the message field, you can choose which fields from your input form are sent. Using the shortcodes, you can set just how many of these will be sent to you. You’ll find the shortcode under form fields, where you can use either field to have it. Then, to see the shortcode, go to the advanced page after selecting the field and here you will see the shortcode. However, if you would like all of the field information after submission, simply type [all-fields] into the message box.
Having all the form fields sent to you is generally best practice.
Step 9 – Reply to
Next, you can reply to details for the email by entering the Email and From Name.
After that, there is the Reply-To set this to allow you to tell your email program where it should send the reply to. Reply to the form sender’s email address directly or leave it as the default if it is not necessary. This will fill with the website’s admin email by default, however, you’ll likely want to change it! Click the dropdown box to get the “Email Field” option and select it. This is enough to set up a basic form for a website.
Step 10 – Custom Messages
After that, you’ll see a metadata box, which you can customize to be submitted along with the form submission. You can also use html or plain depending on how you want your email to appear in your inbox.
When people upload the form, if they get a mistake, or if they skip a required area, you can send them custom messages. To do so, go to the Additional options tab and tick the box beside Custom message. After that, you’ll see the text-editing boxes. Default notifications will be set up. You are free to modify it as you see fit.
Step 11 – Branding
To match the style with your brand or website, you have to style the form. You’ll find a wide range of choices and settings to configure your contact form exactly as you want to, from spacing, padding, and colors to field sizes, labels, inputs, buttons, and more. You can adjust everything from here to match with your website style.
Step 12 – Google Maps
After adding and styling contact form we will add a new section where we will add a google map. To add google map simply search on the elementor widget search bar. Then drag and drop the google map widget into the section. Then just copy the location you want to add and paste it in the location field. You can control the zoom and height option from here. You can also style the map from style tab.
If you’ve set up the Google Maps widget, your contact page will be ready.
