If you are starting a WordPress blog on Bluehost, you will have to create several important pages and one of these will be a contact page.

As your blog becomes more and more popular over time, readers will want to contact you for a variety of reasons which might include support, advertising or partnership opportunities, so it’s a good idea to create a contact page.

Before you start this tutorial, please make sure you have already created a custom email address on Bluehost first, as you will need this to complete the tutorial. You can do that here.

WordPress makes this simple as there’s a plugin for everything you can imagine, so in this tutorial, I would like to introduce you to Contact Form 7, a free WordPress plugin that allows us to create basic or even more advanced contact forms.

How to add a Contact Page to WordPress Blogs on Bluehost

Install Contact Form 7

Before we can access the settings for our contact form, we will need to first install the Contact Form 7 WordPress plugin from within the WordPress admin panel.

Contact WordPress Bluehost 2

After logging into your WordPress admin panel from your Bluehost account, you can navigate to the correct section where you can add a new plugin, which is located by hovering your mouse over “Plugins” and then clicking “Add New”, as shown above.

Contact WordPress Bluehost 3

After the page loads, enter Contact Form 7 into the search box and it will automatically search for the plugin, then you can click the “Install” button on the correct plugin as shown in the screenshot above.

Contact WordPress Bluehost 4

Now you can click the “Activate” button and it will automatically install and setup the plugin as well as add a settings menu tab in WordPress admin so you can manage all the settings for your own contact forms.

Edit Default Contact Form

Contact WordPress Bluehost 5

As we have already installed the Contact Form 7 plugin, all we need to do now is visit the settings area of the plugin and change a couple of things to make it work correctly and to get the shortcode we need to embed this form on a new page.

Contact WordPress Bluehost 6

When we previously installed Contact Form 7, the plugin creates a new form by default, so to make this process quick and easy, click on the “Contact form 1” link, as shown above.

Contact WordPress Bluehost 7

There is a shortcode to insert this contact form in a page (shown on the top arrow) in which you simply copy and paste into the content section when creating a new page and it will automatically load the html and settings of this form.

The section shown below (shown on the bottom arrow) is where you can edit the fields of the contact form to add radio buttons, check boxes, additional text fields, phone numbers, file uploads and more.

To keep this quick and simple, we will not edit the default fields right now, so when you do insert the shortcode in your contact page, your visitors will have fields to enter their name, email, subject and message, before submitting the form.

Contact WordPress Bluehost 8

You will first need to click on the “Mail” tab, as this is the section of the Contact Form 7 plugin sections that allows you to choose where the emails are sent after someone fills out and submits the form and will look similar to the screenshot above.

Contact WordPress Bluehost 9

You’ll need to create a custom email address on Bluehost first, once complete you can enter the custom email you created into the 2 sections shown in the image above, then click the blue “Save” button on the top right.

With the default settings on this section, you will be able to determine that the email you have received has come from your new blog and all the fields are in the correct place so you’ll be sent their name, email, subject and the message in the email the form sends you.

Add New Page For Contact Form

Contact WordPress Bluehost 10

Once you have saved the new email settings, you can now copy the shortcode that will enable you to embed this contact form into a new page by left clicking over the text shown on the image above which will automatically highlight the shortcode, then right click and select copy.

Contact WordPress Bluehost 11

Now you can add a new page as we have done before by clicking the “Add New” option under the “Pages section, enter a title for the page at the top and then right click over the text that says “Start writing or type / to choose a block” and select paste (that will paste the shortcode we copied earlier).

Contact WordPress Bluehost 12

When you paste the shortcode, WordPress will automatically insert the contact form we created earlier into the page, then you simply click “Publish” on the top right of this page to publish the contact page with the contact form embedded.

Contact WordPress Bluehost 13

If you want to add text or images above the contact form, then click the title to activate the title block, then hover your mouse over the block near the bottom middle as shown above, then click the “+” icon to add a new block.

After adding any changes, always remember to click the “Update” button on the top right of the page so your changes are saved and published online.

Contact WordPress Bluehost 14

After you have added all the blocks you want and updated the page, click on the “View Page” link to see the new contact page you have just created.

Contact WordPress Bluehost 15

As you can see, your contact form is now successfully embedded on your new contact page and the default WordPress theme (Twenty Twenty) has automatically added the page to the menu which we will edit shortly.

Test Your Contact Form

Let’s test that the form works first.

Contact WordPress Bluehost 16

Enter your details, as if you were a reader of your blog and was asking a question (using an email you already own), then click the send button at the bottom of the page to submit the form to the email we plugged into the contact form settings.

Contact WordPress Bluehost 17

Login to the email client for the email address we created on this tutorial on Bluehost and as you can see from the image above, the contact form has sent successfully, so you now know everything is setup correctly and ready to go.

Add Contact Page To Menu

As we know the contact form works, we can add this page to a new menu.

We should create a new menu if using the default “Twenty Twenty” theme as this theme adds its own default menu and places pages in its own order, where as our own menu can be edited and we can choose the order.

Contact WordPress Bluehost 18

Go back to the contact page we just created, hover your mouse over your blog name in the top left and click the “Menus” link on the dropdown menu.

Contact WordPress Bluehost 19

Enter the name of your new menu like I have in the image. I have named my menu “Header Menu” as this theme has different menu locations, so I name this to make sure I know which is the menu I want in the header, then click “Create Menu”.

Contact WordPress Bluehost 20

The contact page will be listed on the left hand side (underneath the “Add menu items” in the “Pages” section), so select that and click “Add to Menu” which will add the contact page block to the menu on the right.

In order to ensure this new menu replaces the default menu, select “Desktop Horizontal Menu” under the “Menu Settings” section, then click “Save Menu”.

Contact WordPress Bluehost 21

If you visit your blog now, you will see that the contact page can be accessed within the main navigation menu in the header across your entire blog and you know it’s working correctly after the test we did earlier, so that is now complete.

Author

I've been obsessed with WordPress for over a decade and after building 100's of websites in my spare time (while working nightshifts) WITHOUT coding or web design experience, I think it's time for me to share what I've learned so you can enjoy WordPress as much as I do. Please share my content if you find it useful!

Write A Comment