Adding Contact Forms #WordPress #ContactForm7

Posted September 13, 2016 by Kayla in Wordpress / 0 Comments

Tags: , ,

Contact Forms _ContactForm7

The last time I showed you how to add a contact form using Jetpack. This time, I’ll be showing you how to add contact forms using Contact Form 7, another free plugin from the WordPress repository. Read about plugins to find out how to search for and install Contact Form 7.

After installing Contact Form 7 you will notice a new option in the sidebar of your WP admin page, called “Contact”. The plugin comes with a pre-made standard contact form. Mine was named “Contact Form 1”.

If you click “edit” you’ll notice that it looks more complicated than the Jetpack one but I decided to try it out since many people recommend it. It was fairly easy to use but has so much more room for personalisation. Also, if you don’t install Jetpack then you’ll probably need to install a plugin to create contact forms. The cool thing I noticed is that you could technically add your contact form directly into a widget, although I haven’t tried it.

Contact-form-7-1If you hover over the “Contact form 1” you will see an option to edit it. Go ahead and click “edit”.

The first tab, “Form”, displays the name, email, subject and message area for your reader to fill in and a send button. You can insert new fields by placing your cursor where you want a new field – make sure it’s not between anything that starts with <label> and ends with </label> or starts with [ and ends with ].

This is how the text in this section would look:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Click on the type of field you want to enter, example a drop-down. A screen will pop-up for you to enter the details of your field.

Contact-form-7-2

For example: you can indicate if it’s required, the name of the field, and in this case, the options. You can include an ID or Class [for CSS selectors] if you want to control how it looks based on a new or existing ID or Class. [For more advanced users – not covered in this article]

Then click on over to the “Mail” tab.

Here’s where you can set up how any messages sent to you using this form will look in your email. If you added any new fields, you’ll need to add them here using the [field-name] as it is on the “Form” tab. Since the contact form has exactly what I need, I just left this page as is. You’ll just use the field name shortcode like a placeholder for the information that the reader will enter.

Then moving on to the “Messages” tab.

Here you can edit all the different error and confirmation messages that the reader will get when they use the form like, “Thanks! Your message has been sent.” to “Invalid email”.

Be sure to save your changes on each tab before moving on to the next.

The last tab is for customising the settings. That’s for advanced users but for now we’re just adding a simple contact form.

Now that you’ve saved all your changes you just need to create a new post or page, and in the body you will copy the code for the form from the Contact Form 7 page. It should look something like this:

[contact-form-7 id="182" title="Contact form 1"]

Save your page and now you have a contact form page.

Check out my post on adding menus and widgets to add your new contact form to a menu or widget to make it available to your readers / customers.

 

Do you want posts like this directly in your inbox? Join my mailing list.

Leave a Reply