Last week we published an article with different methods to hide e-mail addresses on websites. Because of several comments with suggestions on how-to solve this problem, we provide this week a solution which is “from these days” and more powerful.

Based on the idea if you don’t show an address, a spambot can’t see it, we use in our example a simple Ajax call (using jQuery) and show a tiny box with some friendly message including the link with e-mail address.
DEMO: We used the code from this tutorial on the this page.

How does it work?

First we need to create a simple php file that holds the content and the e-mail address, we use json_encode to make the string less readable:

<?php
// change the two vars below
$email = 'user@mail.com';
$html = 'Please contact us by e-mail: <a href="mailto:%%mAdr%%">%%mAdr%%</a><br /><br />
<a href="javascript:void(0);" id="hideme">Close</a>';
 
$eparts = explode('@', $email);
$data = array('ename'=>$eparts[0], 'dom'=>$eparts[1], 'htmlcode'=>$html);
echo json_encode($data);
?>

Don’t forget to block that file in your robots.txt file!

Now we need a function that will load the external content into the current page using an Ajax request.

$(document).ready(function() { 	
	$("#clickme").live('click', function() { 
    	$.ajax({
	  		url: 'glink.html',
                        dataType: 'json',
	  		success: function(data) {
				var adr = data.ename + '@' + data.domain;
	  			var newdata = data.htmlcode.replace(/%%mAdr%%/g, adr); 
				$('span#ajaxresp').html(newdata).slideDown('slow');
				return false; 				
	  		}
	  	});
	});	
	$("#hideme").live('click', function () { 	
		$("span#ajaxresp").html('').slideUp('slow');
		return false; 
	});
});

jQuery code in detail

A visitor has clicked the element with the ID “clickme” and the Ajax request for the file “glink.php” is done. On “success” parse the html string with the two other json pairs and add the result to the SPAN element with ID “ajaxresp” is filled with the response from the external file and the box will slide down. To make the elements from the Ajax content accessible, we use “live()” events instead of the “regular” click event.
The visitor need to click the element with ID “hideme” to slide an empty “Ajax box” back to the original position.

Additional we give our dynamic email box some style using CSS:

span#ajaxresp {
	margin: 5px 0;
	text-align: center;
	padding:10px;
	display: none;
	border:2px solid #CCCCCC;
	background-color:#EDECEB;
}

The following code holds the “contact” link which is using the click event and the small container where the Ajax response data is placed.

<a href="javascript:void(0);" id="clickme">Contact</a><span id="ajaxresp">

If your visitor has clicked this “contact” link the following box appears:

If you have the jQuery and CSS code in external files, it’s possible to use the function on all your pages. The best thing is that the loaded box has also room for a personal message for your visitor. It’s just a simple solution without the need of building a contact form. This was the third article of a series with solutions on how-to add the contact information to your article or website.

Similar Posts:

• jQuery Contact form for your website
• E-mail links, protective solutions against SPAM
• Ajax requests using jQuery and PHP

There are several tutorials on the Internet on how-to integrate the Google Custom search in your website, but the results are not very attractive. The older iframe version doesn’t fit perfectly in most of our templates and the style for ads and results doesn’t look good in the past. A few month Google has released some nice new features:

• Custom search element placements
• Custom styles and themes using CSS
• Promotions, set your own premium results for specific search queries
• A new AJAX powered CSE using the Google AJAX API loader

With all these new features the CSE (Custom Search Engine) becomes very attractive to use it on your own site as site search. In this tutorial we show you how-to add the custom search feature to you site using jQuery, the Thickbox plugin and the AJAX API provided by Google. To do this a result page is not necessary anymore, we show only a search box somewhere on a particular website.

Including the Google API, jQuery and the Thickbox plugin

First include the following rows to your page HEAD, you need to add them on every page where you like to show the search box.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />
<script type="text/javascript" src="thickbox.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOURAPYKEY"></script>

To use the Google API you need to register an API key for your website, request a key here.

HTML code for the search box

Below the simple HTML code for the search form and the container for the results. Place both somewhere on your webpage.

<div id="searchcont">
	<label for="query_input">Search Query: </label>
	<input type="text" id="query_input" />
	<input type="button" value="ok" id="searchbtn" />
</div>
<div id="resultcont">
	<div id="title" style="visibility:hidden;"><a href="#">Close</a></div>
	<div id="results"></div>
</div>

jQuery code snippet

The following JS code will load the Google API and if the user has clicked the search button the customSearchControl is initiated, the Thickbox is called, the title inside the Thickbox becomes visible, the result element is prepared and at last the input element value is executed for the search query. Add this code in your page’s HEAD surrounded by some script tags.

