Contact Form 7: A WordPress Plugin

Click images for a larger view.

First Form

One of my favorite WordPress plugins is Contact Form 7.  When using it to make forms for clients, there are two important issues to tackle. The first issue is to make sure the form is works properly. This includes ensuring that the form looks presentable on screens of all sizes:

plbnew

On a widescreen monitor (cropped)

On an iPhone

On an iPhone

It is also important to make sure that the form validates data so the form only sends when the required information is entered properly (especially information like email addresses and phone numbers):

The form will not send because the email was not entered properly.

The form will not send because the email was not entered properly.

The second issue is to make sure that the contact form sends an email that is concise and easily recognized by the client. Knowing HTML isn’t required but it sure is useful. The email that clearly shows the client exactly who is applying for a job (Homer Simpson, in this case), both as the sender and in the email. The applicant’s information is clearly listed and their cover letter and resume are conveniently attached:

emailnew

This is the code for the contact form itself:

formcode

The asterisks within the brackets indicate that the field is mandatory.

This is the code for the email:

emailcodenew

Second Form

I wanted to use the lessons from the first form to make the second form more sophisticated. Here’s a picture of the form as a whole:

wholeform2

Place Holders:

For the phone number field, I wanted to make sure that the applicant used only one type of format. I didn’t want them to use parentheses, hyphens, or periods. I didn’t want to take up space by placing text saying “No periods, hyphens, or parentheses” on the top, bottom, or sides of the field. I used the placeholder feature to show that text within the field itself:

numbers

I also did the same thing with the address section, to clarify the exact information I wanted entered in the fields:

address

Maxlenghts & Minlengths:

I was getting annoyed that the telephone fields would still send if I entered both more or less than 10 digits. I wanted the number of digits to be exactly 10.

Sample Telephone Code:

I first used the maxlength feature (in bold) to make sure that no more than 10 digits could be entered:

[tel Telephone /10]

This solved one problem. But the next problem was that I could enter 9 digits and the form would still submit. Contact Form 7 had no way to solve this. So I did a little Googling and found a plugin called Contact Form 7 minlength extension. This creates a minlength field in Contact Form 7 (highlighted in red):

minlen

This gives us the following code (minlength in bold) which ensures that, in order for the form to be submitted,  there must be a maximum and minimum of 10 digits in the telephone field:

[tel Telephone /10 minlength:10]

I did the same exact techniques for the ZIP code field to make ensure a maximum and minimum of 5 digits in order for the form to be sent.

The form won’t send because there are less than 10 digits in the field.

The form won’t send because there are less than 10 digits in the field.

Drop-Down Menu:

For the address portion of the form, I wanted the applicant to choose from a list of states. I chose the drop-down menu feature. I then pasted a list of state abbreviations (as well as DC) and came out with the following code:

<p>*State: [select* State “AL” “AK” “AZ” “AR” “CA” “CO” “CT” “DC” “DE” “FL” “GA” “HI” “ID” “IL” “IN” “IA” “KS” “KY” “LA” “ME” “MD” “MA” “MI” “MN” “MS” “MO” “MT” “NE” “NV” “NH” “NJ” “NM” “NY” “NC” “ND” “OH” “OK” “OR” “PA” “RI” “SC” “SD” “TN” “TX” “UT” “VT” “VA” “WA” “WV” “WI” “WY”]</p>

This is what the drop-down menu looks like in action:

states2

Email:

For the email, I wanted to be a little more creative and use some inline CSS to make the email a little more visually appealing, but still keeping everything neat, concise, and minimalist. I chose a color scheme based on the client’s logo:

emailnew

I also wanted to keep the applicant’s name in the subject line so the client can see who is sending the application. If it’s someone they don’t care for, they don’t even have open the email.

I would’ve liked to do more CSS tricks but the form was so limited that it felt rather unnecessary. This is the code for the email:

<h1 style=”text-decoration: underline;color:#005500″>Applicant’s Name: [FirstName] [LastName]</h1>

<h3 style=”color:#e51937″>Basic Information</h3>

<ul>

<li><strong>Email Address:</strong> [Email]</li>
<li><strong>Phone Number:</strong> [PhoneNumber]</li>
<li><strong>Alternate Number:</strong> [AlernateNo]</li>
</ul>
<hr>

<h3 style=”color:#e51937″>Address</h3>

<ul>
<li><strong>Address Line 1:</strong> [AddressLine1]</li>
<li><strong>Address Line 2:</strong> [AddressLine2]</li>
<li><strong>City, State, ZIP Code:</strong> [City], [State] [ZIP]</li>
</ul>
<hr>
<h3 style=”color:#e51937″>Personal Information</h3>
<ul>
<li><strong>18 or Over:</strong> [Age]</li>
<li><strong>Hours Wanted:</strong> [Hours]</li>
</ul>
<hr>
<h3 style=”color:#e51937″>Statement</h3>
<p>[statement]</p>