How to create a WordPress website contact page

A contact page on your website is a typical page a website visitor looks for.  The contact page should contain all your contact information like phone number, email address and physical address.  If your business has a physical location, it is a good idea to integrate a map so that people on smartphones can get directions.

A contact page can have a website form which allows visitors to enter information and then submit it.  After submitting, the website can send you a notification email with the data that was entered.  A confirmation email can also go back to the website visitor.

The contact page should be included in the main menu.  A link should also be included in the footer.

A great way to add a WordPress website form to your contact page is using Ninja Forms.  Ninja Forms is a free plugin that by default has a pre-made contact form.  The form can be added to a WordPress page on your website.

When a website form is submitted, Ninja Forms will send a confirmation email and a notification email.

Ninja Forms can be extended with paid add-ons.

What is a website contact page

I’d like to talk about how to create a WordPress website contact page. So what is a website contact page. Basically, a contact page is one of the typical website pages you’d put on your website. So it’s a, it’s one of the standard pages. But it’s also a way that you can list all your contact details. Again, this is sort of just one of the norms that people expect to have on a website page, which is time contact page. And then on that page, you’ll be able to list all your contact details. And those contact details can basically be any way that you’d like someone to reach out to you or your company. So phone number, if you have that, definitely an email address. If you have a physical location, you can put that there too.

Map

If you do have a physical location, it is helpful on your contact page to add some sort of link to different mapping software. So that basically, if they click on something, especially if they’re on their smartphone, it can bring up a set of directions automatically, because you’ve integrated that technology in there. If you happen to be a service area business, meaning that you go out to other people’s homes to promise versus you may have a area that that range that you do your services. So having that information on your contact page to helps because again, if you can’t serve that person, you might as well tell them up front, why they’re trying to contact you.

Contact form

One nice thing to put on the contact page is basically a contact form, which is another way of saying a website form. So a technology where people input data into fields that have titles, and then submit that information. The reason this is nice is they don’t have to have an email program, they don’t have to give you a call, they can basically just type in the information, you also can ask in effect by the fields that you want to have filled out if there’s specific questions you need answered, to kind of move it on where if say, for example, on an email, if you just have an email link, and they send an email, you may have to have a back and forth conversation because you didn’t get all the information yet upfront. So website, excuse me, a website form is a nice thing to have. And then what happens after that webform is filled out, there’s usually a submit button. And then that information the website takes together and will actually send a message.

Email notifications

But it is nice on these cases to add a little more extra technology to that. So for example, that may be the person who’s submitting, if they leave their email address, they get a notification back that you actually received their information from the contact form. And then, of course, you get a notification that somebody submitted something on there. So the submit button can actually do a few different things.

Links to contact page

And then finally, once you’ve got this contact page created, you want to go ahead and put links to it on different places. So it should be one of the things it’s in your main menu. But also people sometimes scroll down on the bottom in your footer and look for the contact information there. So a couple good places to put that. So people where they typically look for it.

Demonstration of creating a contact page on a WordPress website

So let’s go ahead and do a demo on a contact page. So first, we’re going to go ahead and create a contact page. Again, we’re using WordPress as our website platform. We then go ahead install WordPress plug in that will help to enable the form to show up. We’ll then add that form to the page. And then we’ll test it to show you how the whole thing works together. Okay, let’s go ahead and I’ll show you how to create a contact page in WordPress, add a form to it and how to submit that form. And what’s the result of that.

Create WordPress page

So since again, we need to create this page where I’ll go ahead and log into our WordPress website. So you’ll go ahead and go to your website that hosts your WordPress website. Go ahead and login which again would be the URL slash WP admin. That would take you to your login screen where you’ll enter your WordPress username and password to login. And then once you’re on your WordPress dashboard, we’re ready to go ahead and get started with the actual steps. So the first step is you need a page in order to make your contact page. So again, there’s a couple of different ways to do that. Well here we’ll go to pages and all pages. And technically you already have one but I’ll go ahead and just create a second one just so again, you can be refreshed on that step. So pages we just say Add New. We’ll go ahead and give the page a title. So we’ll call this contact page and type in some sample text here. Okay, everything’s good there.