google.load('search', '1');
$(document).ready(function() {
	$("#searchbtn").click(function () {
		var customSearchControl = new google.search.CustomSearchControl('UNIQUE_CSE_ID');
		tb_show("", "#TB_inline?height=480&width=800&inlineId=resultcont&modal=true");
		$('#title').css("visibility", "visible");   
		var drawOptions = new google.search.DrawOptions();
		customSearchControl.draw(document.getElementById("results"), drawOptions);
		customSearchControl.execute(document.getElementById("query_input").value);
	});
	$("#title a").click(function () {
		tb_remove();
		$('#title').css("visibility", "hidden");   
		$("#results").hide();
	});
});

The other click event is used to hide the Thickbox, the event will hide the title and hides also the results. The last action is needed because we show an inline element, if we don’t hide the content the results are still visible after the Thickbox is closed.

That’s all, simple or not? The code above needs of course some styling. I used a slightly modified version for my network site search on this blog. If you search for “wordpress” you see the “promotion” feature I mentioned above.

Similar Posts:

• Ajax requests using jQuery and PHP
• Your e-mail address hidden with jQuery?
• jQuery Contact form for your website

These days it’s very hard to prevent your e-mail box against spam if you like to get in touch with your website’s visitors. If you place some e-mail address on your website or even a regular contact form makes you possibly a victim of spambots. There are many ways to protect your inbox against spam, spam filters and protections on your contact form page will help for sure.

In this tutorial we show how to create a modern contact form that is linked by a simple text link and opens in a fancy Lightbox where all form handling, including reCAPTCHA validations, are processed by PHP and the jQuery Ajax function. After the form submission was successful we are using the PHP Class script PHPMailer to send the message via SMTP.

Previous Tutorials we have used for this application

Create custom reCAPTCHA images using their API
We use the reCAPTCHA API to create a user validation image to protect the form against spam attacks.

Sending e-mails via SMTP with PHPmailer and Gmail
We send e-mail messages using the PHPmailer script via SMTP, the mail function from this previous tutorial is the base for this tutorial as well.

Next we use the Ajax function from jQuery to send the form variables to our PHP e-mail script. This tutorial describes how-to to use all the functions in one application, please check the other tutorials if you need more information. We will not explain the code for PHPMailer and reCAPTCHA in this tutorial. You need an API key for the reCAPTCHA service.

Thickbox jQuery Plugin

We use the Thickbox plugin for this tutorial because we think that this plugin is easy to use and very flexible. If you visit the Thickbox website you will notice some “warning” from the developer, he says that he doesn’t continue the development. If you don’t like to use the Thickbox plugin you need to use one of the other Lightbox plugins available on the Internet. Since the application is not related to the Thickbox plugin, it should be easy to use that code with most other Lightbox scripts as well.

Contact form

This page is used to collect the users input, will validate the input on the client side and will post the data to the PHP e-mail script. Create a file with this code and call it contact-form.html

<html>
<head>
<title>Contact form</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js"></script>
<script type="text/javascript">

Next we have the jQuery script block for the form validations, Ajax form submission and the code to request the challenge image from the reCAPTCHA API.

After the document is loaded the reCAPTCHA images is added. If the user has clicked the button #submit_button the Ajax function is called with:

• Options like the PHP e-mail script,
• the form data,
• the data type JSON,
• a pre-submit handler for the form field validations
• and a success handler that put the response into the #output container.

$(document).ready(function() { 	
	var RecaptchaOptions = { theme : 'custom' };
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
 	Recaptcha.focus_response_field();
	$('#submit_button').click(function() { 
		$.ajax({
			type: 'POST',
			url: 'email.php',
			data: $('form#myform').serialize(),
			dataType: 'json',
			beforeSend: function() {
				var resp_field = $('#recaptcha_response_field').val();
				var name = $('#name').val();
				var email = $('#email').val();
				var message = $('#message').val();
				if (!resp_field[0] || !name[0] || !email[0] || !message[0]) { 
					$('#output').html('All fields are required');
					return false; 
				}
				emailpat = /^([a-z0-9])+([\.a-z0-9_-])*@([a-z0-9])+(\.[a-z0-9_-]+)+$/i;
				if (!emailpat.test(email)) {
					$('#output').html('The e-mail address is not valid.'); 
					return false;
				}
			},
			success: function(response) {
				if (response.status == 'success') {
					$('#formcont').html();
				}
				$('#output').html(response.errmessage);
			}
		});
	});
});

The form has just a few fields for name, e-mail address and message. Note the container with the ID recaptcha_image, this DIV element holds the reCAPTCHA challenge image.

