Contact Form 7 is a great choice for a robust and flexible plugin for WordPress.

It allows you to create dynamic forms for your wordpress site with little to no HTML or CSS knowledge.

it has many features including AJAX form submitting, CAPTCHA protection, Akismet spam filtering, file uploading, etc.

This eBook is an introduction to the Contact Form 7 plugin for WordPress.. Basic knowledge of the WordPress admin panel is a must. With various examples, this eBook covers how to display a form on your page / post, and how to customize your forms and the way email is sent to you in your inbox.

Download Contact Form 7 from WordPress Plugin Directory.

Displaying a Form

So let’s start by displaying a form on your page or post. First, go to the sidebar in your admin panel of wordpress and find the menu header name ‘Contact’, click on the edit link, which is a sub menu below it

Contact Form 7 Edit Link

Right out the box, after installing the plugin there will be a default form already created for you. It will be named ’Contact form 1″. There will also be a snippet of code which reads; [{contact-form 1 "Contact form 1"}].

Contact From 7 default form name

Contact Form 7 Form Code

Copy that code that is highlighted with the Brown background and head over to create or edit a page or post. Now, all you would do is paste that code that you copied into your page or post editor and either update, publish or preview your post or page, to see the form on the front end of your website.

Contact Foirm 7 Short Code

Contact Form 7 - Form

Now visitors to your site can find the form and start submitting messages to you.

Next, let’s see how you can customize your form and mail content.

Customizing a Form

I personally think that the default form is a quick way to get a form up and running to start allowing you visitors to send request or questions to you, so that you can start interacting quickly. However, there are so many more fields and actions that you can apply to the form.

You can start adding extra fields to your form by adding ‘tags’ into the ‘Form’ field section of the Contact Form 7 admin panel. The code in the form field will be displayed as such, [text* your-name]. These codes are called “tags” in Contact Form 7.

Contact Form 7 Type and Name

A tag is somewhat intimidating at first, but no worries! You do not need to take a university course to get this part of it, because Contact Form 7 has a generator that will generate the code for you based on what you tell it you want it to do.

As you saw from above I introduced you to the [text* your-name] code. The tag, ‘your-name’, is one of the most important pieces of the code that you will use because it can be used in the mail (email) section of the administration panel of Contact Form 7.

Contact Form 7 - Mail Section

Customizing Email

You can edit the mail (email) template section in the admin area of your form by using the same code as you did for the form field section, minus the ‘text*’ portion of the code.

The tags you can use in a mail (email) template contain only one word in square brackets like this: [your-name]. You will notice that ‘your-name’ is the same as the name in the form tag which was shown in the previous example. Both of the tags have the same name, but not the same code.

[text* your-name] – Form field

[your-name] – Mail field

In the mail section of the administration section, [your-name] will be replaced by the user’s input value when submitting a form, which corresponds to the form field, which, in this case, is [text* your-name].

Contact Form 7 - From Field

Tag Syntax

Contact Form 7 allows you to edit the templates of your contact forms and your mail (email headers and email message body) with various “tags.” Contact Form 7 determined ‘tags’ as being defined as a string of characters (most commonly text), enclosed or surrounded by square brackets ([]).

AS you have noticed the redundancy that I have used up to this point in pointing out the difference between form template tags and mail template tags. That is because I want you to GET IT! It makes all the difference in the world to get these two correct or your forms will not send correctly.

[text* your-name] – Form field

[your-name] – Mail field

Form Tag Syntax

A tag in a form template (“form tag”) will be replaced with an HTML element which represents an input field that your users will interact with on your site

Type

This is the most important factor, as it defines what type of HTML element will be used for the form, and what kind of input is expected from the user.

Contact Form 7 - Type Syntax

Contact Form 7 - Type Syntax

Name

This is used for identifying the input field (the type). Most form tags have a name, but there are exceptions.

Contact Form 7 - Name Syntax

Options

This will specify the details of how the user interacts with your form and how they see it on your site. Options are optional.

Contact From 7 - Options Syntax (code)

Contact Form 7 Front End options display

Values

In most cases, values are used for specifying default values of the form. It is possible that values can be used for other purposes as well; it depends on the type of the tag. Values are optional.

Contact Form 7 - Form Field Value

Front end display for the value field

Text Fields

