Websites are a point of contact – and a contact form that sends an email is the way to normally handle enquiries. (Of course phone numbers/addresses must first be easy to find!) A contact form requires a web server to actually do something – ie send you an email – it’s not just displaying HTML code anymore. There’s options to get by without a script on your server – the excellent WuFoo online form builder is a great option here – but if you want a form as part of your page that you can style yourself it ain’t the ticket. So, knowing a little PHP, a PHP script is sought that:

1. makes sure all input is cleaned and sanitized to avoid nasty things being done on/to your server
2. checks for errors in the data without discarding the well formed data
3. uses some form of CAPTCHA to keep those spam bots at bay
4. sends email through an authorised SMTP email account (Gmail, for example, will either mark as spam or simply not accept mail that isn’t)

Other nice things to consider would be nice, cross-browser (HTML5) placeholder text (that doesn’t get submitted).

Finding a PHP web form framework

Last time I set up a form was a while ago – I’ve been doing mostly WordPress sites (or other CMS work) recently and have found the premium Gravity forms plugin for WordPress to work a treat. Anyway, cut to the chase already… the old script I had used  failed on points 3 & 4 above I’d like to say I can lean on PEAR PHP (which is already on my webserver) but I’m really not a programmer. I found a solution in the excellent PHP form “library” from Dagon Design. I’d never heard off it but it’s the first serious result for “PHP form script” in Google at the moment – so it  must at least be popular. More importantly it ticks all the boxes above (plus much more) and is well documented. Go get it. The only thing it doesn’t do is verify numerical input.

There’s no need for me to go into the setup at all – it is very well documented – just spend a half hour or so to read through it.

Adding placeholder text to the form framework

All I have to add is that I’ve edited the script a bit to set default text as HTML5 placeholder text (and remove default text from text inputs). The form is run in conjunction with Daniel Stocks’ HTML5 Placeholder Plugin for jQuery to make sure that the placeholder text works with IE etc.

To get the placeholder text working I changed the last few lines of the  below (from 754):

function ddfm_gen_text($item) {

	// type=text|class=|label=|fieldname=|max=|req=(TRUEFALSE)|[ver=]|[default=]

	global $form_submitted, $form_input, $show_required;

	$req_text = (($show_required) && ($item['req'] == 'true')) ? '<span class="required">' . DDFM_REQUIREDTAG . '</span> ' : '';

	$gen = "";
	$gen .= '<p class="fieldwrap"><label for="' . $item['fieldname'] . '">' . $req_text . $item['label'] . '</label>';
	$gen .= '<input class="' . $item['class'] . '" type="text" name="' . $item['fieldname'] . '" id="' . $item['fieldname'] . '" value="';

	if ($form_submitted) {
		$gen .= ddfm_bsafe($form_input[$item['fieldname']]);
	} else if (isset($item['default'])) {
		$gen .= ddfm_bsafe($item['default']);
	}

	$gen .= '" /></p>' . "\n\n";

	return $gen;
}

to:

	if ($form_submitted) {
		$gen .= ddfm_bsafe($form_input[$item['fieldname']]);
	}

	$gen .= '" placeholder="' . ddfm_bsafe($item['default']) . '" /></p>' . "\n\n";

	return $gen;

So what’s all the fuss about – well you can see the version I worked on, in action, as part of a website for this fancy (in the good sense) hair salon in Fuengirola…