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

If you place your e-mail address somewhere visible on your website, it will be only a matter of time until your e-mail account will get more and more spam messages. There are lots of spam bots checking the Internet for email addresses on regular websites, forums, blog and mailing lists. Once caught by some spam bot your mailbox is in need of a strong spam filter or sometimes it might be better to use a new e-mail address.

In this article we show you different ways, how you’re able to show your e-mail address to human visitors and hide it for spam bots.

Don’t forget, the solutions mentioned in this article are not a total protection against spam. If you share your e-mail address online, the chance that your e-mail address get on a spammer’s list is big. We advice that if you need to share an e-mail address with your websites’s visitor, to not use your personal e-mail address.

With each solution we give a review for:

• Integration: Is this function easy to integrate even for a less experienced webmaster.
• Protection: Is the e-mail address protected against spam bots.
• User friendly: Is the solution easy to use for a website’s visitor

The simple solution, an image from your e-mail address

Just providing image version is very simple and easy. Open your image editor, create a small image from your email address and upload the image to your website.

After this you’re able to place that address in to the HTML, just on that place where you need it. It’s safe for your e-mail address and it’s simple to use that image in your website document or CMS. There is one big issue with this solution: The visitor has to type over your e-mail address to his e-mail program.

Hide the @ symbol

There are different ways to hide the format of an e-mail address. Hoe does this work? Changing the format of some email address or just hiding parts from the e-mail address makes it more difficult for spam bots to find them. For example:

1. user@email.com
2. user at email dot com

While the first one is very webmaster friendly, it’s not be the best protection for your e-mail address. The second example is used very often because this “faked” address is easy to add to your content. Both formats are recognized by smarter spam bots.

Hide your e-mail address using PHP

The following example will convert the string of some e-mail adress into unicode values:

function convert_email_adr($email) {
    $pieces = str_split(trim($email));
    $new_mail = '';
    foreach ($pieces as $val) {
        $new_mail .= '&#'.ord($val).';';
    }
    return $new_mail;
}

Use this function in your web page like:

<?php echo convert_email_adr('user@email.com'); ?>

The output in your html is like:

user@email.com

This way the e-mail address is visible to the visitor like normal. Using this format for a mailto: link will open a new window from the visitor’s e-mail program. There might be a few spam bots which are able to read this format as well.

Some JavaScript solution

The last solution is very similar to the PHP snippet and requires similar handling to add some email link to your website. Place the following function into your HTML document or include the code as an external JS file:

<script type="text/javascript">
function create_mail(naam, domain, tld, label) {
    var mail;
    mail += '<a href="' + 'ma' + 'il' + 'to:' + naam;
    mail += '&#64;' + mail + domain '.' + tld;
    mail += '">' + label + '<' + '/a>';
    document.write(mail);
}
</script>

Use this code inside the website content:

<script type="text/javascript">create_mail("user", "email", "com", "e-mail");</script>

This method is very protective against spam bots, but will not work if JavaScript is disabled in the visitors browser. On the other site this code is very flexible and easy to use.

You see there are many different ways to add your e-mail address to your website without to expose the it to spam bots. If you search Google you will find much more examples, some of them are safe and some of them might have a better usability. If you don’t like to show your email address you should use a contact form on your website. If you know some great and easy function to hide an e-mail address in HTML code, please post it below. If you like this article please share the link on twitter or facebook, thanks.Similar Posts:

• jQuery Contact form for your website
• Your e-mail address hidden with jQuery?
• Attachment Mailer class: now support for HTML mail

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
• Integrate your MailChimp Newsletter Subscription

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

This PHP tutorial will show how to create a simple PHP class to search the flickr site for some photos. To get the data we use the flickr API to run a simple search and return the results in a serialized array.

We will be using the php function "file_get_contents" to receive data from flickr. The data which we will receive will be a serialized PHP array which means all we need to do is unserialize the array and we will easily be able to use the data returned. As an alternative we can use a cURL function to get the data, for example if the function "file_get_contents" is not allowed on your web host.

API Authentication

The API methods we use in this tutorial doesn’t require any authentication, but we need to use an API key. Get your API key on the flickr web application site (You need an Yahoo account to login).

Provide some information about your application:

and obtain your personal flickr API key and secret (We need only the key in this tutorial)

Flickr PHP Class

First we create the class structure for our class, we define a private variable for the "API key", a class constructor and the function that will search later for the images.

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	public function __construct() {
	} 
 
	public function search($query = null) { 
	} 
}

The API method we will be using is "flickr.photos.search", which has a number of possible parameters. We are able to search by tags, full text, tell the API which user to search for, the minimum date it a photo was uploaded and many more. You can find a list of the parameters in the flickr documentation.

So we’re going to run a full text search and limit the number of results to 50.

 
	public function search($query = null) { 
		$search = 'http://flickr.com/services/rest/?method=flickr.photos.search&api_key=' . $this->apiKey . '&text=' . urlencode($query) . '&per_page=50&format=php_serial';
		$result = file_get_contents($search); 
		$result = unserialize($result); 
	}

Notice at the end of $search we have "format=php_serial" other available response formats are rest, xml-rpc, soap and json.

The data which will be stored in the variable $result is a serialized array, so simply unserialize it and return the data. Find below the complete class code and store the code in a file named "flickr.php"

class Flickr { 
	private $apiKey = 'YOUR API KEY HERE'; 
 
	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=50&format=php_serial'; 
		$result = file_get_contents($search); 
		$result = unserialize($result); 
		return $result; 
	} 
}

How-to use our PHP class

Create a new PHP script file and add this code:

require_once('flickr.php'); 
$Flickr = new Flickr; 
$data = $Flickr->search('design inspiration'); 
foreach($data['photos']['photo'] as $photo) { 
	// the image URL becomes somthing like 
	// http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg  
	echo '<img src="http://farm' . $photo["farm"] . '.static.flickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '.jpg">'; 
}

This file simply includes the flickr class we wrote, creates a new instance of the class, runs a search for "design inspiration" and finally loops through the returned data and sends the output to the browser.

Similar Posts:

• Ajax requests using jQuery and PHP
• First steps within the Zend Framework
• Create custom backups from your website using cURL

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

Do you need a password generator function for your user registration application or do you have to write a script in PHP? Than is this PHP tutorial for you. The function in this guide is flexible enough to use it during the user registration process or for a password recovery function. The generated password from this function is so safe as you which: Generate alpha-numerical password combined with capital character or with special signs or characters. All used character are based on the number from the ASCII table.

In this tutorial we will explain all the important code, find the complete function at the begin of this tutorial. We used the tutorial code also for our Google Gadget, you can try it just by adding the gadget to your iGoogle start page.

The PHP code for the function

function create_password($pw_length = 8, $use_caps = true, $use_numeric = true, $use_specials = true) {
	$caps = array();
	$numbers = array();
	$num_specials = 0;
	$reg_length = $pw_length;
	$pws = array();
	for ($ch = 97; $ch <= 122; $ch++) $chars[] = $ch; // create a-z
	if ($use_caps) for ($ca = 65; $ca <= 90; $ca++) $caps[] = $ca; // create A-Z
	if ($use_numeric) for ($nu = 48; $nu <= 57; $nu++) $numbers[] = $nu; // create 0-9
	$all = array_merge($chars, $caps, $numbers);
	if ($use_specials) {
		$reg_length =  ceil($pw_length*0.75);
		$num_specials = $pw_length - $reg_length;
		if ($num_specials > 5) $num_specials = 5;
		for ($si = 33; $si <= 47; $si++) $signs[] = $si;
		$rs_keys = array_rand($signs, $num_specials);	
		foreach ($rs_keys as $rs) {
			$pws[] = chr($signs[$rs]);
		}
	} 
	$rand_keys = array_rand($all, $reg_length);
	foreach ($rand_keys as $rand) {
		$pw[] = chr($all[$rand]);
	}	
	$compl = array_merge($pw, $pws);	
	shuffle($compl);
	return implode('', $compl);
}

We create a for loop to build our arrays with characters, while the default characters are always included, we use if statements to include the capital or numeric characters.

	for ($ch = 97; $ch <= 122; $ch++) $chars[] = $ch; // create a-z
	if ($use_caps) for ($ca = 65; $ca <= 90; $ca++) $caps[] = $ca; // create A-Z
	if ($use_numeric) for ($nu = 48; $nu <= 57; $nu++) $numbers[] = $nu; // create 0-9

After this, we merge the three arrays together into one array called $all:

	$all = array_merge($chars, $caps, $numbers);

If the function is configured to use special characters, we use 25% from the password length for these characters. Next we check the number of used special character, if we reach 5 of them (based on the 25% from the password length) we replace the value with 5.

		$reg_length =  ceil($pw_length*0.75);
		$num_specials = $pw_length - $reg_length;
		if ($num_specials > 5) $num_specials = 5;

As before we use a for loop to create the array with special characters. We use the array_rand function to create another array with random keys and the foreach loop will add the values to the array $pws.

		for ($si = 33; $si <= 47; $si++) $signs[] = $si;
		$rs_keys = array_rand($signs, $num_specials);
		foreach ($rs_keys as $rs) {
			$pws[] = chr($signs[$rs]);
		}

With the same method as for the special characters we will build the array $pw using the alpha-numerical array.

	$rand_keys = array_rand($all, $reg_length);
	foreach ($rand_keys as $rand) {
		$pw[] = chr($all[$rand]);
	}

The next code will merge the two password arrays and after we used the function shuffle before the password is returned as a string (using the implode function).

	$compl = array_merge($pw, $pws);	
	shuffle($compl);
	return implode('', $compl);

With function it’s very easy to create a random password in your application, just use it this way:

$password = create_password(12, false, true, false); // creates 12 character alpha-numeric password

What do you think what could be better? Maybe we can segment the amount of numbers or capitals? If you like to use less different characters, just decrease the numbers inside the for loops. Use this ASCII table as your reference. Please post your comments below or open a thread on our PHP forum at finalwebsites.com.

Similar Posts:

• Important Update for the PHP class Access User
• Sending e-mails via SMTP with PHPmailer and Gmail
• Search for photos using PHP and the flickr API

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 form plugin and PHP file uploads