Two pages that every website should have is an about page and contact form. In this tutorial, you’ll learn how to add and customize a WordPress contact form via a plugin called Contact Form 7, create an about me page, and link these and other pages in your primary navigation menu bar.
How to Delete a WordPress Page
Most installations of WordPress come with a sample page. While the sample WordPress page is great for demonstration purposes, you don’t actually want it published on your website. Let’s learn how to delete it.
From the sample page itself, click on Edit Page at the top in the WordPress admin bar.
On the right side of the screen within the Publish box, click on the link that says Move to Trash.
After deleting the sample page, you’ll be redirected to a list of all your WordPress pages. Feel free to delete any other pre-installed pages that you don’t want including the Privacy Policy page. You can do this by simple clicking on the Trash link that’s associated with the page that you want to remove.
As you can see, there are multiple different ways to accomplish the same task of removing a WordPress page.
How to Create an About Me Page on WordPress
In order to add an about me page, or any other page for that matter, click on Pages then Add New from anywhere in your WordPress dashboard.
Next, you’ll be taken to a blank page. Here you can write the content of you About Me page.
While this WordPress tutorial won’t discuss specifically how to write your about page, you’ll want to explain the purpose of your website and introduce yourself to your readers. It’s also a good idea to upload a picture or two.
As far as the title of your page is concerned, I suggest that you don’t name it “About”. While it’s certainly okay for the URL of your about page to be yourdomain.com/about, you should choose something more engaging. For example, the title of my about page is “Meet the Cereal Guru”.
When you are satisfied with the content, title, and URL of your about page, click on the blue Publish button. You can see your live about page by clicking on the View page link at the top.
Change WordPress Menu Text
As you’ll notice right away, your about page has been added to your WordPress menu. By default, the menu items in your website’s navigation bar inherit the name of the page. In other words, since I called my about page “Meet the Cereal Guru”, that’s what it’s going to say in the menu.
To change the text or the name of a menu item in WordPress, we have to first add a new menu. In this case, the menu that we create is going to hold all of the links that we want to put in our primary menu navigation bar.
Start by going to your admin dashboard. Click on Appearance then Menus.
Under the Menu structure section, type in “Navbar” for the menu name. Click on Create Menu.
On the next tab called Manage Locations, associate the newly created “Navbar” with the Primary Menu by selecting it from the dropdown. Click on Save Changes.
Back on the Edit Menus tab, let’s add the about page to the menu. To do this, click on the check box next to the about page and click on Add to Menu.
Finally, to change the text of the menu item, expand the about page section and change the navigation label to “About”.
To finish, click on Save Menu. Now when you visit your about page, you’ll see that the navigation label in the menu has a different name than the page title.
WordPress Contact Form 7 Plugin
Now that we have an about page, let’s add a contact page to our WordPress website.
From your WordPress dashboard, click on Plugins then Add New. In the plugins search box, type in Contact Form 7.
You’ll see a bunch of contact form plugins, but we’re intersted in the one by Takayuki Miyoshi.
Click on Install Now. After a few seconds, click the blue Activate button. That will take you to your WordPress plugins page.
On your WordPress plugins page, click on the Settings link for Contact Form 7.
Customize Contact Form 7 Example
By default, the Contact Form 7 plugin comes preinstalled with an example contact form. Let’s start with this and customize it for our purposes.
Click on Edit below the Contact form 1 example to be taken to the Contact Form 7 editor. Copy and paste the following example into the Contact Form 7 editor and customize as necessary.
<label> Name
[text* your-name] </label>
<label> Email
[email* your-email] </label>
<label> What would you like to ask me or let me know?
[textarea your-message] </label>
[submit "Click Here to Send Me Your Message"]The markup above will yield a contact form on your website that looks similar to this.
Before saving you changes, change the name of your contact form from “Contact form 1” to “Contact Form”. We’ll be using this name shortly when you embed the contact form into the contact page of your WordPress website.
Next, in the Contact Form 7 Mail tab, make the following changes. Replace instance of Cereal Guru with the name of your website and email address.
tony@cereal.guru
Cereal Guru Contact Form <contact@cereal.guru>
New message from [your-name] on [_date]
Reply-To: [your-email]
From: [your-name] <[your-email]> Message Body: [your-message] -- This e-mail was sent from a contact form on Cereal Guru (https://cereal.guru)
Keep in mind here that the your-name, your-email, and your-message placeholders will be replaced with the name email, and message that the user types into your WordPress contact form.
Also, I want to point out here that if you want to learn how to setup a custom email address for your website, check out my tutorial on that here.
Add Contact Form to WordPress Page
Now that we have a contact form, we must embed it into a WordPress page. This WordPress page will be our contact page and contain the shortcode for our contact form.
From your WordPress dashboard, click on Pages then Add New.
Give your contact page a name. I named my contact page “Send the Cereal Guru a Message” which sounds a lot better than just “Contact Me”.
Then in the body of your page, type the following.
Let's talk! Feel free to reach out to me by using the contact form below. [contact-form-7 title="Contact Form"]
The important part here is the [contact-form-7 title="Contact Form"] line. This is where we are embedding the contact form into our WordPress page. If you called your contact form “Contact Form”, then you can pretty much just copy and paste from above. Otherwise, you’ll have to change the title between the square brackets to match the title of your contact from from the Contact Form 7 plugin.
Finally, change the permalink of your page to yourdomain.com/contact and click on Publish.
Add Contact Page to WordPress Menu
Now that we have a custom contact form embedded into a WordPress page, the last thing we need to do is add a link to the contact page in our primary navigation menu.
Similar to how we did this above with the about page, go to your admin dashboard and lick on Appearance then Menus.
Simply check the box next to the contact page and click on Add to Menu.
Again, let’s change the text of the menu item. Expand the contact page section and change the navigation label to “Contact”.
Click on Save Menu.
UP NEXT: Block Spam from Your Website
Now that you have two new pages on your website—a contact and about page—let’s take care of blocking spam comments from your website with a WordPress plugin.
In the next part of this WordPress tutorial series, we’ll be installing a WordPress plugin called Anti-spam that blocks automatic spam comments on your website. It’s pretty much just an install-and-go lesson, so I highly recommend you take a couple minutes to complete it. You’ll save yourself from manually sifting through potentially thousands junk comments in the future.
As always, if you have any questions about creating or adding a contact form or about page to your website or blog, let me know in the comments below. I’ll be more than happy to help you out.
