jeremy-hawes/Bootstrap AJAX Form Validation & Spam Filter.markdown

## Bootstrap AJAX Form Validation & Spam Filter.markdown

      
    Raw
  

              Bootstrap AJAX Form Validation & Spam Filter.markdown
            
          
    Bootstrap AJAX Form Validation & Spam Filter

Bootstrap AJAX Form Validation with built-in alerts (success & fail).
No CAPTCHA Spam Filter: Most spam emails will fill out all fields in a form based on the DOM elements on a page without reading the CSS. In this form there is a field called 'formChecker' wrapped in '.form-checker' with 'Display: none' added in the CSS. If this field is filled out a 'return false' is triggered in the JS, causing the email to not be sent.
A Pen by Jeremy Hawes on CodePen.
License.

  
## index.html
.container
	.row
		.col-xs-12
			h3.example-title Bootstrap Form Spam Filter
			h4.example-subtitle No CAPTCHA or Human Testers
			p.instructions Most spam emails will fill out all fields in a form based on the DOM elements on a page without reading the CSS. In this form there is a field called 'formChecker' wrapped in '.form-checker' with 'Display: none' added in the CSS. If this field is filled out a 'return false' is triggered in the JS, causing the email to not be sent.
				br
				strong Chrome, Safari, Firefox, IE9+
			#form-container.clearfix
				form#ctsForm(role="form", name="ctsForm", onsubmit="return validateForm()").clearfix
					.form-group.clearfix
						label.label Name
						input.form-control(placeholder="Name", name="formName", required)
					.form-group.clearfix
						label.label Phone
						input.form-control(placeholder="Phone Number", name="formPhone")
					.form-group.clearfix
						label.label Email
						input#form-email.form-control(placeholder="Email Address", name="formEmail", type="email", required)
					.form-group.clearfix.form-checker
						label.label Info
						input.form-control(placeholder="Info", name="formChecker")
					.form-group.clearfix
						label.label Subject
						input.form-control(placeholder="Subject", name="formSubject", required)
					.form-group.clearfix
						label.label Message
						textarea.form-control(placeholder="Let us know how we can help you", name="formMessage", required)
					.col-xs-3.submit-wrap
						button.btn.btn-default.btn-submit(type="submit", value="submit") Submit
						img.loading(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/loading.gif")
					.col-xs-9.alert-wrap
.container
	.row
		.col-xs-12
			p.instructions For IE8 support create the following script to display labels:
				pre
					| &lt;!--[if lt IE 8]&gt;
					| &lt;script&gt;
					| $('#form-container label').css({'display':'inline-block !important'});
					| &lt;/script&gt;
					| &lt;![endif]--&gt;
	.container
		.row
			.col-sm-6
				p.instructions.asp
					strong ASP
					| initiate if formChecker is empty
					pre.dark.asp
						| &lt;%
						|     if (request("formChecker") = "") then
						|         ' all your form stuff here
						|     end if
						| %&gt;
			.col-sm-6
				p.instructions.php
					strong PHP
					| initiate if formChecker is empty
					pre.dark.php
						| &lt;?php
						|     if &#40;request&#40;"formChecker"&#41; == ""&#41; {
						|         // all your form stuff here;
						|     }
						| ?&gt;

## script.js
$('.loading').hide();
$('input, textarea').placeholder(); // Placeholder Browser Compatibility Plugin

function validateForm() {
	var form_message_success = "Thank you for your email, we will be in contact with you shortly",
			form_checker = document.forms["ctsForm"]["formChecker"].value,
			data = $(this).serialize(),
			action = $(this).attr("action"),
			method = $(this).attr("method");
	// Spam Filter
	if (form_checker != "") {
		console.log("spam detected");
		return false;
	}
	$(".loading").show(); // show loading gif
	// alerts & email
	$.ajax({
		url: action,
		type: method,
		data: data,
		success: function(data) {
			$(".loading").hide();
			$('.alert-message-wrap').remove();
			$('.alert-wrap').css({'display':'block'});
			$('.alert-wrap').append('<div class="alert-message-wrap alert-success"><span class="alert-message"><i class="fa fa-check"></i>' + form_message_success + '</span></div>').delay(2000).fadeOut('slow');
		},
		error: function(err) {
			console.log('email form did not submit');
			$(".loading").hide();
			$('.alert-message-wrap').remove();
			$('.alert-wrap').css({'display':'block'});
			$('.alert-wrap').append('<div class="alert-message-wrap alert-fail"><span class="alert-message"><i class="fa fa-exclamation-circle"></i>' + form_message_success + '</span></div>').delay(2000).fadeOut('slow');
		},
		complete: function() {
			$(".loading").hide();
		}
	});
	return false; // don't let the form be submitted
}


## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/html5shiv.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/jquery.placeholder.min.js"></script>

## style.css
// SASS Style Controls
$hover-bg: #999
$hover-text: #FFF
$alert-success: #09C
$alert-fail: #CD3333