Text input fields are the most common of a contact form. HTML has two types of elements for text input fields of a form: <input type=”text”> for a single-line input; and <textarea> for multi-line input.

Contact Form 7 provides six types of form tags for representing these two types of HTML elements: text; text*; email; email*; textarea; and textarea*. I will show you detailed information about the usage and semantics of these form tags in the online video companion.

Text and Text*

You’d use text and text* for single-line input and accept any form of text. The difference between them is that text* denotes a required field. With Contact Form 7, all types of tags with an asterisk ‘*’ mean that these are required fields.

Asterics indicate required fields

Email and Email*

You’d use email and email* for single-line input and will only accept e-mail addresses. email* is a required field.

Astericks indicate required fields

Textarea and Textarea*

You’d use textarea and textarea* for a multi-line input and it accepts any form of text. textarea* is a required field.

Astericks indicate required fields

Checkboxes, Radio Buttons and Menus

Contact Form 7 has several  form tags for representing checkboxes, radio buttons and drop-down menus. I will show you detailed information about the usage and semantics of these form tags in the online video companion.

Checkbox, Checkbox* and Radio

Both checkbox and checkbox* represent a group of checkboxes (<input type=”checkbox”> in HTML). checkbox* requires the user to check at least one of the boxes.

Contact Form 7 - radio buttons and Checkboxes

Radio Buttons

The radio represents a group of radio buttons (<input type=”radio”> in HTML). Note that there is no required version of radio (“radio*”). Contact Form 7 does not determine radio to be required simply because radio buttons are required by default.

Select and Select*

Contact Form 7 - Dropdown Select

The select and select* represent a drop-down menu (<select> in HTML). select* requires the user to select at least one option from the menu.

Dropdwon Select

File Uploading and Attachment

The file uploading and attachment feature of Contact Form 7 is a great feature added by the developer. With this feature, your users have the ability to upload their files via your form, and then an email is sent to you with the attached files.

To set up, two steps are needed:

• Add file uploading fields in your form,
• Set up your mail settings to attach the uploaded files.

Adding file uploading fields in your form

Contact Form 7 provides form tags for file uploading fields (<input type=”file”> in HTML). The file upload acts the same as text and text*: file and file*. file* is a required field and requires the user to upload a file.

Contact Form 7 has default filetypes and sizes. The default acceptable file types (extensions) are: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. The default acceptable file size is 1 MB (1048576 bytes).

Setting up File Attachments With Email

Contact Form 7 - File Upoad code

When attaching uploaded files to the mail (email) section, you put the tags that correspond to form tags for file uploading fields into ‘File attachments’ field as shown below.

Contact Form 7 - File Upload

How Your Uploaded Files are Managed

After a user uploads a file through your contact form, Contact Form 7 checks to see if:

• Any PHP errors have occurred;
• The file type and file size are valid;

If there were no errors and the file size and type are valid based on the default or settings you applied, Contact Form 7 will move these files to a temporary folder, while in the same process, the file will be sent to you by email. After the file has been sent Contact Form 7 will remove the file from the temporary folder

The location of the temporary folder depends upon your settings in WordPress. The default is wp-content/uploads. Normally, Contact Form 7 creates a wpcf7_uploads folder in this location and uses it as the temporary folder for any uploaded files.

CAPTCHA

Contact Form 7 allows you to set up CAPTCHA for your contact form to prevent bots from submitting forms and spamming the hell out of you. Contact Form 7 utilizes Really Simple CAPTCHA as its officially-sanctioned CAPTCHA module, So, all you need to do is install the Really Simple CAPCHA plugin before you are able to use the CAPTCHA function of Contact Form 7.

The rest of this section will explain how to use CAPTCHA with Contact Form 7. This is only assuming that you have installed the Really Simple Captcha plugin

Before using CAPTCHA

Really Simple CAPTCHA requires that GD and FreeType PHP libraries be installed on your server in order to create CAPTCHA images. If you are not sure, contact your host and ask.

Contact Form 7 creates a temporary folder and stores any CAPTCHA files there. Usually like this: wp-contents/uploads/wpcf7_captcha, However, depending on your settings it may be different

To check where this folder will be created, open the Settings > Media menu, and check the setting for Store uploads in this folder field. The default is wp-content/uploads. Contact Form 7 will create a wpcf7_captcha folder in this location and uses it as the temporary folder for any CAPTCHA files.

This folder is created automatically. However, sometimes this can fail on you due to permissions set to that particular directory. You can create this folder manually or change the permissions to that directory (it would be either wp-content or the uploads directory). Although I do not recommend changing permissions if you are not sure what you are doing

For advanced users

If you are feeling really brave you can perform the following actions on your wp-config file

You can also change the path of the temporary folder by setting the WPCF7_CAPTCHA_TMP_DIR constant in your wp-config.php like this:

define( ‘WPCF7_CAPTCHA_TMP_DIR’, ‘/your/file/path’ );

If WPCF7_CAPTCHA_TMP_DIR is defined, this directory is used as the temporary folder instead.

Make certain your temporary folder for CAPTCHA files exists and is writable. Otherwise, CAPTCHA can not be created.

How To Use CAPTCHA

To add a CAPTCHA into your contact form, these are the form tags you must use captchac and captchar.

The captchac tag means CAPTCHA-Challenge and it represents an <img> element for a CAPTCHA image.

The captchar tag means CAPTCHA-Response and it represents an <input type=”text”> element for a response input field.

A captchac tag and a captchar tag  go hand and hand and must have the same name. For example:

[captchac captcha-5] [captchar captcha-5]

CAPTCHA Code

The pair below would be invalid. Take note of the name within the CAPTCHA code

[captchac captcha-4] [captchar captcha-8]

CAPTCHA-Challenge

As stated before the captchac tag means CAPTCHA-Challenge and it represents a CAPTCHA image (<img> in HTML).

CAPTCHA Image Code

CAPTCHA-Response

The same thing here, the captchar tag means CAPTCHA-Response and it represents a response input field (<input type=”text”> in HTML).

CAPTCHA-FORM-FIELD

CAPTCHA Front End Display

Setting Up Email

Contact Form 7 lets you to edit mail (email) templates with just about anything that you can imagine. You can edit the message body, and also message header fields. You can also set HTML in your emails as well.

Basic Header Fields (To, From and Subject):

These are basic and necessary message header fields; and you can embed mail tags anywhere in these fields.

Mail Reciveing Set Up

Message Body:

You can embed mail tags anywhere in this field.

Body Message of the email

Additional Headers:

You can insert additional message header fields here, such as Cc and Bcc. There should be one field per line. You can embed mail tags anywhere in these fields.

Additional Headers Section

File Attachments:

If you attach uploaded files to this mail, put mail tags for the uploaded files into this field.

File Attachment Section

Use of HTML

To use HTML, check the “use html box”.

Use HTML

Mail (2)

Mail (2) is used in the same fashion as Mail. There are some tricks that I will show you in the video companion to this eBook.

Contact Form 7 Mail 2 Section

Submit Button

As you may know, An HTML “submit” button is an input element with “submit” type: <input type=”submit”>.
This is the simplest form of submit tag:

[submit]

You can add a value like this:

[submit "Send Mail"]

Take note that the submit tag does not have the ‘name’ attribute assigned.

Submit Button Code

Wayne Hatter

Although it does not happen often there are those times where you will need to reset your password for your WordPress back end access. For some crazy reason or another, you get locked out of your administration panel and the traditional way of resetting your password via the ‘forgot password’ link on your WordPress login screen is not working for ya. You can still reset your password with a little bit of database hacking. I know that this sounds a bit intimidating but trust me it is not. The wordpress codex gives these instructions as well at wordpress.org

Resetting your WordPress password!

Resetting your wordrpress password is a really simple task that you can accomplish in under 10 steps. so here we go.

1. Go to your Cpanel in your hosting account and connect to your database through phpAdmin. Figure 1.
   

   Figure 1. phpAdmin in Hosting cPanel

2. Choose / Select you database from your list of databases in the left column. Figure 2.
   

   figure 2. The databse to select

3. Click on your wp_users table Screenshot below in figure 3.
   

   Figure 3. wp_users in your selected database

    

4. Click on the browse tab
5. Click the edit icon (it is the pencil graphic) in the table row of the user that needs their WordPress password reset (I am going to use my daughter, Yukia Hatter for this example. Figure 4.)
   

   figure 4. the pencil edit ICON

6. In the user_pass field, replace the string of characters (this is the old password but in encrypted form) with a new password of your choosing (like: newpassword. Shown in Figure 5)
   

   Figure 5. The user password field

