✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Create Newsletter SignUp Form Using jQuery And PHP

Last Updated : Jul 1, 2023

IN - jQuery PHP CSS HTML | Written & Updated By - Anjali

In this tutorial we will show you how to create newsletter signup form using jQuery and PHP, 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.

You may also like validate email using jQuery.

Create Newsletter SignUp Form Using jQuery And PHP

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on newsletter signup form helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →