Holla if you hear me!

Contact Form 7 – Holla if you hear me!

This is skipping ahead a bit – Prerequisites for this tutorial are a hosting account with a WordPress install.

People have to be able to easily reach you if you want to expand your network, get gigs, or sell your product.  You probably already have an email address and social networks and these are great tools, but it is critical to have a contact form on your website so that visitors can reach out to you without navigating off of your site.

Installing Contact Form 7

This tutorial will show you how to add a custom contact form to your WordPress website. More advanced users can use the very excellent official “Getting Started With Contact Form 7” at the Contact Form 7 website.

The plugin that we are going to use to create your contact form is called Contact Form 7. Contact Form 7 is an industry-standard contact form plugin with over 1 million active installs. The best part about Contact Form is that it is FREE. So let’s get started –

Install Contact Form 7

Add A New Plugin

From your WordPress Dashboard, hover over plugins and click on “Add New”

Installing Contact Form 7

Type “Contact Form 7” in the search field in the top right of the screen and press enter. Contact Form 7 should show as the first listing. If you are unsure, make sure the plugin says “By Takayuki Miyoshi” under the description. Once you’re sure, click on install.

Screen Shot 2015-12-11 at 8.09.41 PM WordPress Plugin Activated

If you’ve done this correctly, you should see a screen similar you the one above. Once the option becomes available, click “Activate Plugin” and you will see your plugin list again with a “Plugin Activated” notice as well as Contact Form 7 in your Plugin list.

Creating and Adding A Contact Form

Screen Shot 2015-12-11 at 8.12.39 PM

Now that you’ve installed the Contact Form 7, click on the “Contact Forms” link under “Contact”. This will display a list of the contact forms available on your WordPress website.  Click on “Edit” to edit the pre-loaded form.

Screen Shot 2015-12-11 at 8.12.57 PM

This will give you a field to edit your form along with several different options. I am going to add a drop-down menu to my contact form.

Screen Shot 2015-12-11 at 8.13.24 PM

Click in the code and add a line for your new field. Then click on “drop-down-menu” to bring up the customization features for that field.

Creating a custom field

Fill out the form. For now, you can ignore “Id attribute” and “Class attribute” because we are going to use the styling defined by our theme. Make sure to just put one choice per line in the “Options” field. When you are done, click on the “Insert Tag” button and it will add the shortcode to your form.

Adding Fields to a Contact Form

Your shortcode should have been added to the form.  Copy the code around one of the other field and use it to style your new custom field.

Customizing a Contact Form

I’ve copied the code and given my field a title “What do you need help with?”.  We have two more steps to complete our form.

Contact Form 7 Shortcode

Click on the “Mail” tab and put your email address in the “To” field.  This will make sure that your form’s submissions are sent to you!

Mail Tags in Contact Form 7

Click in the “Message Body” field and add your new mail tag to the email you are going to receive.  Contact Form 7 makes this easy by providing the tags from your contact form beneath the tabs at the top.  When you are done, click “Save” and you can copy the shortcode and insert it in any WYSIWYG (What You See Is What You Get) area on pages and posts to display your contact form.

Feel free to use mine if you need a hand!

    Your Name (required)

    Your Email (required)

    Subject

    What do you need help with?

    Your Message

     

     

     

     

    Adam

    Adam Compo is a secular extraterrestrial and full-time wizard.

    Leave a Reply

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