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.
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.
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.
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.
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
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.
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.
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.
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.
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
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.
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).
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.
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.
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.
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.
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.
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.
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.
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”.
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”.
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.