A contact form is a website essential

Since the whole point of creating a website is establish contact it makes sense to give your visitor an easy way you contact you in return.

And having the request sent through a contact form is much easier than a telephone call when you are in the middle of something else that is asking for your full attention.

It also gives a written record of the enquiry, which you can view at a time that better suits you, allowing you the time to better respond to the query.

The example contact form coding shown below provides the basics for both accessibility, for example a screen reader, and of course usability.

<form method="post" id="contact" action="perfect.php">
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
<label for="question">Your question or comment:</label>
<textarea id="question" name="question"></textarea>
<input type="submit" value="Submit Your Thoughts">
</fieldset>
</form>

A contact form needs a handler script

The "perfect.php" referred to at the end of the first line is a very simple, easy to use PHP open source contact form handler script and it can be downloaded from Centerkey. It does exactly what it says on the tin.

It takes the name="input-name" and the data entered into that field, converts this to an email format and forwards it to the email address you specify within the configuration settings. All very clever stuff.

Styling a contact form

This form is fully responsive and mobile friendly. It must however be placed within a div that is by default {text-align: center; } in order to centre correctly.

form { width: 92%; text-align: left; margin: 1em auto;}
fieldset, input[type=email], input[type=text], input[type=submit], textarea
{display: block; padding: 2% 4%; margin: 4% 0;

border: 0.062em solid #999; border-radius: 1em;}
input[type=submit]:hover {background:#eee;cursor:pointer}

The highlighted CSS is the bare bones minimum and positions the elements. This would work as a form but adding some additional styling sure makes it look a darn sight better. This is a real life example based on the form below but you can of course choose your own colours.

Your comments, questions and general feedback is requested:

Your Feedback

No comments yet. Be the first.