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!
Step 1: Log in to your WordPress dashboard:
Step 2: Add new plugin:
Step 3: Locate Contact Form 7:
Step 4: Install plugin:
Step 5: Activate plugin:
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.
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).
Step 8: Check the contact form details:
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.
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.
Step 11: Save the changes:
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.
Step 13: Create Contact Us page:
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.
Step 15: View Contact Us page:
Step 16: Your new Contact Us page:
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.
Step 18: Add Contact Us page to the menu, part 2
Step 19: Save the menu changes:
Step 20: See the Contact Us page on the menu:
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.