</script>
</head>
<body>
	<h1>Contact form</h1>
	<div id="formcont">				
		<form id="myform">
			<p>
				<label for="naam">Name:</label>
				<input type="text" name="name" id="name" size="30" />
			</p>
			<p>
				<label for="email">E-mail:</label>
				<input type="text" name="email" id="email" size="30" />
			</p>
			<p>
				<label for="message">Message:</label>
				<textarea rows="5" cols="30" name="message" id="message"></textarea>
			</p>
			<div id="recaptcha_image"></div>
			<p>
				<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="20" />
				<input type="button" value="Submit" id="submit_button" /> 
			</p>
		</form>
	</div>
	<div id="output"></div>
</body>
</html>

PHP e-mail script

So far the client side code, now we need an email script called email.php with following functions:

• One that validates the submitted reCAPTCHA answer against the API,
• has some basic validations on the server side (empty fields)
• sends the e-mail message using the PHPmailer class,
• and responds (echo) the message in JSON format.

<?php
require_once('PHPMailer/class.phpmailer.php');
$resp['status'] = 'error';
$resp['errmessage'] = '';
 
if (!empty($_POST)) {
	if (!empty($_POST['email']) && !empty($_POST['message']) && !empty($_POST['name']) && !empty($_POST['recaptcha_response_field'])) {
		$answer = trim(stripslashes($_POST['recaptcha_response_field']));
		$postData['challenge'] = $_POST['recaptcha_challenge_field'];	
		$postData['response'] = urlencode($answer);
		$postData['remoteip'] = $_SERVER['REMOTE_ADDR'];
		$postData['privatekey'] = 'your private key';
		$ch = curl_init("http://api-verify.recaptcha.net/verify");
		curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		$data = curl_exec($ch);
		curl_close($ch);
		$response = explode(PHP_EOL, $data);
		if ($response[0] == 'true') {
			$mail = new PHPMailer();
			$mail->IsSMTP(); // enable SMTP
			$mail->SMTPDebug = 0;  // debugging: 1 = errors and messages, 2 = messages only
			$mail->SMTPAuth = true;  // authentication enabled
			$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for Gmail
			$mail->Host = 'smtp.gmail.com';
			$mail->Port = 465; 
			$mail->Username = 'you at gmail dot com';
			$mail->Password = 'your gmail password';      
			$mail->SetFrom('you@website.com'); 
			$mail->Body = 'Name: '.$_POST['name'] . PHP_EOL . 
				'E-mail: ' . $_POST['email'] . PHP_EOL . PHP_EOL . 
				'Message:' . PHP_EOL . $_POST['message'];
			$mail->Subject = 'Some message from your site';
			$mail->AddAddress('Igetthe@mail.com');
			if (!$mail->Send()) {
				$resp['errmessage'] = 'Mail error: '.$mail->ErrorInfo;
				$resp['status'] = 'success';
			} else {
				$resp['errmessage'] = 'Message submitted succesfully!';
			}
		} else {
			if ($response[1] == 'incorrect-captcha-sol') {
				$resp['errmessage'] = 'The entered text from the Captcha image is wrong.';
			} else {
				$resp['errmessage'] = 'Can\'t validate the Captcha image.';
			}
		}
	} else {
		$resp['errmessage'] = 'Missing required fields!';
	}
} 
echo json_encode($resp);
?>

How-to use it on your website?

if you have finished both files you can use them on your site, upload the two created files, the jQuery library, the Thickbox plugin files and the PHPmailer class (if you don’t have those files on your server). Double check all the paths and add the jQuery library and the Thickbox plugin files to the page header from that page, where you like to place one or more Contact links:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link href="thickbox.css" rel="stylesheet" type="text/css" />

You don’t need to add more jQuery code because the code is already included in the Thickbox plugin file. Use the following code for each link:

<a href="contact-form.html?TB_iframe=true&height=480&width=640" class="thickbox">Contact</a>

That’s all, if you have any questions please post them below. At the moment there is no demo but you can download the example code here.

Similar Posts:

• jQuery form plugin and PHP file uploads
• Ajax requests using jQuery and PHP
• Create custom reCAPTCHA images using their API

Our last tutorial about the flickr API was an example on how-to search the flickr photo database for images using some short PHP code. This time we will use parts from the past tutorial together with some jQuery Ajax requests to show our photo search result without reloading the web page.

jQuery’s Ajax implementation

One of the most powerful jQuery functions is the Ajax function. The function provides enough options to make your XMLHttpRequest flexible enough to define;

• what type of response you need like to handle in your Ajax application (XML, JSON, HTML, script or text)
• an option about what the script need to do before the request is send (validations, set a pre-loading image, etc.)
• What to do after the request and response are successful
• and options like the request URL (f.e. your PHP script), the time-out value and more. Check the jQuery page for all available options.

The Ajax powered flickr image search

In this tutorial we will create a PHP script that will search the flickr database for posted values using the flickr API. On the client site we will use some simple HTML search form and some easy to understand jQuery Ajax code to handle the requests. If you like to test this tutorial code your should try our flickr Ajax search demo.

HTML search form

For this tutorial we create a simple form with only one search field and a button. Below the form we have a DIV container with ID result as placeholder for the images. Inside the header we need to include the latest jQuery library, download a copy from the jQuery website if you haven’t done yet.

<form>
	<div>
		<label>Enter keyword</label>
		<input type="text" name="search" id="search" value="" />
		<input type="button" name="submit" id="searchBtn" value="Search" />
	</div>					
</form>
<div id="result"></div>

jQuery Ajax functions

We use a click event to process the search if the user had clicked the forms button. Before we post the request to our PHP file getFlickr.php, we perform a test for the search field. If there is no search string we return to the document with an error message. Otherwise we send the posted value to our script for further processing. If the response is successful, we pass the data to our target container with the ID result.

$(document).ready(function(){
	$('#searchBtn').click(function() { 
		var searchVal = $('#search').val();
		$.ajax({
			type: 'GET',
			url: 'getFlickr.php',
			data: 'search=' + searchVal,
			dataType: 'html',
			beforeSend: function() {
				$('#result').html('<img src="loading.gif" alt="loading..." />');
				if(!searchVal[0]) {
					$('#result').html('<p>Please enter a keyword as search value.</p>');   	
					return false;
				} 	
			},
			success: function(response) {
				$('#result').html(response);
				tb_init('a.thickbox');
			}
		});
	});
});

PHP code for the flickr API

the following PHP snippet is based on the flickr API tutorial from the last. If you need information about the API methods, please check the previous tutorial.

<?php
class Flickr { 
	private $apiKey = 'YOUR_API_KEY'; 
	public function __construct() {
	} 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=12&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}
 
if (!empty($_GET['search'])) {
	$Flickr = new Flickr; 
	$data = $Flickr->search(stripslashes($_GET['search'])); 
	$html = '';
	if (!empty($data['photos']['total'])) {
		$html = '<p>Total '.$data['photos']['total'].' photo(s) for this keyword.</p>';	
		foreach($data['photos']['photo'] as $photo) { 
			$html .=  '
			<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg" alt="" />'; 
		}
	} else {
		$html = '<p>There are no photos for this keyword.</p>';
	}
	echo $html;
}
?>

In this script we accept only the POST GET values from the HTML form we have created. If the post GET var is empty we stop the script and shoot some default error, because the field validation was already done on the client side. Next we query the flickr API for the search value and if we have a positive result (getting some photos) we use a foreach loop to create the HTML code for the thumbnails (note the _s at the end of the image file name) At the end we echo the response in HTML format. Save this script under the getFlickr.php

If everything works fine and your search has returned some photos, you script should looks like this:

If you need more control on how your form and result should work, check the jQuery documentation. Maybe you like to use more animation effects for the results.
Similar Posts:

• Create custom reCAPTCHA images using their API
• jQuery Contact form for your website
• jQuery form plugin and PHP file uploads

If you need to spam protect your contact, comment or any other public form you should think about using a CAPTCHA image. A CAPTCHA image is an image with a random text which spam bots can’t read. The visitor need to enter that text into a form field and only if there is a match the form get processed.

Try a search for “CAPTCHA image” on Google and you will find a lot of scripts, some of them are powerful and some of them are not very effective. I’m using reCAPTCHA since several years, their challenge image is very effective and safe and if people can’t read it they can listen to an audio file.

I’m sure you have seen this image before, this is the challenge image you get with their default configuration. if you don’t like this huge RED image (like me) you need a custom theme. The good news is they offer a very powerful API system for the client side and also for the server side. In this tutorial we use some jQuery code together with the reCAPTCHA ajax library to generate the challenge images. The validation process is done by a PHP script that use a simple cURL function to submit the request and response to the reCAPTCHA server to test the submitted match. We use also the jQuery form plugin to process the form fields and client side validation.

If you like to see how it looks like check this custom CAPTCHA theme demo page.

reCAPTCHA client side script

Before we start we need to register a domain name at the reCAPTCHA website to receive a public and private key. To create a custom challenge image the Ajax way, we need to include the external file recaptcha_ajax.js and we use the following JavaScript code:

