How to Code a Signup Form with Email Confirmation

In this tutorial, we are going to be creating a user signup form that adds a user to a database, and then sends out a confirmation email that the user must click on before their account will be activated.

Step 1: The Template

I’ve included the basic site layout so we aren’t wasting time creating the form and making the site looks pretty. We are going to get right into coding which is what you came here for.

Open up the Site Template folder and copy it to either your localhost or web server.

Open up index.php and take a quick look. You’ll see a simple form with 3 inputs. These are the fields we are going to capture. We want the username, their password as well as their email. You can choose to capture other elements when users are signing up, but these are the 3 barebones elements we need.

Step 2: Setting up the MySQL Database

Open up PHPMyAdmin or whatever program you use to manage your MySQL database and create a new database. You can name this whatever you like. Now we want to create the rows that are going to hold our user information and confirmation information. For this we create two tables. Users and Confirm.

CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(50) NOT NULL default '',
  `password` varchar(128) NOT NULL default '',
  `email` varchar(250) NOT NULL default '',
  `active` binary(1) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;

Our first table has 5 rows. The first is the ID that is given to the user when they signup. This is set to auto increment so that each user is given a unique ID. Next is the username, password and ID. The last row lets us set the users active state. When we first create the user row, the active state will default to 0. This means that the users account is currently inactive. Once the user confirms their account we will set this to 1. This will state that the account is active.

