HTML Form Creator Registration Script with Captcha CMS

This script is called register-with-captcha_.php

The HTML Form Creator Registration Script with Captcha CMS script is one of a group of PHP scripts that handle both the administrative and end-user aspects of a general purpose HTML Form Creator that allows not just input boxes but multiple selection enabled select/option lists as well. In addition to the expectable editing scripts for both administrative and end-user functions, there's also a Search and Match script so that users can use the scripts to find other users with various individual or group commonalities, including proximity searches, i.e., find all the users within various distances. There are even private messaging scripts.

Administrative HTML Form Creator Scripts

The purpose of this script is to provide a way in which the user register to be a member of the group of users who are utilizing the administrator-created HTML Form Creator.

First, we start up a session and include the config.php script to ensure that our connection to our database is made correctly. This file has the codes below in it:

$theemailaddress = "yoursite@yoursite.com"; //EDIT ME
$roothostname = "localhost";
$theusername = "yourusername"; //EDIT ME
$thepassword = "yourpassword"; //EDIT ME
$thedatabasename = "yourdb"; //EDIT ME
mysql_connect("".$roothostname."","".$theusername."","".$thepassword."") or die(mysql_error());
mysql_select_db("".$thedatabasename."") or die(mysql_error());

We save the session id as a session variable. Then we define a named constant with the define() function. When we get to the config.php script, we encounter that it will check for that constant, and if it is not found, no MySQL database connection will occur. In addition to the db connection establishing—if you're allowed in because the constant was found to be named—are both the salting and hashing functions which are used for password safety. The Configure File for Database Connection file is in the includes folder that has a special htaccess file (see security levels) helping to protect it from prying eyes, etc.

Next we create the my_members MySQL table if it does not already exist. This registration script deals only with user/group profile data, not the data which the administrator-created HTML-based questionnaire form deals with.

Next we come to the CSS styles—the only thing interesting here is that we use "position:absolute;top:50px;left:50%;margin-left:-300px;width:600px", and other similar styles to center our divs. If works much better than any other method. Note the margin-left property which is half the div width times -1. And the left property is 50%.

Next we get to the JavaScript section. We use both JavaScript and PHP validation to filter input from the user since the cardinal rule for user input is: NEVER TRUST IT. If you want to trust it, simply ensure that it will be safe for putting into your MySQL tables as well as displaying on your web pages. By far the best method here is to use the JavaScript for the users' benefit and the PHP for security. If JavaScript is turned off (in which case our scripts won't even work), the PHP validation scripts are your last line of defense to keep things safe. On the other hand, the JavaScript allows the user to get a user-friendly response to unacceptable or wrong input in fields. Rather than making the user restart the form when he goofs, good JavaScript validation scripts use the focus() method to put the cursor back on the field where the goof occured as well as alerting the user to his error. PHP-only validation forces form restart, which is maddening to users.

We use /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/ types of regular expressions to force the data to conform to the needs of the data fields, with the first part showing the acceptable characters and the second part forcing the length—in this case—to be 6 to 20 characters. The email validator we wrote to allow even some of the weirder valid email configurations.

We now turn to the PHP section. First we grab all POSTed data that gets sent to the page after the submit button is clicked. Note that we stick the groupname and username into session variables. There is a captcha in the form and the user must give the correct answer to be registered. The correct answer will be figured in a different PHP script (more on that later) and stuck into the a__________a session variable. When the form is submitted, we check the answer the user gives against this a__________a variable and if it is incorrect, the user sees "Wrong captcha answer. Please try again." and is made to restart the registration process. The captchas are all simple: adding or substracting a 1-digit number to/from a 2-digit number.

If the user gets it right, the username and groupname they entered are checked for in the db table. If such a name already exists, the user sees "This User Name already exists. Please try again." or "This Group Name already exists. Please try again." and is made to restart the registration process. If the user is silly enough to disable JavaScript, the PHP will still force the data to be within certain length parameters. Too long data gets trimmed off and too short data causes an alert and the user is made to restart the registration process. If the email is not valid, the PHP program will say so and the user is made to restart the registration process.

Here is something to get you to sit up and take notice: the very standard preg_match-using PHP email validator takes standard data but not unusual data, but the regular expression filtration done later allows any character that is technically allowed according to standards we looked up. Of course, this email regular expression filtration will have no effect since the earlier email validator stops unusual characters in their tracks—a regular expression pattern with only \w\- in it allows alphanumerics and "_" and "-" and nothing else. So if they used unusual characters they have to start over—they will never even reach the email regular expression filtration script.

We added this to allow you, dear reader, to decide if you want to include more legal characters or not. The other filtration scripts use preg_replace and dump unacceptable characters, using our strict standards.

