The Perfect Contact Page

August 14, 2012

prefect contact page The most important part of a website is arguably the contact page and the quality of contact pages vary greatly from site to site. Even on large sites that seem to be “professionally developed” we have all encountered inaccurate data, or poorly functioning forms! Are we the only ones that have typed a 100 character message, only to hit submit and have all the data blown out with a after the fact message, “You are limited to 50 characters”?

As web developers we have to understand that there is never a one size fits all for our clients. There is no template that works for everyone. Our job is to educate our clients in regards to current best practices and possibilities, understand their needs, and guide them to make well-educated decisions based on the pros and cons of doing things one way or another.

Whether it is a simply contact page or a complex contact page, it needs to be Built Right!

Below is pretty much everything that should be taken into consideration when creating a contact page for a client. For sure it might be overkill for some, however good developers will take the time to offer options to a client and work with them to determine the right solution.

1. The Contact Form.

Not all contact pages have a form on them, some simply have a phone number. If they do have a form that is often the most overlooked parts of the page, so lets start with the page itself and the form.

1.1. Security

A contact page should ideally be protected with a valid security certificate especially if you have a form on it. Sensitive data is being transmitted, and we do not want that intercepted.


A secure page is always indicated by a HTTPS protocol before the site URL in the browser address bar. Use a trusted certificate, not a self issued certificate!

1.2. Identity

Separating the first and last name fields is the easiest way to start getting some good data integrity. If you use a single field, someone will eventually have to separate them somewhere. You can even add a salutation (Mr., Mrs., Ms.) in this field group, and that is a good way to determine the user’s gender without seeming too intrusive.

1.3. Double Email Fields


Always have two email fields! This is probably our biggest pet peeve.


A potential client or customer wants to contact you! Let’s have double fields here to ensure they do not typo their own email address.

If there is a single field here and they typo their address, you will have no way to contact them!

1.4. Optional Yet Helpful Data Fields

Other sets of information and qualifying data could prove useful depending on your needs. Be careful not to make everything mandatory they might result in someone decided not to contact you our raise suspicions on the data you are collecting. Make what you really need mandatory, leave the rest as optional.

1.5. File Attachment

Maybe your end users have the need to attach files to the email, let them know what formats are acceptable, and what the size limit is.


1.6. Qualifications / Email Routing

Organization and rotation is key when dealing with emails in a large organization. A good system always wins out in the end. You can use a field to determine who the email should be routed to.

  • Wide array of services (e.g. design, coding, SEO)
  • Different departments (e.g. Sales, Operations, HR)
  • If you are time sensitive for work

1.7. The Message Box

Character Count
Always let your visitors know how much text they can put in before hitting submit. We have all typed something only to have it wiped out on submit, very frustrating, most end-users leave in frustration.

of contact forms don’t let you know that their message box is limited to xx characters and you’ll only discover it once you hit submit. All you get is a pissed off end user.

As the recipient, you might want to receive short emails. Character limits are good, but let the end user know what they are. We can never have enough details so our contact page has a character count of 1000 for initial contact.


As with any transaction, a receipt is always a good thing. You should give your visitors an option to send a copy of the email to themselves. This will also serve as a reminder to them that they contacted you. This can be especially effective if they checked 10 other sites before yours, and now they have forgotten who they contacted and about what.


Spam prevention should not be at the expense of your end user.


Use CSS and JavaScript to Trick Bots
Hide certain fields that spam bots can track and auto populate. Then add a script that filters out any queries with these populated fields.


Math Spam Protection
This spam protection asks random easy math equations to validate an end user.

What is the sum of 2 + 2 = ?

4! thats easy. We hate captcha too!

1.9. Instant Error Checking Upon Submit

When an end user hits the Submit button, the form should check for errors upon submission or in real time. Do not have the form refresh and have the end user re-type their data.

Why Reloading is BAD

At times reloading can take a long time, and the end user might hit the back button, blowing out all the data they entered.

Inconvenient for end users that have slow connections or using mobile devices with unstable internet coverage.

Makes it more times more convenient for those who are using their mobile devices to contact you.

2. API Integration

The development of a great contact form doesn’t stop with the submit button!

Your contact form should be connected via API to your ESP (email service provider), CRM (customer relationship management), or a custom database. Why not all 3?

This will help you sort out your contacts. This is useful on sites with especially high traffic and keeps those organized.

This is also a great step in gathering data and statistics for company evaluations and marketing campaigns.


3. Phone number

Some people just like to use the phone, always have a phone number, and do your best to ensure it is answered by a human.


Phone numbers should be above the browser fold of your page. It should be one of the first things visible on it. Unless you want to drive down phone contact and encourage contact through email.


Always include your area code, if you do business internationally, include the country code.


Always include your normal office hours and time zone. The world is getting smaller.

4. Social Media

People simply have different preferences, and some people might be more tied into social media then others and prefer to contact through that medium, so lets not forget it and make that easy for the end user. It is not important to all companies, but when it is important it is very important.

Social media sites get millions of monthly visits and activities. A person can stay for 4.5 hours based on the average of the top 4 countries with the largest social media activity.

Half of the world population is under 30, accounting for 73.5% of all social media users.

Top countries with most social media activity

Monthly Visits

Age Groups

5. Client Support

Never forget your current clients!

A clear & visible link to your own help desk system provides easy access to your current clients. You should separate their needs from all the other contacts that you receive to ensure they are handled and routed correctly.

This also demonstrates to potential clients or customer that your clients are catered to differently, at a higher level, this might encourage them to contact you.


6. Directions

You can almost never go wrong by pinning your company into the main online maps.

Major search engines display company information based on their geographic location as search results. This is your online local directory friendly for both small and large companies.

If you have an office somewhere, it’s always best to toss in a Google, Bing or Yahoo! map in the page.


1. The Contact Form
1.1. Security Encrypted information Will cost you around $35/year
1.2. Identity ESP & other platforms ready Additional fields, additional QA testing
1.3. Double Email Always valid email address Additional fields, additional QA testing
1.4. Optional Fields Other means of contact Additional fields, additional QA testing, time to think it out
1.5. File Attachment A useful & convenient feature Additional fields, additional QA testing, upload script
1.6. Qualifications / Email Routing Reduce bottlenecks, increased qualifications Additional fields, additional QA testing
1.7. Message Box Lets the user know how much they can type Additional fields, additional QA testing
1.8. Stop Spam Reduce spam, legit emails If bad Captcha is used, it can frustrate the end user.
1.9. Submit User corrects errors easily, minimal data re-entry Additional fields, additional QA testing
2. API Integration
Keeps you on track & helps with data organization Slight increased cost, say from Mailchimp for example.
3. Phone Number
Lets the user know you are readily available Answer the phone, everyone hates automated systems
4. Social Media
Users that prefer social media are accommodated Now you have to monitor your social media account
5. Client Support
Cultivates long-lasting relationships with clients A good support system is not free
6. Directions
Lets people know where you are located You need a place to show if you post your location

And that’s it for the perfect contact page!