CREATE TABLE `confirm` (
  `id` int(11) NOT NULL auto_increment,
  `userid` varchar(128) NOT NULL default '',
  `key` varchar(128) NOT NULL default '',
  `email` varchar(250) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;

Our second table is the confirm table. This holds the user’s ID and email as well as a randomly generated key that we will use to confirm the users account.

Step 3: Connecting to the MySQL Database

Open up inc/php/config.php.

First we need to make the connect to the database.

mysql_connect('localhost', 'username', 'password') or die("I couldn't connect to your database, please make sure your info is correct!");

Depending on your setup, we are going to need to change a few variables. So go ahead and fill in everything.

Next we need to tell MySQL which database we want to use.

mysql_select_db('your_database_name') or die("I couldn't find the database table make sure it's spelt right!");

Once everything has been edited to fit your database go ahead and point to the index.php file on your server.

If you don’t see any errors at the top, we are all connected.

Step 4: Submitting the Form

Ok, now that we are all connected to the database, we need to capture the form data so we can get the user signed up.

I’m going to give you the piece of code and then explain what’s going on. After that we are going to make changes and add functionality.

Here is the base; place this right after the first includes at the top of index.php

//check if the form has been submitted
if(isset($_POST['signup'])){

}

This if statement is checking to see if the form has been submitted.

Without this, our script would run every time the page is refreshed and we don’t want that.

Note: Depending on your application or just general style of coding this code may be placed in a separate file that is accessed when the form is submitted. I’ve placed the code all in one file to keep things simple and easy to follow along.

Step 5: Cleaning up and Checking the Variables

We want to make sure that the user has submitted actual content instead of just a blank form, so we are going to perform some quick checks.

The first part is to place the $_POST variables into simpler variables and clean them for the database. Place this inside our if statement.

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
$email = mysql_real_escape_string($_POST['email']);

mysql_real_escapse_string() makes sure that the user isn’t trying to use apostrophes to access our database with MySQL injection. Whenever you want to put information into a database the the user has inputed, please run it through mysql_real_escape_string(). For more information on MySQL injection you can read this article on Wikipedia

So, we’ve cleaned up our variables, now let’s check to see if the user forgot any fields.

if(empty($username)){ //put code in me please }
if(empty($password)){ //put code in me please }
if(empty($email)){ //put code in me please }

Now we have three if statements that are checking if each field is empty. If the field is empty we are going to assign some variables.

To make things clean we are going to create an array that will hold the status of the signup process as well as any text we need to show the user.

Right above that piece of code, let’s create an array and a few variables.

$action = array();
$action['result'] = null;

$text = array();

First we are creating a blank array called action and then setting an array value of result. Result is going to hold a value of either success or error. Next we create another blank array called text. This is going to hold any text we want to show the user during the signup.

Right now, our if statements that are checking our variables aren’t executing any code, so let’s go ahead and put some code inside the first if statement.

Put this code inside the username if statement.

$action['result'] = 'error';
array_push($text,'You forgot your username');

Let’s say the user submits the form without a username. Our statement is going to run the code above. First it’s going to set the result field of our action array to error.

Then we are going to use array_push() to put some text into our text array. We are going to be using this same piece of code for the final two “if” statements so copy and paste that code into the last two if statements. You’ll probably want to change the text to match the current if statement.

Note: We are using array_push() in case we have multiple errors in the form submission. If all if statements are executed, the text array will looks like:

Array(
	[0] => 'You forgot your username',
	[1] => 'You forgot your password',
	[2] => 'You forgot your email'
)

We now need to check if we have any errors so we can continue on with the signup process.

Step 6: No Errors, Let’s Signup the User

We are going to check to see if our action array result value is set to error.

if($action['result'] != 'error'){
	//no errors, continue signup
       $password = md5($password);
}
	
$action['text'] = $text;

We are also running our password through the md5() function. This takes the password and returns a 32 character string that looks something like this: a3470ce826283eca7ce3360d0f26b230. It’s good practice to run the password through some sort of hashing function before putting it into the database. This prevents people from viewing the users passwords if your database is hacked.

A quick check of our action result value and we can continue on with the signup. If our result is error we will skip over all this code and output the errors to our user so they can make the necessary changes.

The last piece of this code we are putting the values of your text array into our action array.

Step 7: Adding the User to the Database

Place this code inside our last if statement.

...
If Statement checking for errors
...

//add to the database
$add = mysql_query("INSERT INTO `users` VALUES(NULL,'$username','$password','$email',0)");
		
if($add){

	//the user was added to the database	
			
}else{
		
	$action['result'] = 'error';
	array_push($text,'User could not be added to the database. Reason: ' . mysql_error());
	=
}

We use mysql_query() and INSERT to insert the users information into the database. Next, we create another if statement checking to see if the user was added to the database. We do this by checking if the $add variable is true or false.

If the user is added we can continue on with the signup; if not we are going to assign some familiar variables and stop the signup.

When working with MySQL queries, we use the mysql_error() function if their are errors because it helps with debugging what is wrong with your queries. It will output text errors when something is wrong. This is good!

Step 8: Confirmation is Needed

The user has submitted the form, everything checks out and they’re now living in the database. We want the user to be able to use their account, so let’s setup the confirmation.

...
if added check
...

//get the new user id
$userid = mysql_insert_id();
			
//create a random key
$key = $username . $email . date('mY');
$key = md5($key);
			
//add confirm row
$confirm = mysql_query("INSERT INTO `confirm` VALUES(NULL,'$userid','$key','$email')");	
			
if($confirm){
			
	//let's send the email

}else{
				
	$action['result'] = 'error';
	array_push($text,'Confirm row was not added to the database. Reason: ' . mysql_error());
				
}

To make things easy, let’s assign the new user id to a variable so we can use it later. We do this by using mysql_insert_id(). This will set $userid to whatever the new user’s ID is.

Next we create the random key for that specific user. We create a variable named key and fill it with a value of the username, email and date. The string will look like mattmatt@email.com012009. After that we use the md5() function to convert it to a random string that is unique to that user.

Using mysql_query() and INSERT again, we put the new user ID, the key and the users email into the database.

Step 9: Setting up the Email Templates

We are going to take a break from the PHP coding and create two new files. For the sake of being quick and easy we are actually going to use two templates that I’ve included with this tutorial. The two files we’re going to be looking at are signup_template.html and signup_template.txt. Swift lets us assign an HTML as well as a TXT version of the email incase the users email client doesn’t support HTML emails.

Open up signup_template.html Note: You can read up on HTML in emails over at carsonified. We aren’t going to be editing this file, i’m just going to explain whats going on and then you can play around with it once the tutorial is complete. The most important part of this file is the tags that look like {USERNAME} and confirm.php?email={EMAIL}&key={KEY}. We are going to write a function that uses this template and replaces those tags with the variables from our form.

Step 10: The Template Function

Open up inc/php/functions.php and place this code inside.

function format_email($info, $format){

	//set the root
	$root = $_SERVER['DOCUMENT_ROOT'].'/dev/tutorials/email_signup';

	//grab the template content
	$template = file_get_contents($root.'/signup_template.'.$format);
			
	//replace all the tags
	$template = ereg_replace('{USERNAME}', $info['username'], $template);
	$template = ereg_replace('{EMAIL}', $info['email'], $template);
	$template = ereg_replace('{KEY}', $info['key'], $template);
	$template = ereg_replace('{SITEPATH}','http://site-path.com', $template);
		
	//return the html of the template
	return $template;

}

format_email() is taking two variables which will be used in index.php. The first is our form information array and the second is format. We have a format variable so we can re-use this array for both the HTML and TXT versions of the template.

First we set the root. This points to the folder that the templates are hosted.

Next we open up the contents of our template and assign it to a variable.

Now we are going to use ereg_replace() to replace our {USERNAME} tags in our template with the content from our form. It’s basically just a super simple template system.

Lastly we return the template variable which holds all the html.

Explanation: In a nutshell, format_email() opens up our template files, takes the HTML and assigns it to our variable. This is just a cleaner way then assigning all the HTML in the function itself.

Step 11: Sending the Email

We are going to write another function to deal with Swift and sending the emails.

function send_email($info){
		
	//format each email
	$body = format_email($info,'html');
	$body_plain_txt = format_email($info,'txt');

	//setup the mailer
	$transport = Swift_MailTransport::newInstance();
	$mailer = Swift_Mailer::newInstance($transport);
	$message = Swift_Message::newInstance();
	$message ->setSubject('Welcome to Site Name');
	$message ->setFrom(array('noreply@sitename.com' => 'Site Name'));
	$message ->setTo(array($info['email'] => $info['username']));
	
	$message ->setBody($body_plain_txt);
	$message ->addPart($body, 'text/html');
			
	$result = $mailer->send($message);
	
	return $result;
	
}

Just like format_email(), send_email() takes our info array as a variable. The first part of the function we assign two variables, $body and $body_plain_text. We are using format_email() to assign the HTML values of our template to each variable. Now comes the good part. We have setup the swift instance using Swift_MailTransport:newInstance() and then setup the mailer using Swift_Mailer::newInstance($transport);

We create a new instance of the Swift message and start to assign some variables to this instance. We set the subject, from email and to email address and then use setBody() to assign out text version of the email to the mailer instance. To add the HTML version we use addPart(). The send() function takes care of the sending of the email and then we return the result. Alright, we have our email create and send functions written, let’s go back to index.php and start to wrap up the main signup.

Step 12: Did we Send? Shall we Confirm?

Our last bit should’ve been the if statement checking if the confirm row was created.

Let’s send the email and check if everything went though alright.

...
if confirm
...

//include the swift class
include_once 'inc/php/swift/swift_required.php';
			
//put info into an array to send to the function
$info = array(
	'username' => $username,
	'email' => $email,
	'key' => $key
);
			
//send the email
if(send_email($info)){
								
	//email sent
	$action['result'] = 'success';
	array_push($text,'Thanks for signing up. Please check your email for confirmation!');
				
}else{
					
	$action['result'] = 'error';
	array_push($text,'Could not send confirm email');
				
}

Without the Swift class we can’t send out any emails, so in our first line, we are including the swift class. We need to send our information to both of our new functions, so we create a new array and assign our variables to it. I know I know, more if statements, but we need to check for errors to make it easier for the users. You always have to assume that users will make every possible mistake imaginable.

We wrap our send_email() function in another if statement as well as passing the $info array. If the email is sent we assign a value of success and thank the user for signing up. If there are errors we use the familiar variables. So now, we are almost done with the signup, just one last function needs to be created. Even though we are assigning all these error/success variables and text we haven’t displayed this information to the user.

Move back to functions.php and paste this code.

//cleanup the errors
function show_errors($action){

	$error = false;

	if(!empty($action['result'])){
	
		$error = "
"."\n";

		if(is_array($action['text'])){
	
			//loop out each error
			foreach($action['text'] as $text){
			
				$error .= "
$text
"."\n";
			
			}	
		
		}else{
		
			//single error
			$error .= "
$action
";
		
		}
		
		$error .= "
"."\n";
		
	}

	return $error;

}

This may seem confusing but it’s really just making our success/errors looks nice.

First it checks to see if the array is empty so we aren’t executing the code when it isn’t needed.

Next it creates a ul tag and applies the result as a class. This will either be success or error and is aesthetic only.

We then check to see if the text variable is an array or simply a string. If it’s a string, we wrap it in an li. If it’s an array we loop through each array item and wrap it in an li.

Lastly, we close the ul and return the entire string.

If we move back to index.php and place this code right after including header.php we can wrap up this section.

...
header include
...

A quick little explanation. We are taking all the values of our action array and passing it to the show_errors() function. If there is any content it returns a nice unordered list.

Step 13: Confirming the User

We should have a good grip on how the script is functioning; so for this next script I’m going to give you the entire chunk of code and then go through it with you.

Open up confirm.php and paste this in-between the header include and your show_errors() function.

//setup some variables
$action = array();
$action['result'] = null;

//quick/simple validation
if(empty($_GET['email']) || empty($_GET['key'])){
	$action['result'] = 'error';
	$action['text'] = 'We are missing variables. Please double check your email.';			
}
		
if($action['result'] != 'error'){

	//cleanup the variables
	$email = mysql_real_escape_string($_GET['email']);
	$key = mysql_real_escape_string($_GET['key']);
	
	//check if the key is in the database
	$check_key = mysql_query("SELECT * FROM `confirm` WHERE `email` = '$email' AND `key` = '$key' LIMIT 1") or die(mysql_error());
	
	if(mysql_num_rows($check_key) != 0){
				
		//get the confirm info
		$confirm_info = mysql_fetch_assoc($check_key);
		
		//confirm the email and update the users database
		$update_users = mysql_query("UPDATE `users` SET `active` = 1 WHERE `id` = '$confirm_info[userid]' LIMIT 1") or die(mysql_error());
		//delete the confirm row
		$delete = mysql_query("DELETE FROM `confirm` WHERE `id` = '$confirm_info[id]' LIMIT 1") or die(mysql_error());
		
		if($update_users){
						
			$action['result'] = 'success';
			$action['text'] = 'User has been confirmed. Thank-You!';
		
		}else{

			$action['result'] = 'error';
			$action['text'] = 'The user could not be updated Reason: '.mysql_error();;
		
		}
	
	}else{
	
		$action['result'] = 'error';
		$action['text'] = 'The key and email is not in our database.';
	
	}

}

Most of this should look very familiar; so I’m going to skip ahead and check if the key is in the database section.

Again, we use mysql_query() to get any rows in the database where the email and key are equal to the keys provided by the users email.

We use mysql_num_rows() to check if the number of rows returned is greater than 0.

If the email and key are in the database we grab all the information from the database using mysql_fetch_assoc().

Now that the user has confirmed his account, we need to update the database and set the active row to 1.

We use mysql_query() again, but instead of INSERT we use UPDATE to update the active row to 1 where the user ID is the same as our current users ID.

To clean everything up we use mysql_query() and DELETE to remove the confirmation row from the database. This makes sure that the user can’t come back to this page and reconfirm. It also keeps the database nice and clean.

Conclusion

We’ve covered many different areas in this tutorial. We downloaded and included a 3rd party script to deal with sending the emails, implemented simple form validation as well as created a super simple template system to style our emails. If you’re new to MySQL we’ve touched on the three most common functions in MySQL so you should have no problem completing some more advanced tutorials.

Final Notes

• I’ve used Swift Mailer as our email deployment script which can be downloaded here: http://swiftmailer.org/
• I’ve also used button styles provided by Zurb. Be sure to check them out and give them some love. http://www.zurb.com/blog_uploads/0000/0485/buttons-02.html

Thanks for reading and be sure to visit me on Twitter if you have any questions!