gregorynicholas/html5.contactform.html

## html5.contactform.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Contact Form</title>
<style type="text/css">
html, body { border: 0; margin: 0; padding: 0; }
body { font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; min-width: 100%; min-height: 101%; color: #666; background:#eee; }

/* END Remove This */

#contact p, label, legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }

#contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; }
#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }

#contact {
	display: block;
	width: 650px;
	margin: 50px auto;
	padding: 35px;
	border: 1px solid #cbcbcb;
	background-color: #FFF;

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
}

/* Form style */

mark.validate {
	display: inline-block;
	margin: 12px 0 0 10px;
	width: 16px;
	height: 16px;
	background: transparent none;
}
mark.valid {
	background: url(../assets/success.gif) no-repeat top left;
}
mark.error {
	background: url(../assets/error.gif) no-repeat top left;
}

#contact label {
	display: inline-block;
	float: left;
	height: 1em;
	line-height: 1em;
	padding: 6px 0 0;
	width: 155px;
	font-size: 1.4em;
	margin: 5px 0;
	clear: both;
}

#contact label small {
	font-size: 0.75em;
	color: #ccc;
}

#contact label.verify {
	padding: 0;
	margin: 2px 10px 2px 0;
	width: 145px;
	text-align: right;
}
#contact label.verify img {
	padding:1px;
	border:1px solid #cccccc;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

#contact input, #contact textarea, #contact select {
	width: 220px;
	padding: 5px;
	color: #666;
	background: #f5f5f5;
	border: 1px solid #ccc;
	margin: 5px 0;
	font:1.4em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	vertical-align: top;

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;

	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
}
#contact select {
	width: 232px;
	margin: 8px 0;
}
#contact input#verify {
	width: 55px;
}
#contact textarea {
	width: 414px;
}
#contact input:focus, #contact textarea:focus, #contact select:focus {
	border: 1px solid #ddd;
	background-color: #fff;
	color:#333;
	outline: none;
	position: relative;
	z-index: 5;

	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);

	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
}
#contact input.error, #contact textarea.error, #contact select.error {
	box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-moz-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	border: 1px solid #faabab;
	background: #fef3f3
}
#contact input.submit {
	width: auto;
	cursor: pointer;
	position: relative;
	border: 1px solid #282828;
	color:#fff;
	padding: 6px 16px;
	text-decoration: none;
	font-size: 1.5em;

	background:#555;

	background:-webkit-gradient(
	    linear,
	    left bottom,
    	left top,
	    color-stop(0.12, rgb(60,60,60)),
	    color-stop(1, rgb(85,85,85))
	);
	background:-moz-linear-gradient(
	    center bottom,
	    rgb(60,60,60) 12%,
    	rgb(85,85,85) 100%
	);

	box-shadow: 0 2px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);

	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
#contact input.submit:hover {
	background: #282828 !important;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
}
#contact input.submit:active, #contact input.submit:focus {
	top: 1px;
}


#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin:0 0 20px; }
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

#message { margin: 1em 0; padding: 0; display: block; background: transparent none; }

.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../assets/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }

.loader { padding: 0 10px; }

#contact #success_page h1 { background: url('../assets/success.gif') left no-repeat; padding-left:22px; }

