javascript - 如何在 PHP JavaScript 的退出弹出窗口中输入数据后添加发送电子邮件的功能

Question

我在 Google 标签管理器中使用自定义 HTML 和目录文件中的 PHP 代码进行了以下设置，以创建退出弹出窗口以收集姓名、公司和电子邮件地址以获得折扣。我通过将数据保存到数据库来让它正常工作，但是我想添加一个额外的功能，在他们单击“注册”后，它将向我发送一封包含相同数据信息(姓名、公司和电子邮件地址)的电子邮件给我.如何正确添加。

它必须保持包含两个单独文件的格式，并按此顺序在 google 标签管理器中工作。

<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);

Answer 1

您可以使用带有变量 $message 作为字符串的函数 mail

$message = $_POST['name'].' '.$_POST['company'].' '.$_POST['email'];
mail($to, $subject, $message, $headers);