Contact Form

Get Started
1

I am wanting to produce a basic contact form that works on the web site I am producing, all it needs to be is name, e-mail address and message fields which when completed should be e-mailed to my e-mail address.

I have come acrross the following tutorial LINK and just wanted to know if it seems any good as I have absolutely know knowledge of PHP. Alternatively has anybody any other suggestions of how best to produce the contact form that I want be it a different tutorial ect.

Thanks in advance.

2

I would also include a captcha on your contact form to reduce the possibility of bots sending junk to you via your contact form.

3

Thanks for the response aidos, I was thiking about trying it without Captcha first to see what happens (As a user I really do hate it), it is only a very small site that will only be seen by maybe 10s of people or maybe 100 at the most.

Has anybody got any thoughts on the tutorial I have linked to, is it any good or is there anything better out there that I can follow?

Thanks

4

If you don’t have a CAPTCHA you could try making the user enter a phrase word or simple question as an extra measure. Eventually you will get some spam to the form believe me; even if you have regular expressions to pick-up invalid email address structure.

5

Thanks for the response I guess I’ll have to consider it then. Has anybody got any throughts about the tutorial I have posted though cos if there are no other suggestions I guess I’ll have to use that.

Thanks

6

You may want to ask if the PHP stuff in that tut are any good over in the PHP forum.

Re the HTML/CSS
my only real comment on the HTML is that they’ve wrapped each label-input pair in a p instead of using a fieldset around the whole thing:

<form…>
<fieldset>
<legend>contact</legend>
form elements
</fieldset>
</form>

…however, that is up to the developer when the form is short like this one is. It’s already obviously a contact form so the legend is redundant here, and using a fieldset means you must have a legend as well.

Also then since labels and inputs are inlines, either css would have to make the labels blocks or you’d add br tags to the HTML (I consider br’s to keep a form’s content clear to be an acceptable use of br). The way this tut uses br though is kinda silly: there is no content reason to make a split between label and input, only a content reason to split each label-input pair. To keep the labels alone on their lines, they should have used CSS to make the labels blocks.

label: input
label: input
label: input
is readable

label:
input label:
input label:
input

is less so.

So, not bad.

The CSS:
12px sized fonts are… 1990. Unless your text is lining up with background images, let the font size adjust to the page. IE will not enlarge text set in px when the user does text-enlarge (this is not the same as zoom, which will always enlarge everything), not even IE9.

The red of the error messages, and the fact that the error messages are in spans, who come AFTER the invalid input, are not great for usability/accessibility.

Red on black isn’t the most readable combination, and will fail colour-contrast minimums on any contrast-checker.

Having the error announced after the input doesn’t matter so much for graphical users, but means users of any linear browser come across the label, the input, and the error last. The error should be first. And in a readable colour.

The errors are also a great place to use ARIA attributes: give the error message an id and the label’s aria-describedby can link to it… if you do this, browsers and screen readers who understand ARIA roles will be fine if the errors are after the input; you have the possibility of hearing the error first with the label if you want.

The error list they have at the top of the page is a good idea. What makes it a better idea is making those links (only if it’s a long long form though) to the individual problem-questions. This also gives keyboard users a quick way to jump to the first wrong question.


.button:hover {
	background-color:#f1f1f1;
	color: #333;
}

You see they forgot about all those mouseless devices out there again. :focus :focus :focus, people.

I also don’t see the point in setting textareas to pixel height and widths: textareas MUST have cols and rows attributes anyway, and since those do differ from browser to browser, use percentages in CSS to make the width at least the same cross-browser.
Since the form has a fixed width (should be fixed in a flexible width though, like em’s), the textarea can be width: 100% and look the same cross-browser.


#contact_form_wrap {
       margin:0 auto;
       margin-top:50px;

In case you were wondering, no they don’t need two lines for that:

#contact_form_wrap {
margin: 50px auto 0;
}

Padding’s been set on the form but if you build a form and do decide to use a fieldset, keep in mind those have default padding and sometimes margins in browsers, so set both the form and the fieldset to margin: 0; padding: 0 before furthing in style. Also, legends are a problem to style as well.

If your contact form is as short as this one, you can leave out a fieldset. However a header above the form should state something about “contact us” or “contact form” or whatever.

7

If the number of likely responses per month is low, you might want to try visiting www.jotform.com - its free service is better than most others. Create a free account and your problem’s solved.

8

Thanks for the response Dr John, I was wondering about this kind of thing as an option but wasn’t sure whether it was really viable. Have you used this particular one before? What are the pros and cons of using this or something like it compared to producing it myself?

9

I’ve merely tested it in case a client wants that sort of service instead of paying me to build one.

Many advantage is that their spam protection is built in for you, and they had better get it right to survive as a service provider. They also have validation checks built in (is it a valid email address, that sort of thing) and seem to have easy styling and built in themes. So basically it’s very useful for newcomers who can’t write their own PHP, and is easier to experiment with than a newcomer trying to write their own php, after reading a tutorial.

10

A number of our clients use Wufoo - very nice/simple interface for building forms.