acronym { border-bottom:1px dotted #ccc; }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){

	$('#message').hide();

	// Add validation parts
	$('#contact input[type=text], #contact input[type=number], #contact input[type=email], #contact input[type=url], #contact input[type=tel], #contact select, #contact textarea').each(function(){
		$(this).after('<mark class="validate"></mark>');
	});

	// Validate as you type
	$('#name, #comments').focusout(function() {
		if (!$(this).val())
			$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
		else
			$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	});
	$('#email').focusout(function() {
		if (!$(this).val() || !isEmail($(this).val()))
			$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
		else
			$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	});
	$('#website').focusout(function() {
		var web = $(this).val();
		if (web && web.indexOf("://") == -1) {
			//$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
			$(this).val('http://' + web);
			$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
		} else if (web)
			$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
		else
			$(this).removeClass('error').parent().find('mark').removeClass('error').removeClass('valid');
	});
	$('#verify').focusout(function() {
		var verify = $(this).val();
		var verify_box = $(this);
		if (!verify)
			$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
		else {

			// Test verification code via ajax
			$.ajax({
				type: 'POST',
				url: 'verify/ajax_check.php',
				data: { verify: verify },
				async: false,
				success: function( data ) {
					if (data=='success') {
						$(verify_box).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
					} else {
						$(verify_box).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
					}
				}
			});

		}
	});

	$('#submit').click(function() {
		$("#message").slideUp(200,function() {
			$('#message').hide();

			// Kick in Validation
			$('#name, #phone, #comments, #website, #verify, #email').triggerHandler("focusout");

			if ($('#contact mark.error').size()>0) {
				$('#contact').effect('shake', { times:2 }, 75, function(){
					$('#contact input.error:first, #contact textarea.error:first').focus();
				});
				return false;
			}

		});
	});

	$('#contactform').submit(function(){

		if ($('#contact mark.error').size()>0) {
			$('#contact').effect('shake', { times:2 }, 75);
			return false;
		}

		var action = $(this).attr('action');

 		$('#submit')
			.after('<img src="assets/ajax-loader.gif" class="loader" />')
			.attr('disabled','disabled');

		$.post(action, {
			name: $('#name').val(),
			email: $('#email').val(),
			phone: $('#phone').val(),
			website: $('#website').val(),
			subject: $('#subject').val(),
			comments: $('#comments').val(),
			verify: $('#verify').val()
		},
			function(data){
				$('#message').html( data );
				$('#message').slideDown();
				$('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
				$('#contactform #submit').attr('disabled','');
				if(data.match('success') != null) $('#contactform').slideUp('slow');

			}
		);

		return false;

	});

	function isEmail(emailAddress) {

		var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

		return pattern.test(emailAddress);
	}

	function isNumeric(input) {
    	return (input - 0) == input && input.length > 0;
	}

});
</script>

