<style>
#ouibounce-modal {
display: none;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat fixed transparent\9;
z-index: 9998;
color: #fff;
transition: opacity 500ms;
}
.content h2 {
font-size: 19pt;
color: #ed1c24;
}
.popup {
margin: 0px;
padding: 20px;
z-index: 9999;
padding-bottom: 0px;
text-align: left;
height: 350px;
background: #fff;
border-radius: 5px;
width: 225px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #000;
}
.popup .closePopupCross {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.form-group {
padding-top: 20px;
}
.help-block {
font-size: 10pt;
color: #C71585;
}
.popup .closePopupLink {
font-size: 11pt;
color: #aaa;
margin-left: 30px;
}
.signUpButton {
background-color: #ed1c24;
border: none;
color: black;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.noButton {
background-color: #ccc;
border: none;
color: black;
padding: 9px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
<script>
$(document).ready(function() {
$('body').prepend('<div id="ouibounce-modal"><div class="overlay"></div><div class="popup"><div class="content"><h2>Want 5% off?</h2>Fill out the form to subscribe to our newsletter to get monthly deal days of 5% off or free ground shipping, news, and updates!<form action="/progress.php" method="POST" id="newsletter_popup"><div id="name-group" class="form-group"><label for="name">Full Name: </label><input type="text" class="form-control" name="name" placeholder="Your name"></div><div id="company-group" class="form-group"><label for="company">Company: </label><input type="text" class="form-control" name="company" placeholder="Your Company Name"></div><div id="email-group" class="form-group"><label for="email">Email: </label><input type="text" class="form-control" name="email" placeholder="mail@example.com"></div><br/><button type="submit" class="signUpButton">Sign up</button> <a class="noButton" href="#">No thanks!</a></form></div></div></div>');
$('.closePopupLink, .closeLeavePage, .overlay').click(function() {
$('.overlay, .popup').fadeOut(500);
});
$('#newsletter_popup').submit(function(event) {
$('.form-group').removeClass('has-error');
$('.help-block').remove();
var formData = {
'name' : $('input[name=name]').val(),
'company' : $('input[name=company]').val(),
'email' : $('input[name=email]').val()
};
jQuery.ajax({
type : 'POST',
url : '/progress.php',
data : formData,
dataType : 'json',
encode : true,
async : true
})
.done(function(data)
{
console.log(data);
if(!data.success)
{
if(data.errors.name)
{
$('#name-group').addClass('has-error');
$('#name-group').append('<div class="help-block">' + data.errors.name + '</div>');
}
if(data.errors.name)
{
$('#company-group').addClass('has-error');
$('#company-group').append('<div class="help-block">' + data.errors.name + '</div>');
}
if(data.errors.email)
{
$('#email-group').addClass('has-error');
$('#email-group').append('<div class="help-block">' + data.errors.email + '</div>');
}
}
else
{
$('#newsletter_popup').append('<div class="alert alert-success">' + data.message + '</div>');
//window.location = '/thank-you';
}
})
.fail(function(data) {
console.log(data);
});
event.preventDefault();
});
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});
});
</script>
<?php
//Add email and name to the database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "dbname";
// Create connection
$connection = mysqli_connect($servername, $username, $password, $dbname);
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
// validate the variables ======================================================
// if any of these variables don't exist, add an error to our $errors array
if(filter_var($_POST['name'], FILTER_SANITIZE_STRING) === false)
{
$errors['email'] = "The given name isn't valid.";
}
if(filter_var($_POST['company'], FILTER_SANITIZE_STRING) === false)
{
$errors['email'] = "The given company isn't valid.";
}
if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false)
{
$errors['email'] = "The given email isn't valid.";
}
if (empty($_POST['name']))
{
$errors['name'] = "Your name is required for signing up.";
}
if (empty($_POST['company']))
{
$errors['company'] = "Your Company name is required for signing up.";
}
if (empty($_POST['email']))
{
$errors['email'] = "You email is required for signing up.";
}
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if (!empty($errors))
{
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
}
else
{
// if there are no errors process our form, then return a message
// DO ALL YOUR FORM PROCESSING HERE
// THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)
// show a message of success and provide a true success variable
//Check if emailadres isn't allready in our database
$sql = "SELECT name, email FROM newsletter WHERE email = '".$_POST['email']."'";
$result = mysqli_query($connection, $sql);
//When the email doesn't exist in the database
if(mysqli_num_rows($result) == 0)
{
$data['success'] = true;
$data['message'] = 'Success!';
//Add name and email to the database
$sql = "INSERT INTO newsletter (name, company, email) VALUES ('".$_POST['name']."', '".$_POST['company']."','".$_POST['email']."')";
mysqli_query($connection, $sql);
}
else
{
$errors['email'] = "Email address is already added to the database!";
$data['success'] = false;
$data['errors'] = $errors;
}
mysqli_close($connection);
}
// return all our data to an AJAX call
echo json_encode($data);