@import "compass"
// General Styles
#form-container
	max-width: 600px
	min-width: 320px
	margin: 0 auto
	padding: 20px
	border: solid 4px #ccc
	background: #f0f0f0
	@include background-image(linear-gradient(#E0E0E0, #FFF))
	+border-radius(6px)
	form
		.form-checker
			display: none
		.form-group
			margin-bottom: 20px
			label
				color: #222
				text-align: left
				display: none !important
			input, label
				display: inline-block
				width: 100%
				float: left
				padding: 24px 20px
				font-size: 18px
				line-height: 26px
				+transition(all 100ms ease-in-out)
				&:focus
					outline: none
					border: solid 1px $hover-bg
					background: $hover-bg
					color: $hover-text
					+transition(all 100ms ease-in-out)
					+box-shadow(none)
					&::-webkit-input-placeholder
						color: $hover-text
			textarea
				height: 120px
				padding: 20px
				font-size: 18px
				line-height: 26px
				&:focus
					outline: none
					border: solid 1px $hover-bg
					background: $hover-bg
					color: $hover-text
					+transition(all 100ms ease-in-out)
					+box-shadow(none)
					&::-webkit-input-placeholder
						color: $hover-text
		.submit-wrap
			padding: 0
			position: relative
			.btn-submit
				border-bottom: solid 3px #999
				position: relative
				font-size: 18px
				padding: 10px 20px
				&:focus
					display: inline-block
					top: 2px
					margin-bottom: 2px
					outline: none
					+box-shadow(none)
					border-bottom: solid 1px #999
			.loading
				position: absolute
				top: -70px
				left: 50px
				margin-left: -16px
				z-index: 1
		.alert-wrap
			padding: 0
			.alert-message-wrap
				width: 100%
				min-height: 10px
				color: #fff
				padding: 15px 10px
				font-size: 12px
				+border-radius(5px)
				&.alert-success
					background: $alert-success
				&.alert-fail
					background: $alert-fail
				.alert-message
					position: relative
					display: inline-block
					padding-left: 35px
					.fa
						font-size: 26px
						position: absolute
						left: 0
						top: -5px

// Styles intended only for this example
body
	padding: 20px
h3.example-title
	text-align: center
	font-size: 22px
h4.example-subtitle
	text-align: center
	font-size: 18px
	padding-top: 6px
	color: #555
p.instructions
	text-align: justify
	padding: 20px
	line-height: 24px
	&.asp, &.php
		padding-left: 0
		padding-right: 0
	strong
		display: inline-block
		color: #fff
		padding: 2px 5px
		margin-right: 6px
		+border-radius(5px)
	&.asp strong
		background: #213D30
		color: #B4D7BF
	&.php strong
		background: #003
		color: #C6E2FF
pre.dark.asp
	border: solid 1px #213D30
	background: #213D30
	color: #B4D7BF
pre.dark.php
	background: #003
	color: #C6E2FF
	border: solid 1px #003
h3.example-title, h4.example-subtitle, p.instructions
	max-width: 600px
	margin: 0 auto
	font-family: helvetica-neue, helvetica, sans-serif

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css" rel="stylesheet" />
	.container
	.row
	.col-xs-12
	h3.example-title Bootstrap Form Spam Filter
	h4.example-subtitle No CAPTCHA or Human Testers
	p.instructions Most spam emails will fill out all fields in a form based on the DOM elements on a page without reading the CSS. In this form there is a field called 'formChecker' wrapped in '.form-checker' with 'Display: none' added in the CSS. If this field is filled out a 'return false' is triggered in the JS, causing the email to not be sent.
	br
	strong Chrome, Safari, Firefox, IE9+
	#form-container.clearfix
	form#ctsForm(role="form", name="ctsForm", onsubmit="return validateForm()").clearfix
	.form-group.clearfix
	label.label Name
	input.form-control(placeholder="Name", name="formName", required)
	.form-group.clearfix
	label.label Phone
	input.form-control(placeholder="Phone Number", name="formPhone")
	.form-group.clearfix
	label.label Email
	input#form-email.form-control(placeholder="Email Address", name="formEmail", type="email", required)
	.form-group.clearfix.form-checker
	label.label Info
	input.form-control(placeholder="Info", name="formChecker")
	.form-group.clearfix
	label.label Subject
	input.form-control(placeholder="Subject", name="formSubject", required)
	.form-group.clearfix
	label.label Message
	textarea.form-control(placeholder="Let us know how we can help you", name="formMessage", required)
	.col-xs-3.submit-wrap
	button.btn.btn-default.btn-submit(type="submit", value="submit") Submit
	img.loading(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/loading.gif")
	.col-xs-9.alert-wrap
	.container
	.row
	.col-xs-12
	p.instructions For IE8 support create the following script to display labels:
	pre
	\| <!--[if lt IE 8]>
	\| <script>
	\| $('#form-container label').css({'display':'inline-block !important'});
	\| </script>
	\| <![endif]-->
	.container
	.row
	.col-sm-6
	p.instructions.asp
	strong ASP
	\| initiate if formChecker is empty
	pre.dark.asp
	\| <%
	\| if (request("formChecker") = "") then
	\| ' all your form stuff here
	\| end if
	\| %>
	.col-sm-6
	p.instructions.php
	strong PHP
	\| initiate if formChecker is empty
	pre.dark.php
	\| <?php
	\| if (request("formChecker") == "") {
	\| // all your form stuff here;
	\| }
	\| ?>
	$('.loading').hide();
	$('input, textarea').placeholder(); // Placeholder Browser Compatibility Plugin

	function validateForm() {
	var form_message_success = "Thank you for your email, we will be in contact with you shortly",
	form_checker = document.forms["ctsForm"]["formChecker"].value,
	data = $(this).serialize(),
	action = $(this).attr("action"),
	method = $(this).attr("method");
	// Spam Filter
	if (form_checker != "") {
	console.log("spam detected");
	return false;
	}
	$(".loading").show(); // show loading gif
	// alerts & email
	$.ajax({
	url: action,
	type: method,
	data: data,
	success: function(data) {
	$(".loading").hide();
	$('.alert-message-wrap').remove();
	$('.alert-wrap').css({'display':'block'});
	$('.alert-wrap').append('<div class="alert-message-wrap alert-success"><span class="alert-message"><i class="fa fa-check"></i>' + form_message_success + '</span></div>').delay(2000).fadeOut('slow');
	},
	error: function(err) {
	console.log('email form did not submit');
	$(".loading").hide();
	$('.alert-message-wrap').remove();
	$('.alert-wrap').css({'display':'block'});
	$('.alert-wrap').append('<div class="alert-message-wrap alert-fail"><span class="alert-message"><i class="fa fa-exclamation-circle"></i>' + form_message_success + '</span></div>').delay(2000).fadeOut('slow');
	},
	complete: function() {
	$(".loading").hide();
	}
	});
	return false; // don't let the form be submitted
	}
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/html5shiv.min.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/jquery.placeholder.min.js"></script>
	// SASS Style Controls
	$hover-bg: #999
	$hover-text: #FFF
	$alert-success: #09C
	$alert-fail: #CD3333

	@import "compass"
	// General Styles
	#form-container
	max-width: 600px
	min-width: 320px
	margin: 0 auto
	padding: 20px
	border: solid 4px #ccc
	background: #f0f0f0
	@include background-image(linear-gradient(#E0E0E0, #FFF))
	+border-radius(6px)
	form
	.form-checker
	display: none
	.form-group
	margin-bottom: 20px
	label
	color: #222
	text-align: left
	display: none !important
	input, label
	display: inline-block
	width: 100%
	float: left
	padding: 24px 20px
	font-size: 18px
	line-height: 26px
	+transition(all 100ms ease-in-out)
	&:focus
	outline: none
	border: solid 1px $hover-bg
	background: $hover-bg
	color: $hover-text
	+transition(all 100ms ease-in-out)
	+box-shadow(none)
	&::-webkit-input-placeholder
	color: $hover-text
	textarea
	height: 120px
	padding: 20px
	font-size: 18px
	line-height: 26px
	&:focus
	outline: none
	border: solid 1px $hover-bg
	background: $hover-bg
	color: $hover-text
	+transition(all 100ms ease-in-out)
	+box-shadow(none)
	&::-webkit-input-placeholder
	color: $hover-text
	.submit-wrap
	padding: 0
	position: relative
	.btn-submit
	border-bottom: solid 3px #999
	position: relative
	font-size: 18px
	padding: 10px 20px
	&:focus
	display: inline-block
	top: 2px
	margin-bottom: 2px
	outline: none
	+box-shadow(none)
	border-bottom: solid 1px #999
	.loading
	position: absolute
	top: -70px
	left: 50px
	margin-left: -16px
	z-index: 1
	.alert-wrap
	padding: 0
	.alert-message-wrap
	width: 100%
	min-height: 10px
	color: #fff
	padding: 15px 10px
	font-size: 12px
	+border-radius(5px)
	&.alert-success
	background: $alert-success
	&.alert-fail
	background: $alert-fail
	.alert-message
	position: relative
	display: inline-block
	padding-left: 35px
	.fa
	font-size: 26px
	position: absolute
	left: 0
	top: -5px

	// Styles intended only for this example
	body
	padding: 20px
	h3.example-title
	text-align: center
	font-size: 22px
	h4.example-subtitle
	text-align: center
	font-size: 18px
	padding-top: 6px
	color: #555
	p.instructions
	text-align: justify
	padding: 20px
	line-height: 24px
	&.asp, &.php
	padding-left: 0
	padding-right: 0
	strong
	display: inline-block
	color: #fff
	padding: 2px 5px
	margin-right: 6px
	+border-radius(5px)
	&.asp strong
	background: #213D30
	color: #B4D7BF
	&.php strong
	background: #003
	color: #C6E2FF
	pre.dark.asp
	border: solid 1px #213D30
	background: #213D30
	color: #B4D7BF
	pre.dark.php
	background: #003
	color: #C6E2FF
	border: solid 1px #003
	h3.example-title, h4.example-subtitle, p.instructions
	max-width: 600px
	margin: 0 auto
	font-family: helvetica-neue, helvetica, sans-serif
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85807/font-awesome.css" rel="stylesheet" />