How To Build A Elementor Contact Page
Hi guys in this video I’m going to show you how to create a contact page for your WordPress website. I’m going to show you how to sign up and activate Elementor pro and then I’m going to show you how to use the contact form. We’re going to use multiple steps and progress bars and I’m going to show you how to use the google maps widget. If that wasn’t enough I’m also going to show you how you can pin multiple locations within the google maps widget.
So sit back relax hit that subscriber notifications button and let’s get into the Tutorial.
Hi guys the first thing you’re gonna need to do is go over to the Elementor website here. Which you can find at the bottom of the Tutorial and choose your price plan. If you haven’t already got one once you have selected which price plan best suits your needs click on the buy now button. You’re then going to be asked to fill out your name and your payment details. Once you have paid you’ll be sent a verification code to your email address.
If you have already got an Elementor pro license then all you need to do is go back onto the main home page and click on the login button on the top row. Then you’ll have to enter your email address password and click on the sign in button. Now that you’re logged into your Elementor dashboard click on the download button on the top row and select Elementor pro expert. This will download the Elementor pro plugin in a zip file once it’s finished downloading.
Head over to your WordPress dashboard from here you’re going to want to click on plugins on the left hand side. Once the page is loaded we’re going to click on add new on the top row then we’re going to select upload plugin. click on choose file and select the Elementor zip file and click open. Now you’re going to have to click on the install now button. WordPress will then install the zip file and all you need to do is click on activate plugin.
You’ll be then taken back to your list of WordPress plugins. As you can see Elementor pro has been added to that list all we need to do now is click on connect and activate. Once the page is loaded all we need to do is connect and activate our license. We do that by clicking on the activate button and that’s it. You’re now free to design amazing websites with Elementor pro.
Now if we go back to a page that we’ve been working on we can see that the padlocks have been taken off of the Elementor pro widgets. We’re free to use them as we please. Now we’re going to create a new page within WordPress. You’ll need to go into pages and then click on add new. Once your page loads you then need to give it a name in the add title box. Because this is our contact page we’re going to type in contact page.
Once that’s done click on edit with Elementor in the top row. Now Elementor is going to load onto our page and the first thing we want to do is remove the header and footer. We can simply do this by clicking on the gear icon in the bottom left hand side of our screen next to where it says page layout. Click on the drop down menu and select Elementor canvas. Give it a second for our page to reload and you’ll notice our header and footer has been removed.
Now we’re going to add our hero image to the top of our page to do this we’re first going to need to click on the purple plus button in the middle of our page and select our section on the left hand side where it says content width. We’re going to select on the drop down box and select full width. This means when it comes to adding our image to our page it stretches across the entirety of the page.
To make sure there’s no gaps around our columns we’re going to select on the drop down menu and select no gap. Underneath where it says height we’re going to select fit to screen. Now we’re going to add our image and we do this by clicking on style in the top left hand side of our screen. Next to background type we’re going to click on the paintbrush and in the image box. We’re going to click on choose image this will bring up our media library and as you can see I’ve already uploaded some images.
I’m going to choose this one for our page click on insert media at the bottom right of our screen. We’re now going to adjust our position of our image and this is because we can only see the left of the image. We want to make it more central. To do this we’re going to have to click on the drop down menu on the left hand side next to position and select centre centre. If we collapse our Elementor menu we can get an idea of what our page will look like.
Once it’s finished at least how the image will look it’s probably a little bit more zoomed in than I’d like. I’m going to change that in a minute if you wanted to show a different position of the image. Once it loads on your page you can simply click on position again and choose which part of the image you want to show. This could be centre left, centre right, top left, or bottom right.
You can also choose a custom area but as I said earlier on I want to zoom out a little bit so I’m going to click on the drop down menu next to size and click on cover. Now if we collapse our menu again we can see we’ve got more of the image showing the next thing I’m going to do is add our header to our page I’m going to add a new section under our hero image and I’m going to drag in a heading widget.
I’m not going to do anything fancy here all I’m going to do is change the alignment and type in our box contact us. In the style tab on the top left hand side we’re going to change the colour of our text to black. Now we’re going to start thinking about adding our contact form. So we’re going to go down to the bottom of our page and we’re going to add a new section with two columns.
On the column on the left I’m going to add an image. Now this doesn’t obviously have to be an image it could be text giving reasons for your visitors to contact you. With my image widget dropped in all I need to do is select my image. No this is obviously not me I’m far better looking. if you want to change the size of that image we can do that by clicking on the drop down menu on the left hand side. Now in the column on the right hand side.
We’re going to drop in our contact form. As you can see it’s fairly basic for some people. This may be enough but for others you will need extra fields. To add more all you need to do is click on add item on the left hand side and I’m going to show you all the fields you can add a little bit later on. But first I’m going to quickly show you how to edit the fields that are already on there and the one I’m going to show you is name.
So if i give that a click you’ll notice on the left hand side. We’ll be given some options and the first option we’ve got is type and this allows us to change which type of information can be inputted into that field. By clicking on the drop down menu it gives us options like adding email addresses, telephone numbers, and URLs. The great thing here is that if someone enters the wrong information.
It will be declined for example if someone tried to add letters to the telephone number box. It would be rejected and they can only proceed if they add a telephone number. Next on the list on the left hand side is label and this gives you the opportunity to tell your visitors what sort of information you want added to that field. Below label is placeholder and in here you can give an example of what your visitors response should look like.
Quickly moving down is required and this is where you choose whether a field has to mandatory be filled in. If any information is missing your visitors form will not send until they add it. With all that explained we’re now going to add a new item. I’m going to click on add new and in the type I’m going to select telephone as you can see on the right hand side our field has been added. All we need to do now is add our label and we’re going to type in telephone and I’m also going to type in number for our placeholder.
We can adjust the fields position on our list by clicking on the name and dragging it up. Now if you’re anything like me you hate filling out long forms you know the ones I’m talking about. The ones that have 20 plus questions that you just have to keep clicking through. What I normally do is get halfway through and lose interest and not fill out the form. Elementor have tried to solve this problem by adding steps and progress bars. Meaning that you can break your form up into bite-sized pieces that people will keep engaged with.
In this part of the Tutorial I’m going to show you how to set that up. The first thing we need to do is click on add item. Again on the left hand side in the down menu. Next to type we’re going to select step at the very bottom of the list. As you can see on the top of our form we’ve got a one and a two. This indicates where we are incomplete in the form. Anything added before this field on the left hand side will be shown on page one anything below will be on page two.
So if we want to break this form up into two parts all we need to do is drag our field up the list as you can see on the right hand side our name and email address is on page one our telephone number and message is on page two if we wanted to add a third part to our form all we need to do is repeat the process and click add item again and select step in our type drop down menu as you’ll notice on the top right hand side of our form.
The third step has been added and any additional items that we now add will fall onto page three. We can keep repeating this process as many times as we like. What I’ll do now is give you a quick preview of what our page and our form looks like so far. To do this all we need to do is click on the preview button next to the publish button on the bottom row. What you’ll see when the page loads is our hero image at the top and if we scroll down the page you’ll notice our contact form.
What I’m going to show you now is what the form will look like. Once your visitors fill it out and how the steps will work the first thing we need to fill in is our name. Obviously the next step is our email address. Once that’s been done we’re gonna need to click on the next button. As you can see step one of the form has been completed and is green. We can go back to a previous page if we need to by clicking on previous.
I am going to carry on filling out the form and showing you the next page. Like before click on next and I’m going to choose a date at random. As that’s all the fields added to our form. We can now click on send I’m now going to show you how to customize some of your form. Back in Elementor we’re going to click on form fields and we’re going to select buttons underneath. As you can see we can change our button size and we can change its alignment on the page below.
This we can change the text that’s displayed within our step buttons. To do this highlight the text inside your box and start typing below buttons. We can click actions after submit if we want to redirect one of our visitors to a page. Once they’ve finished submitting our form we can do that in here. We can also do things like send thank you messages and open and close pop-up windows.
Moving down on the left hand side. We’re going to click on email and this is where we can change the format of our form. Once it’s sent to us if we want to change our email address. We can also change our subject title, so we know what form we’re receiving. If we click step settings on the left hand side we can change the style of our steps. As you can see one of the options is progress bar or we can just display icons.
If we don’t want round icons we can click on the drop down menu next to shape and change it under additional options. On the bottom right we can set our form IDs. If we want to change any of the colours of our buttons and icons. We can do that by clicking on the style tab in the top left hand side. I’m not going to go into too much detail in this section, but you can change all your colours of your text and your buttons.
All you need to do is select the relevant colour picker and choose it from the colour palette.
Adding Google Maps
The next thing we’re going to do on our contact page is add google maps. So the first thing we’re going to do is click on the plus button and select two sections in the column on the left hand side.
We’re going to add a heading widget. Once we’ve added this widget to our page we’re going to click on the left hand side in title. In here we’re going to simply type in visit us underneath our visit us header. We’re going to drop in an icon list and this is so we can add things like our email address and our telephone number. You can look for it by scrolling down on the left hand side or you can type it in the search widget box.
All these icons can be changed. All you need to do is select on the tab and choose the icon library. Once you’ve found the icon you want to use select it and click on insert. You can add as many icons as you want to this list all you need to do is click on add item at the bottom. To change the text next to the icons all we need to do is click in the text box and start typing. Don’t forget to add your email and your telephone number in these boxes.
Once that’s done I’m going to quickly go in and change the colour of our visit us heading. Whilst I’m at it I’m also going to type into the address box. Once all that’s done I’m going to add our google maps into the column on the right hand side. Like before we’re going to have to go into the widget menu and we’re going to have to find google maps.
If you’re ever having trouble finding a widget type the name of it into the search widget box at the top and drag it into your page. As you can see the google maps widget is extremely basic. You enter your location in the top left hand side and below that you can choose how zoomed in you are to the map.
All you need to do here is move the slider bar to the left or right. The final option is to change the height of the map and like zoom all we need to do is slide the bar to the left or right. If your business has multiple locations you don’t have to add a map for each one and you certainly don’t need any additional plugins. As long as your business locations have been added and verified with google all you need to do is type in the name. I can easily and simply show you how.
To do this by typing in the location box McDonald’s restaurants. As you will see every location in London. That is McDonald’s restaurants will be pinned. So if you had 15 bars or offices you could type in your company name and pin all your locations on the map. But do remember you do have to have each one verified by google and when you publish this page all the pins are saved and your site visitors will be able to find the closest branch of your business to them.
If you do want to use Elementor forms. You will need Elementor Pro if you haven’t got Elementor Pro there is a link in the description below. It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to sign up. So that is the very basics of how to set up a contact page. I am going to be creating other useful pages so make sure to subscribe and hit that notifications icon.
Thanks for watching and I’ll see you in the next Tutorials.