var RecaptchaOptions = {
	theme : 'custom'
};
Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
Recaptcha.focus_response_field();

There is only one option required for this custom function, check this link if you like to set more options.
Next we need a small HTML snippet to show the challenge image:

<div id="recaptcha_image"></div>
<p>
	<input type="text" name="recaptcha_response_field" id="recaptcha_response_field" size="30" />
	<input type="submit" value="Submit" id="submit_button" /> 
</p>

To get this working you need to create a form text field with the name and ID recaptcha_response_field, use the same ID name of the target DIV container as you used in the JavaScript function. Using both snippets in used in a HTML page will generate a neutral CAPTCHA image like:

The current code doesn’t process our CAPTCHA validation script. We do this using jQuery and the jQuery form plugin. In this tutorial we do not explain how the plugin works, we did that already in this jQuery form plugin tutorial. In the next JavaScript snippet we check if the text field is not empty and if there is a response we hide the form and show the response in the DIV container output.

$(document).ready(function() { 
	var options = { 
        target:        '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
        url:       'recaptcha.php'  // override for form's 'action' attribute 
    }; 
    $('#myform').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
	var RecaptchaOptions = {
		theme : 'custom'
	};
 	Recaptcha.create('your public key', 'recaptcha_image', RecaptchaOptions);
}); 
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
	var resp_field = $('input[name=recaptcha_response_field]').fieldValue();
	if (!resp_field[0]) { 
		alert('You need to enter the validation string.'); 
		return false; 
	} 
} 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    if (statusText == 'success' && responseText != '') {
    	$('#formcont').html(''); 
	} else {
		alert('Error while processing your request\nPlease try it again on a later moment.'); 
	}
}

Server side validation script

Next we need to create a PHP script called recaptcha.php that will validate the entered text from our CAPTCHA image.

if (!empty($_POST['recaptcha_response_field'])) {
	$answer = trim(stripslashes($_POST['recaptcha_response_field']));
	$postData['challenge'] = $_POST['recaptcha_challenge_field'];	
	$postData['response'] = urlencode($answer);
	$postData['remoteip'] = $_SERVER['REMOTE_ADDR'];
	$postData['privatekey'] = 'your private key';
	$ch = curl_init("http://api-verify.recaptcha.net/verify");
	curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$data = curl_exec($ch);
	curl_close($ch);
	$response = explode(PHP_EOL, $data);
	if ($response[0] == 'true') {
		echo 'Success, you may proceed!';
	} else {
		echo 'Error, please try again.';
		// check the API documentation for detailed error reports
	}
}

In this script we create a post array for the cURL function and post all the data to the reCAPTCHA API URL. Note all used variables are required, the post variable recaptcha_challenge_field is generated by the client API. The value for the challenge entry need to be encoded before we can post that value to the reCAPTCHA API. After we received the response we split the string and check if the first part is equal to true and output a success or error message which is presented in the target DIV container.

If you like to use this script on your own website feel free to download the script on our PHP script forum.Similar Posts:

• jQuery Contact form for your website
• Ajax requests using jQuery and PHP
• jQuery form plugin and PHP file uploads

The past months I used the jQuery form plugin in several projects. Most forms were contact or feedback forms and some of them did a file upload as well. In a previous tutorial we explained how-to create a sign-up form for MailChimp. This sign-up form is a great example to use the jQuery form plugin as well.

What do you get in this tutorial

• First we investigate the form plugin a little bit and explain some interesting features
• With this knowledge in mind we will showcase some of the plugin’s functions
• Finally we provide examples on how-to use the form plugin for simple forms with different response methods

Example files for the Ajax form (HTML and PHP)

In this tutorial we use a simple form (example.php) that will post an email address and is able to upload one file. Below this form there is a container called #output, this DIV element is used to show the response from the process.php file.

<div id="container">
	<form action="process.php" method="post" id="my-form" enctype="multipart/form-data">
		<p>E-mail<br />
		<input type="text" name="email" id="email" /></p>
		<p>File<br />
		<input type="file" name="upload" id="upload" /></p>
		<p><input type="submit" value="Submit" /></p>
	</form>
</div>
<div id="output"></div>

Our PHP example (process.php) has only two main functions; validate the email address entry and test/process the file upload. To make this example more clear, we show only some information extracted from the uploaded file. If you need a full featured upload function, you should try this PHP upload class.