We also filtered out tags someone may try to sneak in by use of the strip_tags function. And, of course, since the data will be going into a MySQL database table, we sanitized it even further with the mysql_real_escape_string() function, which escapes all iffy data—also known as special characters—like quotes, etc.

Next we create the random-alphanumeric-character-laden salt. Then we use the salt and the entered password to create the hash. Both salt and hash go into the db. The password does not, so if anyone asks for theirs like in HTML Form Creator—Forgot Password, we simply create a random string and email it to them and say "here's your new password." Few companies allow storing of passwords—it's dumb.

If the registration is successful, we stick the user's id in a session variable because in the private messaging aspects of our system it will be used to identify who sends and/or receives what message. People are allowed to change both group names and user names, but never IDs, so the messages will still be dealt with all right even if everyone changes group names and user names.

The }}}}}}}}}}}} is because of all the }else{ conditionals used earlier in the script. If the $Entry variable is not 1 but still 0, they haven't submitted the form yet, so we show them the form for entry and submission. On the other hand, if they have submitted it, we send them off to the HTML Form Creator—Login to Profile and Account Management, which you will find at the end of the script after the final else conditional. We even send their username in a form, but we needn't have bothered since usernames are grabbed from session variables, not POSTs or GETs. Admittedly, there's a tad bit of overkill here and there in our scripts—just trying to cover all the bases.

The form itself is pretty standard stuff. It has maxlength attributes to keep lengths limited and it uses an onsubmit event to run the JavaScript validator. But the form also uses a captcha. We used the official captcha method in our Personal Status Board (PSB™) scripts, but designed a less cumbersome method for our HTML Form Creator registration script.

Take a gander at the captcha code: <IMG SRC="captcha-with-sessions.php" alt='captcha'>. A pretty strange type of image, to be sure! Browsers do NOT mind PHP scripts sitting in for PNG, BMP, GIF, or JPG images, believe it or not. The message "If you see no Captcha, disable your ad blocker" is displayed near the captcha because ad blockers with strong settings may knock the captcha out of the form. But Pop-up Blockers do not molest our captcha since it is NOT a pop-up. It's a random PNG image created using functions from the GD library, which is in all recent PHP versions. (To use the recommended bundled version of the GD library, which was first bundled in PHP 4.3.0, get your server hosts to use the configure option "--with-gd". Most already do this.)

The captcha image uses the font Holisb__.ttf, which is the Holiday Springs BTN True Type Font (get at MyFonts.com), but you may use other types if you wish. If you find arial.ttf in your C:\WINDOWS\Fonts\ directory on your computer, make sure it is in your folder with your PHP scripts on your server. Holisb__.ttf does a much cooler job, and will be harder for any automatic spambot script to read (and get the right answer for the arithmetic problem). For the captcha script, go to: HTML Form Creator—Captcha Script for Registration and Login.

The script below is called: register-with-captcha_.php

<?php
session_start();
$_SESSION['sessionid'] = session_id();

define('_NODIRECTACCESS', TRUE);
include_once"includes/config.php";

$sql = "CREATE TABLE IF NOT EXISTS my_members (
id int(4) NOT NULL auto_increment,
username varchar(20) NOT NULL,
score tinyint(4) NOT NULL DEFAULT '0',
password varchar(65) NOT NULL,
groupname varchar(20) NOT NULL,
city varchar(33) NOT NULL,
state varchar(2) NOT NULL,
zip int(5) NOT NULL,
email varchar(65) NOT NULL,
ip varchar(65) NOT NULL,
signup_date varchar(10) NOT NULL,
salt varchar(19) NOT NULL,
PRIMARY KEY (id)
) ENGINE=MyISAM AUTO_INCREMENT=1";

