How to add a Contact Us page to your WordPress site

The Contact Us page is one of the most important pages on your site/blog.

This is where your readers and potential clients can request the information from you, give you heads up about something they found broken on your site or simply send you kudos and thank you! Your Contact Us page lets your visitors know that you are accessible and are reachable.

 

In this post, I will cover how to add a plugin that will create the fields you need on your Contact Us page and how to create the page itself and integrate the fields on it. Lets do this!

How to add a Contact Us page to your WordPress site

Step 1: Log in to your WordPress dashboard:

Step1_WordPress_Dashboard

Step 2: Add new plugin:

From the Dashboard, go to Plugins -> Add New.
Step2_Plugins_Add_New

  Step 3: Locate Contact Form 7:

Now, that you are on the Add Plugins screen, in the search field, look for the Contact Form 7, the simplest, easiest to use plugin on the market.
Step3_Plugins_find_contact_form_7

Step 4: Install plugin:

Once the Contact Form 7 plugin is located, click on Install Now.
Step4_Plugins_Install_contact_form_7

Step 5: Activate plugin:

Once the Contact Form 7 plugin is installed, you need to activate it by clicking Activate Plugin link.
Step5_Plugins_Activate_contact_form_7

Step 6: Customize the settings:

Now that the Contact Form 7 plugin is installed and activated, you need to check and, if needed, customize the form settings (I promise, it’s not scary). You will be brought to the Plugins window where you find Contact Form 7 plugin and click on Settings link.
Step6_Plugins_Settings_contact_form_7

Step 7: Contact Forms screen:

You will be brought to Contact Forms window where the Contact Form 7 is managed. By default, you can copy the code listed in shortcode field and use it on your Contact Us page, but, to be safe, open the contact form and make sure that all the fields are the way you like them (see Step 8).
Step7_Plugins_Copy_shortcode_contact_form_7

Step 8: Check the contact form details:

To check the details of your Contact Form 7, hover your mouse over the Contact form 1 link and Edit link will appear. Click on Edit.
Step8_Plugins_Edit_contact_form_7

Step 9: Edit visible parts of the form:

You will be brought to Edit Contact Form screen. In the top part of the screen you can edit the parts of the form that are visible to the visitor (like the word tags that accompany your form field). You can click into them and change them to what you want them to be (or leave them as is if you are happy with the verbiage). If you choose to edit, remember to always stay within the >..< brackets and only change the words.
Step9_Plugins_Edit_visible_fields_contact_form_7

Step 10: Edit the invisible parts of the form:

Stay on the same screen and scroll down. In the bottom part of the screen you can edit the parts of the form that are invisible to the visitor but are important to you (like the email address their request will be sent to or come back from). You can click into the fields and change them to what you want them to be (or leave them as is if you are correct). If you choose to edit, remember to always stay within the <..> brackets and only change the parts of the email address.
Step10_Plugins_Edit_underlying_fields_contact_form_7

Step 11: Save the changes:

Once you are done editing what you need, scroll up and click Save to save your changes.
Step11_Plugins_Edit_Save_contact_form_7

Step 12: Copy the form shortcode:

Now that the form is edited and saved, we can finally post it on the website. Highlight and copy the shortcode you are provided and we will move on to creating the Contact Us page and installing this shortcode in the next steps.
Step12_Plugins_copy_shortcode_contact_form_7

Step 13: Create Contact Us page:

To be able to use the Contact Form 7 code, we first need to create Contact Us page itself. To create a new page, from the Dashboard, click on Pages -> Add New.
Step13_Plugins_create_Contact_Us_page_contact_form_7

Step 14: Update and Publish the Contact Us page:

You will be brought to a blank page screen. Add the title (Contact Us or whatever you want to call this page). In the body of the page, paste the shortcode you just copied from the Contact Form 7. Then click Publish.
Step14_Plugins_Update_Publish_Contact_Us_page_contact_form_7

Step 15: View Contact Us page:

You new page will be saved and now you have a chance to see how it looks. Click on View page link.
Step15_Plugins_View_Page_contact_form_7

Step 16: Your new Contact Us page:

Voila, your new Contact Us page looks fantastic! Celebrate, but next, lets make sure this page is added to your menu where the visitors can see it!
Step16_Plugins_Contact_Us_Page_contact_form_7

Step 17: Add Contact Us page to the menu, part 1:

Chances are your new page will not automatically appear on your menu (and most of the times you don’t want it to). But in this case, we want our Contact Us page to be visible to all, after all that’s the point of having it! To add newly created page to the menu, from the Dashboard, click Appearance -> Menus.
Step17_Plugins_Adding Contact_Us_Page_to_menu_contact_form_7

Step 18: Add Contact Us page to the menu, part 2

On the Menus screen, click the check box next to Contact Us page and click Add to Menu:
Step18_Plugins_Menu_management_contact_form_7

Step 19: Save the menu changes:

The Contact Us page will appear under Menu Structure. Click Save Menu to save your changes
Step19_Plugins_added_to_Menu_contact_form_7

Step 20: See the Contact Us page on the menu:

The Contact Us page is now visible on the website and can be accessed by visitor. Well Done!
Step20_Plugins_Contact_Us_Page_visible_contact_form_7 - Copy

Congratulations! You’ve just installed a one useful plugin, created a page and used the plugin on your page making your site looking very profesh!

You will find that locating and installing plugins is very similar to the one we used here, and so is creating new pages. But, do not fear, I’ll cover how to install other useful plugins in other blog post here on Nightpreneur.com.

For the list of the 5 first plugins I recommend to be installed on your WordPress site, see this post here.

 

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *