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
[purchase_link id="1910" text="Download complete source code $10.00" style="button" color="gray"]
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="https://eisabainyo.net/weblog" rel="external">Web Development Blog</a>. Check out <a href="https://eisabainyo.net/weblog/tips-resources" rel="external">tip & 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
[purchase_link id="1910" text="Download complete source code $10.00" style="button" color="gray"]
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
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
@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.
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.
@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!
You can try it here… to see what I mean http://vismerstudios.com/contactform/
An less verbose way to get the form values is to use serializeArray. You can see an sample on http://jsfiddle.net/aLAFj/
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….
@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?