If we wanted to, there are a couple things you might choose to do one week gave the title of a contact page. And that’s what’s going to come up in the URL. Again, you can call it contact contact page, contact us, I probably say go with just the word contact, because this is a test page. And we already have the real one set up. I’ll just let this one go. But be aware of what that full URL is. Anyways, once you have information, go ahead and just hit Publish. And go and view the page. And there’s our contact page with sample text. So we’ll go ahead and go back to our all pages. And we’ll go ahead and create or delete that page we just created because again, we’re going to go ahead and use the one that has already been created here for a different tutorial I did. So again, just view this contact page that I previously created. So again, just contact page. This is contact page, here’s the URL slash contact. And it’s already been integrated into the menu up here.

Website Form

So the next step we want to do on our contact page is actually add a website form so that we can have people enter their information and submit it. So the way we need to do this is first to add a WordPress plugin that will give us that form technology. So we’ll go ahead and back to our dashboard. We’ll go to our plugins, we’ll hit Add New. And then we’re going to go ahead and search one. So the plugin I’ve selected for this experiment is ninja forms. So just type in Ninja forms and hit search. And there it is.

Ninja Forms

So go ahead and install that. The reason I picked ninja forms is couple one, it does have a free version to get started with though there is a paid version. And it creates a default form. So you don’t even have to worry about that. And it records the information that is submitted into the form into the database WordPress database, so you don’t lose the information there. There are many other form plugins that work with WordPress, and you’re more than welcome to use those. Again, I’m just showing you this plugin, do the situation or do the things I just mentioned. So now that it’s been installed, we’ll go and activate it. And we’ll see that it is in an activated state. So now we’ll notice over here in our dashboard navigation, we now have a ninja forms once we’ll go to ninja forms and dashboard.

Default form

And we’ll see by default that we already have a contact me form created. So let’s go and just take a quick look at that form. So we can just click on the name here. And this opens up into the form field. So we’ll notice that this fall form already has a name field, an email field, a message field and a button. And this is kind of one of the reasons I like ninja forms because you’re done. That’s your typical form. And you may not need to add anything else to it. However, if you want to, there are ways to do that. So we could basically change click up here on the form field, we have the ability to hit a plus sign here. And then we get the large amount of different types of fields that we can use.

So these are typically a single line text one, the message is probably a paragraph text one. And there are different ones if you wanted a checkbox or a date picker, or image or radio. And then there’s even some additional ones that have special attributes around them. So like for example, the email field, we’ll already kind of do some error checking to make sure it’s an add sign in it and things like that. Again, first name country. So again, there’s a lots of different ways you can customize this one, including some layout ones and some other miscellaneous fields, again, much more than what we want to do just to get a simple contact form on our website page. But again, there are ways to continue to enhance this form. If you were to hit done there, now we’re back into these if you hit the little gear up here, you have the ability to duplicate it deleted or edit it.

Edit default form

So we’ll go ahead and do an edit. And we’ll see that we can change the label. So if we said first name, for example, then we’ll see that change over there. We’ll go ahead and just leave this as full name. You have the ability to make it a required field and that’s that little Asterix so somebody doesn’t fill in information, it will come back and remind them to do that. And then here under display, there are few other things you can do, you can have a default value that it’ll show up a placeholder that could show up. So say, for example, enter your name here. And if you wanted to put a description and things like that, so we’re going to hit Done. And then we’ll see it says enter your name here as a placeholder there. So that’s just sort of what that does, we’ll go in a race that can just show that really, you don’t have to do any of this to get going, I will just quickly look at the email, again, very similar in what it’s doing there.

And we’ll finally look at the message field. And see, again, the pretty much similar things are, so anyways, pretty much done there. Next, we’ll go over here and look at emails and actions. And we’ll see that there’s a bunch of different things that are said here. We’ll come back to that in a second when we look at how the email is sent. And if we will make some changes there. And then finally, we’ll look at the advanced one here, which are a few other things. But again, let’s just get to integrating it. And we’ll come back to some of these. So now that we have everything kind of want, again, we don’t even need to change this, we’ll go ahead and hit publish, and x to go back to the dashboard there. Okay, we’re back to there.

Add form to WordPress page

So there’s a couple of different ways to put this on the page. One is, again, WordPress technology called a shortcode. So we’ll keep that in the back of our minds. So we’re going to do is kind of keep two screens open. So we can go back and forth on this. So what I’m gonna do is I’m gonna go up here to pages and all pages, but this time, we’ll just right click and say open link in New Tab. So I kind of go back and forth without having to do as many clicks. Okay, so now we’re gonna go ahead and edit the contact page. And we want to add the ninja form onto this thing. So here’s our contact page, or title, our texts, which again, you can put anything you want. So we want to go ahead and add that form.

So we’ll kind of hover around too, we get the little plus sign here to add a block will do that. And we’ll now see, there’s actually a ninja form block, we’ll go and click on that. And then we can drop down this and select the contact me form there. And there is our form there. Let’s go ahead and do a quick preview, we do a desktop preview. Okay, so we have our title, we have the text we had, the form itself is putting a headline there called contact me. And again on may put in this warning that fields marked with a red asterisks are required. And everything’s there. Looks pretty good. We’ll go ahead and update our page for that. And we’ll view the page. And everything’s looking really good. So basically, to step back, and kind of update where we are, we create a page, install a plugin, in this case, Ninja forms. We accepted its default form. And we added it into our page and updated it. And lo and behold, we have a contact form page.

Ninja Form notification options

So now what do we do? Well, if you’re a user, you would I mean, sorry, if you’re a visitor to your website, you would fill in that information. But we’re a little unsure what happens after we hit the submit button. So let’s go back into our form and check out a few other things where we’re there. So as I mentioned before, when we were in Edit, there was a way to look at different things. So now is when we want to find out what those settings are and then change those for our so not the forms field. But actually the email actions once. So we see that there’s a few different things automatically turned on here. One is this store submission. Which in this case, we won’t actually use we’re more interested in the email confirmation.

And we’ll see that by default. So a confirmation is the one that’s going to go to the person that submitted it. So we’ll see that it’s actually name course change. The two is set to this kind of personalized thing. So email or field dash email fields, refer back to the form fields, and we had the one that’s called email. So whatever they type in to the form, an email will automatically be put in here. We can control the subject, and we can control the email message. This point there’s this kind of again, dynamic code here. says all field table will be put in there. But if you kind of go over to these different options here, in addition to if you just always just do that, we’ll call this, this is the body text. But if we wanted to add, say the name, specifically point out, we’ll see how here we have the ability to look at those different fields.

So we have the field for the name, the email or the message, you can actually pull a whole bunch of stuff from WordPress. Again, there’s even other information from there. So again, these are just dynamic fields, or excuse me, dynamic data that occurs because of this, that you can add into the email to kind of do an effect merge man mail to use the old Microsoft Word thing. So just again, to see how this is, we’ll go say what to use name. And then we’ll insert the Name field, right there, just again, see how that is getting some reason you could do that. And then if you wanted to add attachment, so we’ve kind of finished that. So again, the company in this case, again, you can name it, anything you want me to say email confirmation, this is the email that goes back to the person who submits the form.

Ninja Forms notification options

Now we’ll go ahead and look at email notification. And in this case, we’ll see that the email notification goes to the system, admin email. So this is the email address that is the main one for the WordPress website. And the reply to is the email that was typed in in the theater, the subject is automatically new message from and then they insert the name that was put there. And an email message has the message, and the name and the email. So again, this is all done for you.

WordPress system email address

Now one thing I would suggest changing here is probably the system admin email, because it may or may not be the one that you’re expecting. If you don’t remember what you set up your WordPress admin is, but in case you’re wondering, let me show you how to check that. So if we go back into here, again, I just open up another tab. So again, don’t have to keep closing different things. The way to check that is actually in your dashboard, go down to settings, and general. And we’ll see that our administrative email address is right here, home services company, w eight@gmail.com is our system. So if that email matches what you want, great, if it doesn’t, then this is the place that you want to change that to be a different who the notification email is being sent to. So we’ll go ahead and leave it as is just to see how it works.

Success message

And then finally, look at this success message indicator. And so the success message is actually what occurs when the form is actually submitted. And then it is shown on the page. So it’s gonna automatically say form submitted successfully, a confirmation email was sent to field calling email, which again, is the email that was entered in the field. So again, that’s another benefit. All this is already set up by default when you do ninja forms. So really, almost just take it as it is.

Test website contact form

So finally, let’s go ahead and watch this run through the entire process. Okay, so go back to our contact page. One good thing, when you’re making changes, you have multiple windows like that, just go ahead and do a refresh. So it should make sure you get the latest information. And we’ll go ahead and type in the information. So for the name, we’ll type in test name for the email, just to make it easy, I’m going to use the same email for both of them. Again, slightly confusing. Oh, here’s a perfect example. When I clicked away, it said, hey, there’s nothing here, this is a required field. And that’s actually kind of cool. In fact, actually, let me erase that. And up, there it goes, comes up again, we haven’t seen it here. But let’s just try to submit here. And again, we’ll see that the submit button is actually grayed out.

