Create Newsletter SignUp Form Using jQuery And PHP

Tuesday, Mar 7, 2017

Tags:- jQuery PHP CSS HTML


Newsletter is a daily, weekly or monthly latest update of particular website delivered on your email. Newsletter Signup is one of the most toughest method to get visitor because you have to make your form beautiful and attractive to attract visitors attention and make them wants to signup. So , in this tutorial we will show you how to create newsletter signup form using jQuery and PHP.You may also like validate email using jQuery.


See Demo
Newsletter Signup Form Using jQuery And PHP


To Create Newsletter Form It Takes Only Three Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to store data
  3. Make a CSS file and define styling


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name newsletter.html

<html>
<head>
 <link href="newsletter.css"  rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="jquery.js"></script>
 <script>
  document.addEventListener('DOMContentLoaded',function()
  {
   $("#newsletter_form").slideDown();
  });

  function close_form()
  {
   $("#newsletter_form").slideUp();
  }
 </script>
</head>
<body>

<div id="newsletter_form">
 <h1 class="signup_label">Subscribe To Get Email Updates Of Our Latest Tutorials On Web Development</h1>
 <form action="signup.php" method="post">
  <p>
   <input type="text" name="user_name" id="user_name" placeholder="Enter Your Name">
   <input type="text" name="email" id="email" placeholder="Enter Your Email Id"/>
  </p>
  <input type="submit" value="Subscribe" name="submit_form"/>
  <input type="button" value="No Thanks" onclick="close_form();"/>
 </form>
</div>


<div id="wrapper">
 <h2>Create Newsletter SignUp Form Using jQuery And PHP</h2>
</div>

</body>
</html>

In this step we create a div for newsletter form and addEventListener to display form after page load for signup and attract most of the visitor.We use jQuery slideDown() and slideUp() function to give simple animation to our newsletter form.You may also like login and signup form with flip animation.



Step 2.Make a PHP file to store data

We make a PHP file and save it with a name signup.php

// Database Structure 
CREATE TABLE `newsletter_signups` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` text NOT NULL,
 `email` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php

$host="localhost";
$username="root";
$password="";
$databasename="sample";

$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

if(isset($_POST['submit_form']))
{
 $name=$_POST["user_name"];
 $email=$_POST["email"];
 
 mysql_query("insert into short_urls values('','$name','$email')");
 echo "Thank You For Joining Our Newsletter";
}
?>

In this step we create a table 'newsletter_signups' to store name and email of users who signup the newsletter and then insert the data and after display thank you message.You may also like login form with shake animation.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name newsletter.css

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family:helvetica;
 background-color:#B45F04;
}
#newsletter_form
{
 display:none;
 width:100%;
 height:100%;
 background-color:#0080FF;
 text-align:center;
 padding-top:150px;	
}
#newsletter_form h1
{
 font-size:45px;
 color:white;
}
#newsletter_form #user_name
{
 margin-top:20px;
 width:20%;
 height:50px;
 padding-left:20px;
 border:none;
 font-size:17px;
}
#newsletter_form #email
{
 margin-top:20px;
 width:50%;
 height:50px;
 padding-left:20px;
 border:none;
 font-size:17px;
}
#newsletter_form input[type="submit"]
{
 margin-top:10px;
 width:35%;
 height:50px;
 border:none;
 background-color:#084B8A;
 color:white;
 font-size:22px;
 cursor:pointer;
}
#newsletter_form input[type="button"]
{
 margin-top:10px;
 width:35%;
 height:50px;
 border:none;
 background-color:#FE2E2E;
 color:white;
 font-size:22px;
 cursor:pointer;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:995px;
}

You can view our acoount verification system through email to verify subscriber.Thats all, this is how to create newsletter signup form using jQuery and PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email