7. Now, from the function pull-down menu, select MD5 and then just click ‘Go’. You are all done now. Figures 6 and 7.
   
   

   Figure 6. Enter the new password

   

   Figure 7. Encrypting your password with MD5

Wasn’t resetting your WordPress password simple?

That’s it, that is all it takes . Now my daughter, Yukia Hatter can now log in to the administration panes of WordPress and start making updates as I give her the assignments to do so.

As you have seen, resetting your WordPress password is not intimidating at all especially if you always refer back to this post. I would not imagine that the process would ever change. So the next time you get yourself locked out of your WordPress admin, remember resetting your WordPress password takes less than 10 steps to accomplish.

If you found this article to be helpful on resetting your WordPress password, please leave a comment below

What is the tinyMCE Advanced Plugin?

The tinyMCE advanced plugin is a really robust, but lightweight plugin that extends your WYSIWYG (What You See Is What You Get) editor for your posts and pages by adding more tools to your WYSIWYG editor, tinyMCE put’s at your fingertips a wide range of options for use.

Let me share this screenshot or a before and after view of your WYSIWYG with tinyMCE.

(BEFORE IMAGE) <= this is a place holder when I am writing Articles

Default WYSIWYG

(AFTER IMAGE)

TinyMCE Advanced Plugin Enhanced. I just love the way that rhymes.

As you can see there is a substantial difference in the amount of tools from the visual POV (Point of View).  Let’s tap into its real power side just looking at these screenshots though.

So, let us briefly go through the procedure of transforming what you see from the screenshots above into the steps that will achieve it.

• First you need to install the plugin either through FTP or through the admin area of your WordPress
• Second, activate the plugin
• Third configure the settings to your preference

Now that you have done steps one and two, go into your configuration settings of the plugin. This will be located under settings in your admin sidebar. You will see an interface or GUI (Graphic User Interface) full of all different types of icons. These icons can be moved around on the screen. The icons in the tinyMCE Advance Plugin GUI, can be dragged on screen to add and remove to display what you’d like to have available to you in your post or page editor.

Some of these features or add-ons that come packaged with the plugin are: tables, smileys, horizontal rule and much more.

Once you have set your preference of icons that you would like to display, all that is left from this point is to head on over to one of your posts or pages in your WordPress admin.

As you get into your post or page editor you will see your new, cool and fancy tools added to the default WYSIWYG that comes packaged with WordPress.

I have attempted to keep this article pretty brief, as I show you Step By Step inside the membership area, through video instructions how to use all of these tools and how they can help you when creating posts or pages in your WordPress.

The tinyMCE is an awesome plugin for WordPress users and hands down is the best extendable tool for enhancing your default, WordPress WYSIWYG editor.

Contact form 7 is one of the most powerful plugins that I use on a day to day basis. It is a great form because it allows a lot of flexibility I like it because of the way you can set it up as an auto responder which is really cool when you want to get a message across to your visitors via an email follow up message.

Contact form 7 also has a cool feature that when someone fills out the form it will redirect them to a page that you specify so you could send them to a page via a redirect action.

The system in contact form 7 is set up beautifully with short code that you can use in your send to fields and from fields that will pull the information from parameters that you have set in place.

It also has an attachment feature that allows the users to upload files (documents, images or whatever). However, you must consider the file allocations, life file types and file sizes. I can remember a few years back when I used Contact form 7 specifically for a client who wanted models to be able to upload their images so that he could approve them before posting to the site

Contact Form 7 has an auto generator of form elements that can be used for dropdowns, check-boxes, radio buttons and much more.

One of my favorite features in Contact Form 7 is the ability to style directly inside of its interface. With a little bit of CSS and HTML, you can create some stunning effects for your forms when place inside of your post or page

You can also create multiple forms that you can designate for different pages or for your sidebars. This is very useful when you have different offers or different departments within your business that you want this information to be passed to.

I think that contact form 7 is widely underused and I think that if people knew the potential of it they would use it more often and stop searching for that ultimate WordPress form plugin

Now this article for me is out of the ordinary because I usually add images and screenshots. But I have left that up to the membership site where I teach you step by step how to apply all of these elements to your contact form 7 plugin for WordPress

Wayne Hatter

