I have the following set up in Google tag manager using custom HTML and a PHP code in my directory file to create an exit popup to collect name, company, and email address for a discount. I have it working properly by sending saving the data to the database, however I would like to add an extra function that will send me an email with the same data information (name, company, and email address) to me after they click Sign UP. How do I add this properly.
It must stay in the format with two separate files and in this order to work in google tag manager.
<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);