<!--[if IE]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

	<section id="contact">

		<header>

			<h1><acronym title="HyperText Markup Language">HTML</acronym>5 <acronym title="Asynchronous Javascript and XML">AJAX</acronym> Contact Form</h1>
			<p>A form packed full of HTML5 and CSS3 awesomeness. With just 2 files this can be easily integrated into any <strong>HTML</strong> or <strong>PHP</strong> page!</p>

		</header>

		<mark id="message"></mark>

        <form method="post" action="contact.php" name="contactform" id="contactform" autocomplete="on">

            <fieldset>

	            <legend>Contact Details</legend>

	            <div>
		            <label for="name" accesskey="U">Your Name</label>
		            <input name="name" type="text" id="name" placeholder="Enter your name" required="required" />
	            </div>
	            <div>
		            <label for="email" accesskey="E">Email</label>
		            <input name="email" type="email" id="email" placeholder="Enter your Email Address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z]{2,})$" required="required" />
	            </div>

	            <div>
					<label for="phone" accesskey="P">Phone <small>(optional)</small></label>
		            <input name="phone" type="tel" id="phone" size="30" placeholder="Enter your phone number" />
	            </div>

	            <div>
					<label for="website" accesskey="W">Website <small>(optional)</small></label>
		            <input name="website" type="url" id="website" placeholder="Enter your website address" />
	            </div>

	        </fieldset>

	        <fieldset>

	            <legend>Your Comments</legend>

	            <div>
		            <label for="subject" accesskey="S">Subject</label>
		            <select name="subject" id="subject" required="required">
						<option value="Support">Support</option>
						<option value="A Sale">Sales</option>
						<option value="A Bug fix">Report a bug</option>
		            </select>
				</div>

	            <div>
					<label for="comments" accesskey="C">Comments</label>
            		<textarea name="comments" cols="40" rows="3"  id="comments" placeholder="Enter your comments" spellcheck="true" required="required"></textarea>
	            </div>

	        </fieldset>

	        <fieldset>

	        	<legend>Are you human?</legend>

	            <label for="verify" accesskey="V" class="verify"><img src="image.php" alt="Verification code" /></label>
	            <input name="verify" type="text" id="verify" size="6" required="required" style="width: 50px;" title="This confirms you are a human user and not a spam-bot." />

	        </fieldset>

            <input type="submit" class="submit" id="submit" value="Submit" />

        </form>

	</section>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML5 Contact Form</title>
	<style type="text/css">
	html, body { border: 0; margin: 0; padding: 0; }
	body { font: 62.5% "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; min-width: 100%; min-height: 101%; color: #666; background:#eee; }

	/* END Remove This */

	#contact p, label, legend { font: 1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; }

	#contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; }
	#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }

	#contact {
	display: block;
	width: 650px;
	margin: 50px auto;
	padding: 35px;
	border: 1px solid #cbcbcb;
	background-color: #FFF;

	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;

	box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	}

	/* Form style */

	mark.validate {
	display: inline-block;
	margin: 12px 0 0 10px;
	width: 16px;
	height: 16px;
	background: transparent none;
	}
	mark.valid {
	background: url(../assets/success.gif) no-repeat top left;
	}
	mark.error {
	background: url(../assets/error.gif) no-repeat top left;
	}

	#contact label {
	display: inline-block;
	float: left;
	height: 1em;
	line-height: 1em;
	padding: 6px 0 0;
	width: 155px;
	font-size: 1.4em;
	margin: 5px 0;
	clear: both;
	}

	#contact label small {
	font-size: 0.75em;
	color: #ccc;
	}

	#contact label.verify {
	padding: 0;
	margin: 2px 10px 2px 0;
	width: 145px;
	text-align: right;
	}
	#contact label.verify img {
	padding:1px;
	border:1px solid #cccccc;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	}

	#contact input, #contact textarea, #contact select {
	width: 220px;
	padding: 5px;
	color: #666;
	background: #f5f5f5;
	border: 1px solid #ccc;
	margin: 5px 0;
	font:1.4em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	vertical-align: top;

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;

	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	}
	#contact select {
	width: 232px;
	margin: 8px 0;
	}
	#contact input#verify {
	width: 55px;
	}
	#contact textarea {
	width: 414px;
	}
	#contact input:focus, #contact textarea:focus, #contact select:focus {
	border: 1px solid #ddd;
	background-color: #fff;
	color:#333;
	outline: none;
	position: relative;
	z-index: 5;

	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);

	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	}
	#contact input.error, #contact textarea.error, #contact select.error {
	box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-moz-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	border: 1px solid #faabab;
	background: #fef3f3
	}
	#contact input.submit {
	width: auto;
	cursor: pointer;
	position: relative;
	border: 1px solid #282828;
	color:#fff;
	padding: 6px 16px;
	text-decoration: none;
	font-size: 1.5em;

	background:#555;

	background:-webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.12, rgb(60,60,60)),
	color-stop(1, rgb(85,85,85))
	);
	background:-moz-linear-gradient(
	center bottom,
	rgb(60,60,60) 12%,
	rgb(85,85,85) 100%
	);

	box-shadow: 0 2px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);

	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	}
	#contact input.submit:hover {
	background: #282828 !important;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	}
	#contact input.submit:active, #contact input.submit:focus {
	top: 1px;
	}



	#contact input[type="submit"][disabled] { background:#888; }
	#contact fieldset { padding:20px; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin:0 0 20px; }
	#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

	#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

	#message { margin: 1em 0; padding: 0; display: block; background: transparent none; }

	.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../assets/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }

	.loader { padding: 0 10px; }

	#contact #success_page h1 { background: url('../assets/success.gif') left no-repeat; padding-left:22px; }

	acronym { border-bottom:1px dotted #ccc; }
	</style>

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

	<script type="text/javascript">
	jQuery(document).ready(function(){

	$('#message').hide();

	// Add validation parts
	$('#contact input[type=text], #contact input[type=number], #contact input[type=email], #contact input[type=url], #contact input[type=tel], #contact select, #contact textarea').each(function(){
	$(this).after('<mark class="validate"></mark>');
	});

	// Validate as you type
	$('#name, #comments').focusout(function() {
	if (!$(this).val())
	$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
	else
	$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	});
	$('#email').focusout(function() {
	if (!$(this).val() \|\| !isEmail($(this).val()))
	$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
	else
	$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	});
	$('#website').focusout(function() {
	var web = $(this).val();
	if (web && web.indexOf("://") == -1) {
	//$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
	$(this).val('http://' + web);
	$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	} else if (web)
	$(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	else
	$(this).removeClass('error').parent().find('mark').removeClass('error').removeClass('valid');
	});
	$('#verify').focusout(function() {
	var verify = $(this).val();
	var verify_box = $(this);
	if (!verify)
	$(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
	else {

	// Test verification code via ajax
	$.ajax({
	type: 'POST',
	url: 'verify/ajax_check.php',
	data: { verify: verify },
	async: false,
	success: function( data ) {
	if (data=='success') {
	$(verify_box).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
	} else {
	$(verify_box).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
	}
	}
	});

	}
	});

	$('#submit').click(function() {
	$("#message").slideUp(200,function() {
	$('#message').hide();

	// Kick in Validation
	$('#name, #phone, #comments, #website, #verify, #email').triggerHandler("focusout");

	if ($('#contact mark.error').size()>0) {
	$('#contact').effect('shake', { times:2 }, 75, function(){
	$('#contact input.error:first, #contact textarea.error:first').focus();
	});
	return false;
	}

	});
	});

	$('#contactform').submit(function(){

	if ($('#contact mark.error').size()>0) {
	$('#contact').effect('shake', { times:2 }, 75);
	return false;
	}

	var action = $(this).attr('action');

	$('#submit')
	.after('<img src="assets/ajax-loader.gif" class="loader" />')
	.attr('disabled','disabled');

	$.post(action, {
	name: $('#name').val(),
	email: $('#email').val(),
	phone: $('#phone').val(),
	website: $('#website').val(),
	subject: $('#subject').val(),
	comments: $('#comments').val(),
	verify: $('#verify').val()
	},
	function(data){
	$('#message').html( data );
	$('#message').slideDown();
	$('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
	$('#contactform #submit').attr('disabled','');
	if(data.match('success') != null) $('#contactform').slideUp('slow');

	}
	);

	return false;

	});

	function isEmail(emailAddress) {

	var pattern = new RegExp(/^(("[\w-\s]+")\|([\w-]+(?:\.[\w-]+))\|("[\w-\s]+")([\w-]+(?:\.[\w-]+)))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)\|(@\[?((25[0-5]\.\|2[0-4][0-9]\.\|1[0-9]{2}\.\|[0-9]{1,2}\.))((25[0-5]\|2[0-4][0-9]\|1[0-9]{2}\|[0-9]{1,2})\.){2}(25[0-5]\|2[0-4][0-9]\|1[0-9]{2}\|[0-9]{1,2})\]?$)/i);

	return pattern.test(emailAddress);
	}

	function isNumeric(input) {
	return (input - 0) == input && input.length > 0;
	}

	});
	</script>

	<!--[if IE]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	</head>
	<body>

	<section id="contact">

	<header>

	<h1><acronym title="HyperText Markup Language">HTML</acronym>5 <acronym title="Asynchronous Javascript and XML">AJAX</acronym> Contact Form</h1>
	<p>A form packed full of HTML5 and CSS3 awesomeness. With just 2 files this can be easily integrated into any <strong>HTML</strong> or <strong>PHP</strong> page!</p>

	</header>

	<mark id="message"></mark>

	<form method="post" action="contact.php" name="contactform" id="contactform" autocomplete="on">

	<fieldset>

	<legend>Contact Details</legend>

	<div>
	<label for="name" accesskey="U">Your Name</label>
	<input name="name" type="text" id="name" placeholder="Enter your name" required="required" />
	</div>
	<div>
	<label for="email" accesskey="E">Email</label>
	<input name="email" type="email" id="email" placeholder="Enter your Email Address" pattern="^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+))@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+))\.([A-Za-z]{2,})$" required="required" />
	</div>

	<div>
	<label for="phone" accesskey="P">Phone <small>(optional)</small></label>
	<input name="phone" type="tel" id="phone" size="30" placeholder="Enter your phone number" />
	</div>

	<div>
	<label for="website" accesskey="W">Website <small>(optional)</small></label>
	<input name="website" type="url" id="website" placeholder="Enter your website address" />
	</div>

	</fieldset>

	<fieldset>

	<legend>Your Comments</legend>

	<div>
	<label for="subject" accesskey="S">Subject</label>
	<select name="subject" id="subject" required="required">
	<option value="Support">Support</option>
	<option value="A Sale">Sales</option>
	<option value="A Bug fix">Report a bug</option>
	</select>
	</div>

	<div>
	<label for="comments" accesskey="C">Comments</label>
	<textarea name="comments" cols="40" rows="3" id="comments" placeholder="Enter your comments" spellcheck="true" required="required"></textarea>
	</div>

	</fieldset>

	<fieldset>

	<legend>Are you human?</legend>

	<label for="verify" accesskey="V" class="verify"><img src="image.php" alt="Verification code" /></label>
	<input name="verify" type="text" id="verify" size="6" required="required" style="width: 50px;" title="This confirms you are a human user and not a spam-bot." />

	</fieldset>

	<input type="submit" class="submit" id="submit" value="Submit" />

	</form>

	</section>

	</body>
	</html>