Web Development Blog

by Ei Sabai Nyo

29 Jun, 2011

Creating a Contact Form in jQuery Mobile and PHP    

This is a step-by-step tutorial on how to create a contact form in jQuery Mobile. I have also included complete php source code that can be used as a web service to send emails from your server.

Download

 

1. Create a folder structure
The first thing you need to do is create a folder structure where all your files will live. My folder structure is as follows:

- www
-- api
--- send.php
-- js
--- contact.js
-- css
--- contact.css
-- index.html

2. Copy and paste the following boilerplate template
This will go into index.html file that you’ve created. Note that we are including the Javascript and CSS files from the jQuery Mobile server. You can also download the latest version of jQuery Mobile from the website and include the local copy.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Contact Us</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Contact Us</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<!-- Content goes here -->
	</div><!-- /content -->

	<div data-role="footer">
		<p>Source code by <a href="http://eisabainyo.net/weblog" rel="external">Web Development Blog</a>.  Check out <a href="http://eisabainyo.net/weblog/tips-resources" rel="external">tip &amp; resources</a> for Web Developers.</a></p>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

3. Add HTML form in the content area
Add the following code into <div data-role=”content”>

		<div class="contact-thankyou" style="display: none;">
			Thank you.  Your message has been sent.  We will get back to you as soon as we can.
		</div>
		<div class="contact-form">
			<p class="mandatory">* indicates Manadatory Field</p>
			<div data-role="fieldcontain" class="text-field">
				<label for="firstname">First Name*:</label>
				<input type="text" name="firstname" value="" placeholder="" class="required" id="firstname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="surname">Last Name:</label>
				<input type="text" name="surname" value="" placeholder="" id="surname" />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="email">Email Address*:</label>
				<input type="email" name="email" value="" placeholder="" class="required" id="email"  />
			</div>
			<div data-role="fieldcontain" class="text-field">
				<label for="mobilephone">Mobile Number:</label>
				<input type="number" name="mobilephone" value="" placeholder="" id="mobilephone" />
			</div>
			<div data-role="fieldcontain">
				<label for="state">State:*</label>
					<select name="state" class="required" id="state">
						<option value="" data-placeholder="true">Please select your state</option>
						<option value="ACT">ACT</option>
						<option value="NSW">NSW</option>
						<option value="NT">NT</option>
						<option value="QLD">QLD</option>
						<option value="SA">SA</option>
						<option value="TAS">TAS</option>
						<option value="VIC">VIC</option>
						<option value="WA">WA</option>
					</select>
			</div>
			<div data-role="fieldcontain">
				<label for="message">Message*:</label>
				<textarea name="message" id="message" placeholder="" class="required"></textarea>
			</div>
			<div class="send"><a href="javascript:;" data-role="button" data-theme="a" data-iconpos="right" id="send-feedback">send feedback</a></div>
		</div><!-- //.contact-form -->
		

4. Create a web service in PHP to send email
We have a folder called api and we will create a new file called send.php in the api folder. You will need to change the $recipient variable.

<?php 
header('content-type: application/json; charset=utf-8');

if (isset($_GET["firstname"])) {
	$firstname = strip_tags($_GET['firstname']);
	$surname = strip_tags($_GET['surname']);
	$email = strip_tags($_GET['email']);
	$mobilephone = strip_tags($_GET['mobilephone']);
	$state = strip_tags($_GET['state']);
	$message = strip_tags($_GET['message']);
	$header = "From: ". $firstname . " <" . $email . ">rn"; 

	$ip = $_SERVER['REMOTE_ADDR']; 
	$httpref = $_SERVER['HTTP_REFERER']; 
	$httpagent = $_SERVER['HTTP_USER_AGENT']; 
	$today = date("F j, Y, g:i a");    
	
	$recipient = 'YOUREMAILADDRESS@DOMAIN.COM';
	$subject = 'Contact Form';
	$mailbody = "
First Name: $firstname 
Last Name: $surname 
Email: $email 
Mobile Phone: $mobilephone 
State: $state
Message: $message

IP: $ip
Browser info: $httpagent
Referral: $httpref
Sent: $today
";
	$result = 'success';

	if (mail($recipient, $subject, $mailbody, $header)) {
		echo json_encode($result);
	}
}
?>

5. Add Javascript code to handle form onsubmit
Create a file called contact.js with the following content and include it in your HTML file.

$('#send-feedback').live("click", function() {
	var url = 'api/send.php';
	var error = 0;
	var $contactpage = $(this).closest('.ui-page');
	var $contactform = $(this).closest('.contact-form');
	$('.required', $contactform).each(function (i) {
        if ($(this).val() === '') {
			error++;
        } 
	}); // each
	if (error > 0) {
			alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.');	
	} else {
		var firstname = $contactform.find('input[name="firstname"]').val();
		var surname = $contactform.find('input[name="surname"]').val();
		var state = $contactform.find('select[name="state"]').val();
		var mobilephone = $contactform.find('input[name="mobilephone"]').val();
		var email = $contactform.find('input[name="email"]').val();	
		var message = $contactform.find('textarea[name="message"]').val();	

		//submit the form
		$.ajax({
			type: "GET",
			url: url,
			data: {firstname:firstname, surname:surname, state: state, mobilephone: mobilephone, email: email, message: message},
            success: function (data) {
				if (data == 'success') {
					// show thank you 
					$contactpage.find('.contact-thankyou').show();
					$contactpage.find('.contact-form').hide();
				}  else {
					alert('Unable to send your message. Please try again.');
				}
			}
		}); //$.ajax

	}
	return false;
});

After completing all the above steps, you will have a fully functional contact form built using jQuery Mobile, HTML5, and PHP.

Download

 

If you would like to get a sample phonegap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.


Screenshot of Contact Form in jQuery Mobile

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

8 Responses to “Creating a Contact Form in jQuery Mobile and PHP”

  1. Alejandro says:

    hi, I tried this, and everything seems to be right, but when hitting the button send feedback nothing happens, I’m trying it in an iphone 4, let me know what more informatiion could be helpful

  2. eisabai says:

    @Alejandro, did you get any error alert when you leave the required fields empty and hit submit? If you don’t then, the javascript you have is probably broken. If you do, but you don’t get a thank you message after filling in all the fields and submitting, then the web service (API in PHP) is broken. Please make sure you don’t have any typos or syntax errors.

  3. HostZilla says:

    I’m a lot a mute reader, however this put up compelled me to info that original alone of the right posts I posit unravel.

  4. Alejandro says:

    @eisabai hi, thanks for the reply, I don’t get neither error messages nor thank you messages, I don’t get the email, it’s like the button doesn’t work, I tap it, and doesn’t get me anywhere, I’m gonna check sintax tho, thanks!

  5. Alejandro says:

    You can try it here… to see what I mean http://vismerstudios.com/contactform/

  6. david says:

    An less verbose way to get the form values is to use serializeArray. You can see an sample on http://jsfiddle.net/aLAFj/

  7. Andy says:

    You need to wrap a tag round your form elements to trigger the submit button. That said, after adding that it works in Safari on the Mac but not on the iPhone….

  8. Alejandro says:

    @David this code looks really simple, and JSFiddle seems a really useful page, I was looking for a contact form more like the one @eisabai did tho.

    @Andy, what tag is the one to wrap the elements?

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories