Create Newsletter SignUp Form Using jQuery And PHP
Last Updated : Jul 1, 2023
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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Create Newsletter Form It Takes Only Three Steps:-
- Make a HTML file and define markup and scripting
- Make a PHP file to store data
- 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.