// Execute query
mysql_query($sql);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>HTML Form Creator Registration Script with Captcha</TITLE>
<meta name="description" content="HTML Form Creator Registration Script with Captcha">
<meta name="keywords" content="HTML Form Creator Registration Script with Captcha,Register Script,registration,captcha,php,javascript, dhtml, DHTML">
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p, li {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.k {text-align:right}
.j {position:absolute;top:50px;left:50%;margin-left:-300px;width:600px}
#myform {position:absolute;top:100px;left:50%;margin-left:-225px;width:450px;border:2px solid black;background-color:#8aa;}
#links {position:absolute;top:210px;left:82%;width:222px}
#t {width:410px;padding:9px;margin-top:-25px}
#undisplayed {position:absolute;top:210px;left:5%;width:170px}
</style>
<script language="javascript">

function validatepassword(){

var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
if (document.formpw.password.value.search(ck_password)==-1)
{alert("Please enter 6 to 20 letters, numbers and these for password: !@#$%^&*()_");document.formpw.password.focus();return false;}

var ck_username = /^[A-Za-z0-9_]{6,20}$/;
if (document.formpw.username.value.search(ck_username)==-1)
{alert("Please only enter 6 to 20 letters, numbers and underline for user name.");document.formpw.username.focus();return false}

var ck_city = /^[A-Za-z\s\-]{2,33}$/;
if (document.formpw.city.value.search(ck_city)==-1)
{alert("Please only enter 2 to 33 letters, space, or hyphen for city name.");document.formpw.city.focus();return false}

var ck_state = /^[A-Za-z]{2,2}$/;
if (document.formpw.state.value.search(ck_state)==-1)
{alert("Please select a State.");document.formpw.state.focus();return false}

var ck_zip = /^[0-9]{5,5}$/;
if (document.formpw.zip.value.search(ck_zip)==-1)
{alert("Please only enter 5 number zip code.");document.formpw.zip.focus();return false}

var ck_groupname = /^[A-Za-z0-9_]{6,20}$/;
if (document.formpw.groupname.value.search(ck_groupname)==-1)
{alert("Please only enter 6 to 20 letters, numbers and underline for group name.");document.formpw.groupname.focus();return false}

var ck_email = /^[A-Za-z0-9-_]+(\.[A-Za-z0-9-_]+)*@([A-Za-z0-9-_]+\.)?([A-Za-z0-9-_]+(\.[A-Za-z]{2,6})(\.[A-Za-z]{2})?)$/;
if (document.formpw.email.value.search(ck_email)==-1)
{alert("That email address is not valid.");document.formpw.email.focus();return false}

return true;}

</script>

</head>
<body>

<?php

$Entry=$_POST['entry'];
$U=$_POST['username'];
$P=$_POST['password'];
$G=$_POST['groupname'];
$C=$_POST['city'];
$S=$_POST['state'];
$Z=$_POST['zip'];
$E=$_POST['email'];
$A=$_POST['answer'];
$N=0;
$_SESSION['username'] = $U;
$_SESSION['groupname'] = $G;

if($Entry==1 && $A<>$_SESSION['a__________a']){$N=1;unset($U);echo '<script language="javascript">alert("Wrong captcha answer. Please try again.");window.location="register-with-captcha_.php";</script>;';
}else{

if($Entry==1 && $A==$_SESSION['a__________a']){
$check_user_data = mysql_query("SELECT * FROM my_members WHERE username = '$U' LIMIT 1") or die(mysql_error());
if(mysql_num_rows($check_user_data) > 0)
{$N=1;unset($U);echo '<script language="javascript">alert("This User Name already exists. Please try again.");window.location="register-with-captcha_.php";</script>;';
}else{

if($Entry==1 && $A==$_SESSION['a__________a']){
$check_user_data = mysql_query("SELECT * FROM my_members WHERE groupname = '$G' LIMIT 1") or die(mysql_error());
if(mysql_num_rows($check_user_data) > 0)
{$N=1;unset($U);echo '<script language="javascript">alert("This Group Name already exists. Please try again.");window.location="register-with-captcha_.php";</script>;';
}else{

$U=substr($U,0,20);
$P=substr($P,0,20);
$G=substr($G,0,20);
$C=substr($C,0,33);
$E=substr($E,0,65);
$S=substr($S,0,2);
$Z=substr($Z,0,5);

if (strlen($U)<6) {echo '<script language="javascript">alert("Please enter 6 to 20 characters for user name."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($G)<6) {echo '<script language="javascript">alert("Please enter 6 to 20 characters for group name."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($P)<6) {echo '<script language="javascript">alert("Please enter 6 to 20 characters for password."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($C)<2) {echo '<script language="javascript">alert("Please enter 2 to 33 characters for city."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($S)<2 || strlen($S)>2) {echo '<script language="javascript">alert("Please use dropdown list for state."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($Z)<5) {echo '<script language="javascript">alert("Please enter 5 characters for zip code."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (strlen($E)<6) {echo '<script language="javascript">alert("Please enter 6 to 65 characters for email address."); window.location = "register-with-captcha_.php"; </script>';
}else{
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$E)) {
echo '<script language="javascript">alert("That email address is not valid."); window.location = "register-with-captcha_.php"; </script>';
}else{
$pattern1 = '/[^a-zA-Z\\-\\s]/i';
$pattern2 = '/[^a-zA-Z0-9\\.\\,\\!\\;\\-\\_\\*\\@\\=\\+\\$\\/\\&\\[\\]\\#\\?\\047\\:\$\$]/i';
$pattern3 = '/[^a-zA-Z0-9\\_]/i';
$pattern4 = '/[^A-Za-z0-9\\!\\@\\#\\$\\%\\^\\&\\*\$\$\\_]/i';
$pattern5 = '/[^0-9]/';
$pattern6 = '/[^A-Z]/';
$replacement = '';
$U=strip_tags($U);
$P=strip_tags($P);
$G=strip_tags($G);
$C=strip_tags($C);
$E=strip_tags($E);
$S=strip_tags($S);
$Z=strip_tags($Z);
$C=preg_replace($pattern1, $replacement, $C);
$U=preg_replace($pattern3, $replacement, $U);
$E=preg_replace($pattern2, $replacement, $E);
$Z=preg_replace($pattern5, $replacement, $Z);
$P=preg_replace($pattern4, $replacement, $P);
$G=preg_replace($pattern3, $replacement, $G);
$S=preg_replace($pattern6, $replacement, $S);
$S=mysql_real_escape_string($S);
$C=mysql_real_escape_string($C);
$Z=mysql_real_escape_string($Z);
$G=mysql_real_escape_string($G);
$E=mysql_real_escape_string($E);
$U=mysql_real_escape_string($U);
$o=make_salt();$h=z_____z();

$I = $_SERVER['REMOTE_ADDR'];
$D = date("d-m-Y");$e=",0,";$score=0;
$sql="INSERT INTO my_members(id,username,score,password,groupname,city,state,zip,email,
ip,signup_date,salt)
VALUES(NULL, '$U', '$score', '$h', '$G', '$C', '$S', '$Z', '$E', '$I', '$D', '$o')";
$res=mysql_query($sql);
if($res){
$sql = "SELECT id FROM my_members WHERE username = '$U'";
$res=mysql_query($sql);
$row=mysql_fetch_assoc($res);
$id=$row['id'];
$_SESSION['userid'] = $id;
echo '<script language="javascript">alert("Entries were made successfully.");</script>';
}else{

$N=1;unset($U);
echo '<script language="javascript">alert("Entries were NOT made—something went wrong."); window.location="register-with-captcha_.php";</script>';}

}}}}}}}}}}}}

if($N==1||$Entry==0){ ?>

<center><h1>HTML Form Creator Registration Script with Captcha</h1></center>

<div id='myform'><BR><table id='t' border='0' cellspacing=0 cellpadding=2>
<form id='formpw' name="formpw" method="post" action="register-with-captcha_.php" onsubmit="return validatepassword()">
<tr><td class='k'><label for="User Name"><b>User Name: </b></td><td><input type="text" name="username" size="20" maxlength="20" value=""></label></td></tr>
<tr><td class='k'><label for="Password"><b>Password: </b></td><td><input type="password" name="password" size="20" maxlength="20" value=""></label></td></tr>
<tr><td class='k'><label for="Group Name"><b>Group Name: </b></td><td><input type="text" name="groupname" size="20" maxlength="20" value=""></label></td></tr>
<tr><td class='k'><label for="City"><b>City: </b></td><td><input type="text" name="city" size="20" maxlength="33" value=""></label></td></tr>
<tr><td class='k'><label for="State"><b>State: </b></td><td>
<select name="state" size='4'>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</label></td></tr>
<tr><td class='k'><label for="Zip"><b>Zip: </b></td><td><input type="text" name="zip" size="5" maxlength="5" value=""></label></td></tr>
<tr><td class='k'><label for="Email"><b>Email: </b></td><td><input type="text" name="email" size="20" maxlength="65" value=""></label></td></tr>
<br><br>
<tr><td class='k'><input type="hidden" name="entry" value="1">
 </td><td><IMG SRC="captcha-with-sessions.php" alt='captcha'>
</td></tr>
<tr><td class='k'><label for="Captcha answer"><b>Captcha answer: </b></td><td><input type="text" name="answer" size="20" maxlength="20" value=""></label></td></tr>
<tr><td align=left colspan=2>      
         
  If you see no Captcha, disable your ad blocker.</td></tr>
<tr><td class='k'> </td><td><BR><input type="submit" value="Submit">
           
<input type="reset" value="Reset"></td></tr></form></table><BR>
</div>

<div id='links'><BR>
<a HREF="login_.php">Login (I've registered)</a><BR>
<a HREF="http://www.css-resources.com/">Home</a><BR>
<a href="http://www.css-resources.com/contact.html">Contact us</a><BR>
<a href='forgot-password.php'>I forgot my password</a><BR>
<a HREF='forgot-user-name.php'>I forgot my user name</a><BR>
</div>

<div id='undisplayed'><BR>
The User Name, Password, and Email data in your profile will never be displayed in searches or matches, nor revealed to third parties without your express permission.
</div>

<?php
mysql_close();
}else{

?>

<form name="MyForm" method="POST" action="login_.php">
<input type="hidden" name="username" value=" ">

</form>

<script language="javascript">
var u = <?php echo json_encode($U); ?>;
document.MyForm.username.value=u;
document.MyForm.submit();
</script>

<?php
}}
?>

</body>
</html>

Free Personal Status Boards (PSB™)

HTML Form Creator Registration Script with Captcha CMS

Administrative HTML Form Creator Scripts

End-User HTML Form Creator Scripts