WordPress School: Contact Page

In Lorelle’s WordPress School free online course we are going to take a break from the article series and work on your next Page in WordPress. Save the second post in the article series as draft. We’ll come back to it.

As a reminder, WordPress Pages are content elements that exist outside of the reverse chronology of post content. They are the timeless content on the site. On your test site for this course you edited the About, a Page installed on WordPress by default. Today we add a second Page.

The Contact Page is the next most important content area on your site. It is the path through which someone might contact you, bringing you money, ideas, offers, business, and relationships.

A typical contact web page on a site consists of an introductory paragraph and a contact form.

If your test site is on WordPress.com, fantastic. If your test site is self-hosted, please install the Jetpack WordPress Plugin and activate the Contact Form feature.

Creating the Contact Page

Here are the step-by-step instructions followed by the specific instructions for each step.

1. Click Pages > Add New
2. Title the Page Contact
3. In the Page content area, write an introductory paragraph urging the reader to use the form below to contact you
4. Set the cursor below the paragraph on its own line and click the Add Contact Form button above the content toolbar
5. Edit the default form as needed and Insert Form into the post
6. Save as Draft and preview the Page, editing as necessary
7. Press Publish when you are satisfied

I See My Email Address in the Contact Form!

Before you freak out, everyone sees their email and contact information in the contact form when they are logged into WordPress.com or the WordPress site.

WordPress and your browser attempts to be helpful by pre-populating the form. Just ignore it. That is an example of how it would look to others. The world will not see your contact information in the form. They will see their own or a blank form.

Here are the step-by-step specifics to help you create your Contact Page and contact form.

DO NOT FILL IN THE FORM ON THE ADD NEW FORM SCREEN. This is an example of how the form looks. You may add and remove fields and move them around on this screen. Every class, there are always those who see a form and start filling it out. Love it. Don’t.

• Contact Page Title: By web standards, the Contact web page is titled “Contact,” not Contact Us, Contact Me, Contact the Company, Contact the Webmaster, or any other variation. In WordPress, Pages sit on the main navigation menu, so why clutter and waste precious real estate property on the nav menu with unnecessary words.
• Introductory Paragraph: The introductory paragraph should encourage someone to use the form to contact you. The phrasing should represent the voice and overall style of your persona. This is another chance to let the reader get to know you by your word choices. Write something like “Thank you for visiting my site. If you would like to contact me, please use the form below.”
  • DO NOT INCLUDE YOUR EMAIL ADDRESS. Do not publish your email address anywhere on your site. This is for security reasons, and is unnecessary, and messy. The contact form is emailed to your email inbox.
  • Include your brick and mortar address and location: The Contact Page is a great spot to feature information on your store’s location, if you have one. If you need to provide your mailing address and phone number, you may add them here, too. A map might work here as well. These are optional.
• The Contact Form: In the section below I will explain the WordPress shortcodes used to generate and customize the form. Your contact form needs may be different for your site and company, so it is important to understand how the form elements work together to generate a contact or other form type.

Creating the Contact Form

Let’s explore the specifics of the WordPress shortcodes used to generate the contact form.

The generated results look like this:

[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]

These are known as WordPress Shortcodes. They are abbreviated code that generates bigger code elements. We will cover these in depth later. Notice that you do not see the form in the Edit Page screen. Save draft and preview the Page to see the form.

Let’s look at each shortcode in the contact form.

• [contact form]: This is the starting shortcode that instructs WordPress to generate a form. The codes that follow are the various fields that make up the form.
• contact-field: The contact-field is the design element within a form that creates a empty form box to be filled in, checked, or completed in some way. There are many types of fields in a form.
• label=’Name’: The label in a contact field form is the title of the form field such as name, email, website, comment, phone, address, etc. It is the visible text above the form field. In this case, the label is “name.”
• type=’name’: This is the type of field within the contact form. This field type is name, a field used to enter the person’s name. There are name types of fields in a contact form including email, website, text, dropdown, checkbox, radio, etc. The textarea generates a large field for comments and messages. Different types of fields maybe required to customize the form.
• required: The required form element is a parameter of a contact-field that sets the field to be literally required before the form is submitted. The user must complete that field. Not all fields should be required, but ensure you have set the ones you need to have for that form.

In the above example, you have form fields for the name, email, website, and comment, a very simple contact form. Your form needs may differ. You may require a phone number, hours of contact, or other information.

There are a variety of types of form fields. Experiment by adding a RE: or Regarding set as a text field for people to write in why they are contact you. See how that looks then edit the form and change it to a drop down list, adding the various reasons why someone might contact you such as to buy, ask a question, get a project bid, or other reason. Experiment with this to create a form that meets the needs of your site.

Assignment

Your assignment today is to create the Contact form following the instructions above. As a reminder, the specifications are:

1. Title the Page “Contact”
2. Write an introduction to the form
3. Add the form

In future lessons, we will be exploring a wide range of options for using the contact form within your site for more than just contact information.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---