if (isset($_POST['email'])) {	
	if (preg_match('(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,})', $_POST['email'])) {
		$msg = 'E-mail address is valid';
	} else {
		$msg = 'Invalid email address';
	}
	if ($_FILES['upload']['error'] > 0) {
  		$upl = '<br />Error: ' . $_FILES['upload']['error'] . '<br />';
    } else {
		$upl = '<br />Upload: ' . $_FILES['upload']['name'] . '<br />';
		$upl .= 'Type: ' . $_FILES['upload']['type'] . '<br />';
		$upl .= 'Size: ' . ($_FILES['upload']['size'] / 1024) . ' Kb<br />';
		$upl .= 'Stored in: ' . $_FILES['upload']['tmp_name'];
  	}
	echo $msg.$upl; // output the result
} else {
	die('Invalid entry!');
}

Using the form plugin is easy!

To process our form the Ajax style with the jQuery plugin, we need only some simple JavaScript code. Add the following code into the header section from your example.php file:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    var options = { target: '#output' }; 
    $('#my-form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
}); 
</script>

Running this script will process your form without to reload the page in your browser and as the result you get some information below your form. Before we change our example to have a more advanced web form, we explain the most important options and features for the jQuery form plugin.

ajaxForm and ajaxSubmit Options

The plugin has two methods to process a form, we use for this tutorial only the submit type. For the simple example above we used already the option named target, you need this option if you don’t use the success handler option and if you use the default data type. If you like to do some client side form validation the option beforeSubmit should be used. Both options success and beforeSubmit are callback functions, create custom functions for custom functionality. There are several supported data types for the response: XML, JSON or Script. If you leave the option dataType empty the response is just HTTP data. There are more options, check the Options tab from the plugin resource site.

Client side form validations

The option beforeSubmit makes it possible to create a custom function to validate our form before the data is submitted to the process.php script. Using the following function we test if the field email if one is not empty.

function showRequest(formData, jqForm, options) { 
	var form = jqForm[0];
	// or use 
	// if (!$('input[@name=email]').fieldValue()) { 
	if (!form.email.value) { 
		$('#output').html('Email address is empty!'); 
		return false; 
	} else {	    		
		return true;
	}
}

We use the plugin’s native array jqForm to identify the email field. As an alternative it’s possible to access the field via the function fieldValue. Next we need to enable the option beforeSubmit before the function call:

$(document).ready(function() { 
    var options = { target: '#output', beforeSubmit: showRequest }; 
    $('#my-form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    });
});

Using our example now, we get an error message if we left the email field empty, note this happens without a request to the server!

Advanced response handling

In our last example we want to change the way how the response will show up in our small application. After the form is submitted we want to remove the form and show some alternative header plus the data we get from the server. We split the data in two parts: the message and the file information from the file we have uploaded. First we change the process.php file a little bit, replace code echo $msg.$upl; with the following code:

echo '
<xml>
	<someText>'.$msg.'</someText>
	<uploadInfo>'.$upl.'</uploadInfo>
</xml>';

We create here XML nodes to hold the two strings, which we will access later from the custom response callback function.

function showResponse(responseText, statusText)  { 
	if (statusText == 'success') {
		$('#container').html('<h3>Some title</h3>'); 
		$('#output').html('<p>' + $('someText', responseText).text()  + '</p><div>' + $('uploadInfo', responseText).html() + '</div>'); 
	} else {
		alert('status: ' + statusText + '\n\nSomething is wrong here');
	}
}

We added also a test for the statusText and some title header element. The header is a replacement for the form, to make it more clear when the form is submitted. The message and the info takes place in two different HTML elements.

Now we have a a simple Ajax upload form with form validation (client and server side), where the server response is placed in detailed HTML elements. Based on our example it’s possible to make the small application much bigger with more functions on the client side and the server side. I hope this tutorial has helped to understand how-to create an jQuery/Ajax form powered by the jQuery Form Plugin. If you have questions or if you like to show-case your own forms, of course based on this tutorial or similar examples, please feel free to post your message below. Please don’t spam, we moderate all comment submissions.Similar Posts:

• jQuery Contact form for your website
• Ajax requests using jQuery and PHP
• Upload in modal window and pass values with jQuery

MailChimp is a great mailing list provider with a great control panel and many useful features like: campaign management, statistics, responders and complete set of List management tools. They offer also an small code snippet to place a subscription form on your website. This form powered by jQuery is good enough for most common cases, but what if you like to combine your newsletter subscription with a standard function like contact or registration form?

The secret to make your list bigger is to integrate the opt-in function with often used functions like a registration or contact form.

In our tutorial we showcase how-to create a contact form application which will send a message and subscribes the user to a mailing list hosted by MailChimp.

Preparations

• If you don’t have a MailChimp account, register one at MailChimp. They offer a free account for the first 500 mailing list members and for 3.000 messages a month. Sign-up now for free and get a $30 bonus if you upgrade your account after a while.
• Setup a mailing list via the MailChimp control panel and obtain the Unique list ID (via the list settings page, lower left corner).
• Now we need an MailChimp API Key, create one from the control panel (Account -> API Keys & Info)
• As an option create a custom field (List settings -> List Fields and *|MERGE|* Tags) and name it subscription_via. Don’t change the other variables. We use this field to store the information that a subscription is done via the contact form we create.

The contact form (html)

We need to have a simple contact form, with a field for name and e-mail address, a textarea for the message and a checkbox for the subscription. The following example is very basic for a better understanding. In real you might to use some Ajax/jQuery powered form (check the jQuery form plugin listed below).

<form action="process.php" method="post">
	<div>
		<label for="name">Name</label>
		<input type="text" value="" name="name" />
	</div>
	<div>
		<label for="email">E-mail</label>
		<input type="text" value="" name="email" />
	</div>
	<div>
		<label for="message">Message</label>
		<textarea name="message" cols="30" rows="4"></textarea>
	</div>
	<div>
		<input type="checkbox" value="yes" name="newsletter" />
		<label for="newsletter">Subscribe to newsletter</label>
	</div>
	<div>
		<input type="submit" value="Register" name="subscribe" />
	</div>
</form>

Using the MailChimp API with cURL

The MailChimp API has several modes on how-to communicate with the system. In this tutorial we use the simple HTTP GET/POST URL method. We request the data using cURL functions and we like to have a response which is a JSON array.

$apikey = 'Your API Key';
$listID = 'Your List';
$url = sprintf('http://api.mailchimp.com/1.2/?method=listSubscribe&apikey=%s&id=%s&email_address=%s&merge_vars[OPTINIP]=%s&merge_vars[MMERGE1]=webdev_tutorials&output=json', $apikey, $listID, $email, $_SERVER['REMOTE_ADDR']);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch); ID';