So again, great feature built in that you don’t have to worry about. So going back to a test name, paste in that. And you know, just because this is required, and now the submit button is active. Let’s go ahead and try to submit it. And again, we see that that one’s there. So that’s where again, those required fields are great. Okay, so we basically entered the information we want, we got our name and email and or text message one and go ahead and submit says processing and we’ll see that it automatically removes a form inputs in this information. If we recall, this was exactly what was in the success. here to show you again, so we put context together with what we’re doing. That was the SEC. Success success message that popped up. So that’s basically how this works to go through.

Check email notifications

Okay, so next, let’s go ahead and check our email address and see that information. And what those email notifications and confirmations were. So I’ve logged into my gmail account. And I don’t actually see the messages here. But unfortunately, if you go down through, you’ll notice in our spam folder, it will actually see those two messages. So sometimes they show up as spam. And that’s just unfortunately, part of the problem. So when I’ll go ahead and look at the results of this, but let’s again, compare these back to the form builder. So we have the email confirmation here. And the action name the two in the subject. So the subject is submission confirmation. So if we go back into our email there, the subject line. Again, this is partly why it was marked as spam because it thinks it might actually not have come from it. Part of this is to do with the fact that it’s us sending it checking it from that email. So Gmail is saying, Hey, I didn’t send it. So this might be fake. Again, this is, shall we say, it’s subject for another lecture.

But anyways, we’ll go ahead and see that there’s this there’s the title, if we go back to the form builder, we’ll see the deema message, this is the body text. And there’s this the body text, and then the automatic field name, and all fields will see that basically, there is the name, test name was automatically and then this text right here is the actual one, that is the all field subject there. Let’s go ahead and go back there. And we’ll look at the second one. So we’ll go ahead and open up the email notification one here. Again, we’ll see that the subject is new message from and then I’m actually inserting the data that was put in the name. So if we go back here, we’ll see new message from test name. Again, same thing, warning about phishing test message, one test name, we’ll go back, and we’ll see that there’s the message and the field name. So hopefully, that it shows how these two relate to what you’re sending, based on the settings that you’ve put into the form itself.

Ninja Forms add-ons

So the last thing I just want to go over real quick is just a few bits of information about ninja forms just to again, show you where there’s more information you can do. So if we go back to the beginning, and we’re in the dashboard for the form. Again, we’re in the dashboard here, we’ll notice that it has the form, so you can have more than one you can add new to create those. So again, you can use these for other places, you might want to enter information on your website.

There are different services that ninja forms can allow. And there’s ways to integrate this with a number of different services and different things. One thing about ninja forms, basically, to add additional functionality, you need to pay for that. So this is sort of what is called a freemium model, you get the free plugin. But then if you wanted to do things like multi part forms or conditional logic, you can actually go and click learn more, which will go out to the ninja forms site, and they’ll talk about that feature and have different options if you want to buy that for pricing.

One great thing on the forums is we can actually look at the submissions. So if we go ahead and hit submissions here, we’ll see which form will go ahead and click the first one, which is contact ID one. And then we’ll see that information shows up. So here’s the fields, we created name, email, message and the date. So if you didn’t get the email for whatever reason, like again, it was marked as spam, you can always come back in here to the submissions and look at the information that’s actually been inputted on the form and you can download it so that’s a great thing. You can import and export information. In ninja forms.

There are then some settings that you can do you want to choose how different things look in Ninja form. So again, there’s lots of information here. There are ways to get additional help on ninja forms. So documentations here, you can actually submit a report report, report request. And then finally, as I was mentioning with the back to this has a premium model you can get by different things and stuff like that. So to again summarize what we’ve done basically is We have created a page. We then downloaded a plug in, in this case ninja forms in order to put a contact field there. We then looked at the different default options that are already present. We did a test by inputting information. And then we check the results, which are email confirmation back to the person submitted, plus an email notification to us so that we know somebody submitted things. And then we looked at ways that we can enhance this by adding on different paid features within ninja forms. So I hope this explains how to basically set up a contact form for your website, add a form to it and how the email works with that. I hope this helps.

Conclusions on creating a contact page

So let’s include complete conclusions about a contact page. Again, a contact page is a place where you put your contact details. So things like phone number, email address, physical address, you have a lot of contact pages have a website form because it makes it easier to send, fill out all the information and send without having to worry about starting an email program or anything like that. When you submit your form, you’re actually typically going to want to send that as an email, definitely to yourself, but maybe as a notification back to the person submitting and you want to put your contact page in multiple places on your website so people can find it.