How to Build a Modal Contact Form in Twitter Bootstrap with PHP + AJAX

With the built-in styles provided to us by Twitter Bootstrap, designing a simple contact form becomes streamlined. When you’re looking to streamline your site even further, you might not even need a dedicated contact page if no other info would be found there. A modal box is a nice, unobtrusive alternative, and Bootstrap allows us to also create that with ease. Let’s take a look at how to put that together then add PHP & AJAX to make a no-refresh contact form come to life. The purpose here isn’t to dive into anything too complex, but we will have a functional, usable form by the end.

---

View Demo | Download Source Files

---

We’ll start off with the markup, which makes extensive use of Bootstrap’s class definitions. The framework has us define a header, body, and footer for the popup. The button at the end will open the content and is wrapped in a “thanks” div for a reason we’ll come back to in a bit:

<div id="form-content" class="modal hide fade in" style="display: none;">
	<div class="modal-header">
		<a class="close" data-dismiss="modal">×</a>
		<h3>Send me a message</h3>
	</div>
	<div class="modal-body">
		<form class="contact" name="contact">
			<label class="label" for="name">Your Name</label><br>
			<input type="text" name="name" class="input-xlarge"><br>
			<label class="label" for="email">Your E-mail</label><br>
			<input type="email" name="email" class="input-xlarge"><br>
			<label class="label" for="message">Enter a Message</label><br>
			<textarea name="message" class="input-xlarge"></textarea>
		</form>
	</div>
	<div class="modal-footer">
		<input class="btn btn-success" type="submit" value="Send!" id="submit">
		<a href="#" class="btn" data-dismiss="modal">Nah.</a>
	</div>
</div>
<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

You didn’t forget to include jQuery and bootstrap.js in your document, did you? We’ll need them to let the modal box animate in and out of existence. Additionally, this is the JavaScript we need in our header to perform a couple of actions specifically for our form:

$(document).ready(function () {
	$("input#submit").click(function(){
		$.ajax({
			type: "POST",
			url: "process.php", //process to mail
			data: $('form.contact').serialize(),
			success: function(msg){
				$("#thanks").html(msg) //hide button and show thank you
				$("#form-content").modal('hide'); //hide popup	
			},
			error: function(){
				alert("failure");
			}
		});
	});
});

We’ll have to use PHP to actually send the email from the server side of things. So as a preliminary measure, we’ve queued up our script’s file as the url attribute. After, to keep this all working without refreshing the page, AJAX allows us to select that “thanks” div from earlier and reuse data-toggle to hide the modal content then replace the button with a special ending message.

Everything is tied together with our PHP file. In process.php, the following will generate the ending message for “#thanks” then send it to a specified email address.

<?php
//add the recipient's address here
$myemail = 'youremail@host.com';

//grab named inputs from html then post to #thanks
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";	
echo "<stong>Email:</strong> ".$email."<br>";	
echo "<stong>Message:</strong> ".$message."<br>";

//generate email and send!
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>

That’s everything. Check out the demo, download the source files, and experiment with the design!

---

View Demo | Download Source Files