Subscription popup using JQuery
Hello peoples,
You all must visited in various blog sites like this once and you may seen the subscription popup form appears to you for subscribe to their website with your email. So I thought lets make this type of system for your own website. So lets get started :
Video tutorial of this post is just bottom of the page.
First of all I am using sweetalert a plugins of jQuery to make this. Sweetalert implementation is too much easy. I am showing you by a blank html page where has no html design so that you can understand what I am doing for this actually.
I have used 4 php pages to make this:
- db.php (database connection page),
- index.php (Here the subscribe form will appear)
- check_email.php (Here is the email checking code for for rejecting same email requests),
- subscribe.php (Here is the programm for inserting the email/Subscribe system)
Make your own database connection in db.php page and lets see the html code in index.php.
index.php
<!DOCTYPE html> <html> <head> <title>swal</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.6/sweetalert2.css"> </head> <body> </body> </html>
You see, I have no design intag. You implement your design in body. And see in the upper position of the page I have called some script and js these are the main thing of making this happens.
Now make another script tag after ending body tag and implement this codes like this-
<script> $(document).ready(function(){ swal({ title: 'Submit email to run ajax request', input: 'email', showCancelButton: true, confirmButtonText: 'Submit', showLoaderOnConfirm: true, preConfirm: function (email) { return new Promise(function (resolve, reject) { setTimeout(function() { $.ajax({ type: 'post', url: 'check_email.php', data: {email:email}, success: function(result){ if(result>0){ reject('This email is already taken.') } else{ $.ajax({ type: 'post', url: 'subscribe.php', data: {email:email}, success: function(data){ resolve() } }); } } }); }, 1000) }) }, allowOutsideClick: true }).then(function (email) { swal({ type: 'success', title: 'Ajax request finished!', html: 'Submitted email: ' + email }) }) }); </script>
check_email.php
<?php require 'db.php'; $qry = mysqli_query($con,"SELECT * from `admin` WHERE `email` = '".$_POST['email']."'"); $row = mysqli_num_rows($qry); echo $row; ?>
subscribe.php
<?php require 'db.php'; $qry = mysqli_query($con,"INSERT into `admin` (email) value ('".$_POST['email']."')"); ?>
If it helps you then please get in touch for more updates.
Click Here: To Get Code of jQuery DataTable Plug-in in Website
Click Here: To create A Signature Pad Using jQuery
Great List.Thanks for sharing this list.This will be a great list for linkbuilding campaign email database .
This is an awesome article. Lot of information has been give.
Buy email list for marketing here