You can see that we created a string using the PHP function sprintf to add our variables. You need to use at least one merge variable, in this example we submit the users IP and a value for the custom field we created before. After the cURL request is done we get a response called $data, the JSON array.

This so far about the communication. Before we submit any data we need to check if the submitted email address is valid. I the email address is valid we send the message.

	if (preg_match("(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,})", $_POST['email'])) {
		$email = $_POST['email'];
		//
		// process here the contact form data like name and message
		mail('your@mail.com', 'Subject: contact form', $_POST['message']); // example
		//

Note this is just an e-mail example, nothing special because how-to create a safe contact or mail form is not part of this tutorial. We posted a few resources at the end from this article.

Putting all stuff together

After the e-mail address is validated and the message is send we check if the checkbox was checked to send the data to the MailChimp API. Here is the complete script for the file process.php.

<?php
$apikey = 'Your API Key';
$listID = 'Your List';
 
if (isset($_POST['subscribe'])) {
	if (preg_match("(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,})", $_POST['email'])) {
		$email = $_POST['email'];
		//
		// process here the contact form data like name and message
		mail('your@mail.com', 'Subject: contact form', $_POST['message']); // example
		//
		if (!empty($_POST['newsletter'])) {
			$url = sprintf('http://api.mailchimp.com/1.2/?method=listSubscribe&apikey=%s&id=%s&email_address=%s&merge_vars[OPTINIP]=%s&merge_vars[MMERGE1]=webdev_tutorials&output=json', $apikey, $listID, $email, $_SERVER['REMOTE_ADDR']);
			$ch = curl_init($url);
			curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
			$data = curl_exec($ch);
			curl_close($ch);
			$arr = json_decode($data, true);
			if ($arr == 1) {
				echo 'Check now your e-mail and confirm your subsciption.';
			} else {
				switch ($arr['code']) {
					case 214:
					echo 'You are already subscribed.';
					break;
					// check the MailChimp API for more options
					default:
					echo 'Unkown error...';
					break;			
				}
			}
		}
	}
}
?>

We’re using the PHP function json_decode to convert the JSON array into a PHP array and echo different messages upon the result. We used the most common results:

• 1 (not an array) = conformation mail is send
• code 214 = the submitted email address already exists
• By default we use a standard message

Using the API this way it’s possible to have your own (translated) messages. If you like to use more different messages for different response codes, just add them into the switch statement.

Additional resources

• A (safe) contact form using Xajax and PHPmailer
• jQuery plugin for forms

Similar Posts:

• jQuery Contact form for your website
• jQuery form plugin and PHP file uploads
• Your e-mail address hidden with jQuery?

Do you publish your blogs with WordPress? If yes, you know the inline popup window which opens if you like to upload / insert an image into your article. This tutorial shows you how-to use the jQuery Plugin ThickBox and some jQuery code to upload a file and pass a value to the parent page. You can use this kind of feature in your custom CMS or maybe you like use it as a basic for your own file upload plugin or gadget?

Scripts and libraries used in this tutorial

PHP Upload Class / Script
We use this PHP Script written by our partner finalwebsites.com because it’s very powerful and easy to use. Since the upload process is not the difficult part in this tutorial you might use your own PHP upload code instead.

jQuery JavaScript Library
There are several client side libraries available on the Internet, I like jQuery because there are many resources and cool plugins.

ThickBox – webpage UI dialog widget
I tried several Lightbox types and since a while I use the ThickBox plugin. For the upload process, we need modal window which will open as an Iframe.

Our dynamic form (form.php)

Most forms process some data for a database or they send the data within an e-mail message. In our example we have a form with just two form fields one for a name tag and one for the file name.

<form action="form.php" method="post">
	<p>
		<label for="nametag">Name</label>
		<input type="text" name="nametag" size="20" />
	</p>
	<p>
		<label for="myfile">File name</label>
		<input type ="text" id="myfile" name="myfile" readonly="readonly" />
 		 <a href="upload.php?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=300&width=400&modal=true" class="thickbox">Upload</a>
 	</p>
 	<p style="text-align:right;"><input type="submit" name="Submit" value="Send" /></p>
</form>

Notice the attributes and the URL used inside the link element to our upload script. We set the ThickBox size, we enable the values for iframe and modal. We used also some ID for the “readonly” form field which is used to store the filename after the upload is done. We added also a form action because we need to process the form afterwards.

The upload script (upload.php)

After the user has clicked the upload link, a lightbox will open an Iframe holding the upload script. First we show the code which is responsible for the upload process.

include_once $_SERVER['DOCUMENT_ROOT'].'/pathtotheclass/upload_class.php';
$error = '';
$img = '';
$copy_link = '';
 
if(isset($_POST['Submit'])) {
	$my_upload = new file_upload;
	$my_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/modal-upload/files/";
	$my_upload->extensions = array(".png", ".jpg", ".gif"); // allowed extensions
	$my_upload->rename_file = true;
	$my_upload->the_temp_file = $_FILES['upload']['tmp_name'];
	$my_upload->the_file = $_FILES['upload']['name'];
	$my_upload->http_error = $_FILES['upload']['error'];
	if ($my_upload->upload()) {
		$image = $my_upload->file_copy;
		$copy_link = ' | <a id="closelink" href="#" onclick="self.parent.tb_remove();">Pass file name</a>';
	} 
	$error = $my_upload->show_error_string();
}

You will find several example files if you download the upload class from finalwebsites. For this tutorial we will explain the most important variables and methods.

$my_upload->upload_dir
This upload directory is important, while most webhosts don’t allow that Apache has write access to directories, you need to chmod the directory with 777. If this directory doesn’t exists the upload will fail.

$my_upload->extensions
Allow only the extensions you need in your application, in our example we need to retrieve the image’s filename.

$my_upload->rename_file
Your users might have file names with spaces or foreign characters, use this option to rename your uploaded file to an URL-safe string.

$my_upload->file_copy
The (new) name generated by a successful upload, use this name in your further application process.

Let’s check the upload form:

<form action="upload.php" method="post" enctype="multipart/form-data">
	<p>
		<label for="upload">Select file</label>
		<input name="upload" type="file" size="15" />
		<br />
		<input type="submit" name="Submit" value="Upload" />
	</p>
</form>
<p><?php echo $error; ?></p>
<p><a href="#" onclick="self.parent.tb_remove();">Cancel</a><?php echo $copy_link; ?></p>

Because this is an upload form, you need add the “enctype” attribute “multipart/form-data”, otherwise the file will not be uploaded to your server. You see two link elements below the form, one is static to cancel/close the upload dialog and the other one is generated by PHP after the upload is done and gets the ID “closelink”. This ID is important for the following jQuery function:

$(document).ready(function() { 
	$("#closelink").click(function() {
		$("#myfile", top.document).val('<?php echo $image; ?>');
	});
});

If the user clicks the link with the ID “closelink”, the filename is passed to top document’s element with the ID “myfile” and the ThickBox gets closed. With the completed form we’re able to process the data inside the parent document. We added this php upload demo to our partners site, which will demonstrate the “modal effect”. If you like to use the files from this tutorial, you can download the “form.php” and “upload.php” files from the php forum. If you have questions or suggestions, please post them them below.

Similar Posts:

• Upload images for usage in TinyMCE
• Tutorial: FTP Upload via cURL
• jQuery Contact form for your website