This has frustrated many WordPress users even myself. The problem lies deeper into the way WordPress handles Iframes… meaning that they do not allow it. So you will be left frustrated if you continue to try embedding your videos this way. What I am going to share with you today is the solution for this discrepancy in WordPress.

Let’s start showing you how to grab the correct embed code.
The first thing you want to do is go to you tube and find the video that you want to embed. Once you have found the video that you want to embed in your wordpress, there will be 3 buttons directly below the video.

• Like
• Add To
• Share

The button that you will be concerned with is the Share button. You need to click on the share button and it reveals in a dropdown fashion a few options.

• Embed
• Email this video

To the right of these 2 buttons will be 2 icons ( Facebook and Twitter) just for reference. Now, the one that you will be concerned with is the Embed button. Now you need to click on the Embed button. This will then display a text box with the iframe code. You do not want this one.
If you look just below that box you will see 4 checkboxes

• Show suggested videos when the video finishes
• Use HTTPS
• Enable privacy-enhanced mode
• Use old embed code

You need to now click on the “Use old embed code” checkbox to select it. This will then reveal the old embed code in the text box.

Now you are home free. From here, all you’d do is copy the old embed code and paste it into your WordPress editor while still in HTML view and WordPress will not strip out the youtube code.

So, when you get stuck and frustrated with your videos being stripped, just refer back to this article as you guide to freedom from stress.

<img src=”my.jpg” title=”The title of the image” alt=”The alternative text of the image”>

As you take note above, there are 3 attributes associated with the image tag.

• SRC: Is the location of where the graphic or image is located
• TITLE: Is a short descriptive of the image that is displayed once you hover over an image.
• ALT: The Alternate text is the fallback in the case that there is a problem loading the image or if you are using a text based browser (used by developers mainly)

The src and alt tags are obviously important and required when using images in your web content. The reason why is that without them your content is deemed as invalid HTML markup. At the same time though, your images will still display fine but is not the best practice as the standards imply.

Why Use Alt and Title Tags?

Simply put, alt tags and title tags produce text. The search engines have no way of knowing what the image is about and will not crawl them, which in turn leaves viable content untouched by the search engines which means leaving SEO points on the table.

Also, alt tags are the perfect solution for people who have disabilities (specifically the blind). With the alt tags in place you are providing support for the blind that use certain technologies like text-to-speech, an opportunity for the blind to experience what the site is about.

The incorrect way to use alt tags

<img src=”mycar.jpg” title=”The red car” alt=”The cool red car”>

The correct way to use the alt tags

<img src=”mycar.jpg” title=”The red car” alt=”This red car has provides great gas mileage in a crappy economy”>

As you can see from above, the alt tag is descriptive which is perfect for the visually impaired persons, plus Google will eat this up like the cookie monster off sesame street.

Take also into consideration naming your images so that they are optimized as well by giving them names that make sense. Instead of naming your images 123456.jpg, name your images with names that make sense. So if you have uploaded an image of a Bentley (Oh yeah!), give it a name like ‘BENTLEY-CONTINENTAL-GT.jpg’. Chances are that some search engines may pick it up and in return, SEO points

Image Uploader Screenshot

WordPress allows you to upload your images with ease without any HTML knowledge. Through either you media library or through your post or page editor. This function is very convenient and is fast to implement. When uploading the images you are greeted with a popup overlay (modal, lightbox, thickbox or whatever you want to call it) which allows you to upload single images or a batch at one time.

After uploading the images you are greeted with a form with some fields that you SHOULD fill out. You hate the title, alternate text, caption and description fields. As you can see the 2 most important fields that we have been discussing are the title and alt fields. However, also, as stated earlier… text, text and more text will enhance you SEO rankings

Screen Shot of image attributes

When done, insert the image, and WordPress automatically sets the HTML into your page or post. It is a good idea to take the time to fill in the minimum required fields (alt and title) and also the caption of the text. This text will show below the image with a short description of the the image (try to keep it short and to relevance). The Description field is only for personal use and is only seen by the blog owner. However, by writing a little bit of code and adding it to your theme’s function.php file we can call the the description field to display for an image anywhere we want on the page. However, that will not be covered in this article as it is out of scope.

So hopefully now you have a better understanding of how to harness the power of your images and helping also the visually impaired by optimizing you images to its fullest potential

Wayne Hatter

Your WordPress Made Simple