A simple newsletter sign-up form using PHP, Ajax and the Prototype JavaScript framework

September 30th, 20092 Comments

A simple newsletter sign-up form using PHP, Ajax and the Prototype JavaScript framework.

When visitor enters his name and email and clicks on “Sign up” a check is being done if the email exists already and if not it is added.

This is happening without refreshing the current page (Ajax).
All code is well commented, written as simply as possible so users can easily adapt it.
For installation/configuration/licensing refer to the readMe.txt inside the package.
Works with all modern browsers.

Simple html form

<div id="message" style="display:none;color:red;"></div>
<div id="okmessage" style="display:none;align:center;color:green;">Thank you</div>
<table border="0" cellpadding="5" cellspacing="0">

<tr>
<td><font size=2 face=Arial>Name:</font></td>
<td><input type="text" name="name" id="name" value=""></td>
</tr>
<tr>
<td><font size=2 face=Arial>Email:</font></td>
<td><input type="text" id="email" name="email" value=""></td>
</tr>

<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan="2" align=right>
<input onclick="signup();" type="submit" id="submit" value="Sign up">
<div id="loading" style="display:none;align:center;"><img src="wait.gif"></div>
</td>
</tr>
</table>

Javascript code

<script type="text/javascript" language="javascript">
function signup()
{
//EMAIL VALIDATION
var goodEmail = $F(“email”).match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
apos = $F(“email”).indexOf(“@”);
dotpos = $F(“email”).lastIndexOf(“.”);
lastpos = $F(“email”).length-1;
var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2);
$("okmessage").hide();

if ($F("name")=="")
{
$("message").show();
$("message").innerHTML="Please enter your name";
$("name").focus();
return false;
}
else if (($F("email") == "") || (!goodEmail && badEmail))
{
$("message").show();
$("message").innerHTML="Please enter a valid email";
$("email").focus();
return false;
}
//YOU MAY WANT TO CHANGE THE URL IN THE LINE BELOW
var url = "optIn.php";
var params='email='+$F("email")+'&name='+encodeURIComponent($F("name"));
new Ajax.Request(url, {onComplete:showResponse, onException:showException, onFailure:showException, asynchronous:true, method:"post", evalScripts:false, postBody:params});
$("submit").hide();
$("loading").show();

function showResponse(req)
{
if (req.responseText=="1") //1. added to contacts
{
$("message").hide();
$("loading").hide();
$("okmessage").show();
$("submit").show();
$("name").clear();
$("email").clear();
}
else if(req.responseText=="0") //0.already in contacts
{
$("loading").hide();
$("okmessage").hide();
$("message").show();
$("message").innerHTML="You are already subscribed";
$("submit").show();
$("name").clear();
$("email").clear();
}
else if (req.responseText=="error")
{
$("message").show();
$("message").innerHTML="An error has occured. Please try again.";
$("loading").hide();
$("okmessage").hide();
$("submit").show();
}
else if (req.responseText=="dberror")
{
$("message").show();
$("message").innerHTML="MySQL connect failed or Cannot select database.";
$("loading").hide();
$("okmessage").hide();
$("submit").show();
}
else
{
$("message").show();
$("message").innerHTML="MySQL connect failed or Cannot select database.";
$("loading").hide();
$("okmessage").hide();
$("submit").show();
}
}
function showException()
{
$("message").show();
$("message").innerHTML="Error occured while talking to the server. Please try again.";
$("loading").hide();
$("okmessage").hide();
$("submit").show();
$("name").clear();
$("email").clear();
}
}
</script>

Database


— Database: `db_newsletter`

— ——————————————————–

— Table structure for table `tbl_contacts`

CREATE TABLE `tbl_contacts` (
`id` int(11) NOT NULL auto_increment COMMENT ‘id primary key’,
`name` varchar(25) NOT NULL COMMENT ‘member name’,
`email` varchar(80) NOT NULL COMMENT ‘member email’,
PRIMARY KEY (`id`)
);
— ——————————————————–

PHP code with Mysql(optIn.php)

<?php
usleep(5000);
$name = mysql_escape_string($_POST[‘name’]);
$email = mysql_escape_string($_POST[‘email’]);
// database connection config
$dbHost = ‘localhost';
$dbUser = ‘root';
$dbPass = ”;
$dbName = ‘db_newsletter';

$dbConn = mysql_connect($dbHost, $dbUser, $dbPass) or die(“dberror”);

if($dbConn){

mysql_select_db($dbName,$dbConn) or die(“dberror”) ;

$sql = “SELECT name, email FROM tbl_contacts WHERE email=’$email'”;
$result = mysql_query($sql) or die (“dberror”);

if(mysql_num_rows($result)>0){
echo “0”;
}
else
{
$sql = “INSERT into tbl_contacts (name, email) VALUES (‘$name’, ‘$email’)”;
$result = mysql_query($sql) or die (“dberror”);

if(mysql_num_rows($result)>0){
echo “1”;
}else{
echo “error”;
}
}
//close the connection
mysql_close($dbConn);

}else{
//Could not connect
echo “dberror”;
}
?>

Download the code here

Related Posts:

Tagged : , , ,

2 Responses

  1. […] A simple newsletter sign-up form using bPHP/b, Ajax and the Prototype b…/b SHARETHIS.addEntry({ title: “A simple newsletter sign-up form using bPHP/b, Ajax and the […]

  2. Excellent site. It was pleasant to me.,