alt-web logo

Tips & Tutorials for Web Designers

Monday, July 27, 2015

Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1)

This is Part 1 of a 3 Part Tutorial.

Today I will show you how to create a responsive contact form with Bootstrap's font-end framework and secure PHP code. When we are finished, your working contact form will:
  • Conceal your email address from robot harvesters,
  • Self-validate required input fields with server-side code, 
  • Test for robot submissions, 
  • Sanitize input fields & thwart header injections, 
  • Give feedback to your users,
  • Finally, the PHP script will send form data to your email address.  
NOTE:  Your server must support PHP 5.3 or higher and the PHP Mail () function.  If unsure, check with your web hosting provider.

LIVE DEMO

Let's get started.

Bootstrap is a very popular responsive code framework.  If you're new to Bootstrap, there is excellent documentation for it online.
To begin our project, we need an HTML5 document with links to Bootstrap & jQuery files hosted on content distribution networks or CDNs. I'm using these because it saves you the drudgery of downloading and uploading scripts to your server. 

Basic HTML5 document with Bootstrap 3.2.0 (feel free to use the latest version if you wish).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Form and PHP Script</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">

<!--Our form will go inside here...>

<!--end col--></div>
<!--end row--></div>
<!--end container--></div>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>


 Next we will add a centered column block and form with some labels and input fields, a textarea for comments and a human test or math problem to keep robots from sending us spam.  To style our form, we will use the built-in Bootstrap form classes.

Bootstrap Form Code:

<div class="col-md-8 center-block">

 <h3>Responsive Contact Form</h3>
<p class="required small">* = Required fields</p>
<!--begin HTML Form-->
<form class="form-horizontal" role="form" method="post" action=" ">

<div class="form-group">
<label for="name" class="col-sm-3 control-label"><span class="required">*</span> Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last">
</div>
</div>

<div class="form-group">
<label for="email" class="col-sm-3 control-label"><span class="required">*</span> Email: </label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com">
</div>
</div>

<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone: </label>
<div class="col-sm-9">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>

<div class="form-group">
<label for="message" class="col-sm-3 control-label"><span class="required">*</span> Message:</label>
<div class="col-sm-9">
<textarea class="form-control" row="4" name="message" placeholder="Tell us your story?"></textarea>
</div>
</div>

<div class="form-group">
<label for="human" class="col-sm-3 control-label"><span class="required">*</span> Human Test:</label>
<div class="col-sm-4">
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
<!--end Form--></form>
<!--end col block--></div>


So far, so good.  Here's what our responsive form looks like.
Not too bad but I think it could use some CSS to make the required fields stand out more.  Also we can center the form on desktops and shore up the human math problem with it's adjacent label.  Add this CSS to your document's <head> tag.

<style>
.required {color:red; font-weight:bold}
.center-block {float:none}
.human {margin: 0 0 0 12px}
</style>


To summarize our work so far, here is the entire HTML5 code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Form and PHP Script</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.required {color:red; font-weight:bold}
.center-block {float:none}
.human {margin: 0 0 0 12px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-md-8 center-block">

 <h3>Responsive Contact Form</h3>
<p class="required small">* = Required fields</p>
<!--begin HTML Form-->
<form class="form-horizontal" role="form" method="post" action=" ">

<div class="form-group">
<label for="name" class="col-sm-3 control-label"><span class="required">*</span> Name:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last">
</div>
</div>

<div class="form-group">
<label for="email" class="col-sm-3 control-label"><span class="required">*</span> Email: </label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="email" placeholder="you@domain.com">
</div>
</div>

<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone: </label>
<div class="col-sm-9">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="(123) 456-7890">
</div>
</div>

<div class="form-group">
<label for="message" class="col-sm-3 control-label"><span class="required">*</span> Message:</label>
<div class="col-sm-9">
<textarea class="form-control" row="4" name="message" placeholder="Tell us your story?"></textarea>
</div>
</div>

<div class="form-group">
<label for="human" class="col-sm-3 control-label"><span class="required">*</span> Human Test:</label>
<div class="col-sm-4">
<h3 class="human">6 + 6 = ?</h3>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">
<button type="submit" id="submit" name="submit" class="btn-lg btn-primary btn-block">SUBMIT</button>
</div>
</div>
<!--end Form--></form>
<!--end col block--></div>

<!--end col--></div>
<!--end row--></div>
<!--end container--></div>
<!--Latest jQuery Core Library-->
<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!--Bootstrap-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

And here is what our form looks like now.

In Part 2 of this tutorial, I will discuss the PHP code.  We will define variables, check for empty fields, create error messages and sanitize input data to keep malicious hackers from exploiting our form. 

In Part 3 of this tutorial, I will show you how to connect your form to the processing script and add server-side error reporting directly to your contact form.




Posted by at
Labels: , , , ,