对于许多数字营销人员来说，登陆页面，也被称为 "挤压 "或 "目的地 "页面，是所有重要的单一页面，旨在捕获潜在买家的联系信息。
通常情况下，登陆页面是一个更大的营销漏斗序列的一部分，旨在引导访问者通过一个旅程，最终将他们转化为买家。然而，在活动目标要求在每个新线索到达时与他们进行个人接触的情况下，漏斗系统将无法完成工作。
幸运的是，有一个Twilio SMS API可以满足这个要求。
在本教程中，你将学习如何建立一个带有全功能PHP表单的登陆页面，通过电子邮件和短信发送 "你有一个新线索"的通知。
创建登陆页面
首先，创建一个文件夹，命名为the-beauty-salon，因为我们要为一个虚构的美容企业创建一个登陆页面。然后，在这个目录中，再创建两个文件夹：一个是CSS，命名为css，另一个是图片，命名为img。
你可以通过运行下面的命令来完成这一切：
mkdir -p the-beauty-salon/{css,img}
如果你使用的是微软的Windows系统，可以运行下面的命令来代替：
mkdir the-beauty-salon/css the-beauty-salon/img
接下来，用你的IDE或文本编辑器在顶层目录下创建一个新的文件，index.php。然后，将下面的代码添加到该文件中：
<?php
require 'form_validation.php';
?>
在这里，我们正在链接我们稍后将创建的PHP代码，以验证我们的表单。
接下来，如果你的IDE安装了Emmet插件，那么你可以在index.php中自动生成一个基本的HTML模板，输入一个感叹号并按下TAB键，这样就会得到如下结果。如果你没有Emmet插件，把下面的代码复制到index.php中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
之后，更新开头的HTML标签，使其与以下内容相匹配：
<html lang="en" class="h-100">
我们将通过内容交付网络（CDN）使用Bootstrap，所以不需要安装任何东西。为了加载Bootstrap的CSS文件，复制并将这个标签放在关闭的head 标签之前：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous">
然后，复制并将这个脚本标签放在关闭的</body> 标签之前：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
之后，在关闭的head 标签之前添加下面的link 标签：
<link href="css/style.css" rel="stylesheet">
最后，将title 标签内的文字从 "Document "改为你的项目名称，例如，"The Beauty Salon"。现在我们已经完成了项目的head 部分。你在index.php中的代码应该看起来像下面这样：
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sales page for our annual autumn beauty workshop.">
<title>The Beauty Salon</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
让我们进入页面的主体部分。编辑index.php以匹配下面的代码，保留后面的script 标签：
</head>
<body class="d-flex h-100 text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">The Beauty Salon</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>
<main class="main-content">
<?php if ($msg != ''): ?>
<div class="alert <?php echo $alert; ?>"><?php echo $msg; ?></div>
<?php endif; ?>
<h1>The Beauty Workshop</h1>
<p class="lead">How to start and scale your beauty business during these uncertain times. Our autumn workshop is dedicated to
all the newbies in the beauty industry. Start learning how to thrive.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary" data-bs-toggle="modal" data-bs-target="#register">Register Now</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Made With Love <a href="#" class="text-white">The Beauty Salon</a>, by <a
href="#" class="text-white">Ijeoma Nelson</a>.</p>
</footer>
</div>
代码开始时，一些Bootstrap类被添加到开头的body 标签。然后添加header 标签，以包含导航菜单的所有链接。接下来是页面的主要部分，它被整齐地包裹在main 标签中。一些PHP代码被注入，以便向用户显示一条确认信息，通知他们表单提交的成功状态。
在本教程的后面，我们将使用data-bs-toggle 和data-bs-target 来控制一个模态对话框，这样，每当用户点击 "立即注册 "按钮时，注册表就会弹出来。最后，通过使用页脚标签，业务证书被添加到登陆页面的底部。
是时候用一些CSS来为我们的页面设置样式了。我把样式页分为三个部分。第一部分是关于标题的，第二部分是关于正文的，最后一部分是关于模态对话框的。
让我们从第一部分开始。使用你喜欢的编辑器或IDE，在css目录下创建一个CSS样式表，命名为style.css，并在其中插入以下代码：
/*
* Header
*/
h3 {
color: #9b2963;
font-size: 40px;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #9b2963;
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover {
color: #ffffff;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: #ffffff;
}
.nav-masthead .nav-link+.nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #9b2963;
border-bottom-color: #fff;
}
接下来，我们将为着陆页的主体添加CSS。把下面的CSS添加到你的文件中：
/*
* Body
*/
body {
background: url("/img/adam-winger-VjRpkGtS55w-unsplash.jpg") no-repeat, center;
background-size: cover;
}
.cover-container {
max-width: 42em;
}
main {
background-color: #333333;
opacity: 0.85;
padding: 40px 40px 40px 40px !important;
color: #ffffff;
}
.lead {
padding-top: 10px;
line-height: 1.7;
}
.btn-secondary {
background-color: #9b2963;
border-color: #9b2963;
color: #fff;
padding: 12px 40px;
font-weight: bold;
}
.btn-secondary:hover {
background-color: #fff !important;
border-color: #fff !important;
color: #333;
}
你可以从unsplash下载背景图片，adam-winger-VjRpkGtS55w-unsplash.jpg，到项目根目录下的img目录。
最后，我们将通过添加模态对话框的CSS来完成这一部分：
/*
* modal
*/
.modal-text {
color: #333333;
font-size: 20px;
text-align: center;
padding-bottom: 0;
margin-bottom: 3px;
}
.modal-header {
flex-direction: column;
padding-bottom: 0 !important;
}
.modal-title {
color: #9b2963;
font-size: 25px;
}
.form-label {
color: #333333;
}
div.mb-3 {
text-align: left !important;
}
安装Twilio SDK
打开你的终端，在你的项目文件夹的顶级目录下运行以下命令：
composer require twilio/sdk
一旦安装完成，你应该看到类似以下的输出：
创建PHP表单
接下来，在index.php中，让我们在Bootstrap的modal-* 类的帮助下添加一个PHP表单，这样，每次我们的访问者点击CTA按钮时，窗口中就会弹出一个注册表。打开index.php，在最后关闭的div 标签后添加以下代码：
<div class="modal fade" id="register" tabindex="-1" aria-labelledby="registerLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="registerLabel">The Beauty Salon</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="modal-text">Leave your name + email.</p>
<p class="modal-text">We'll get back to you soon!</p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="mb-3">
<label for="exampleInputName1" class="form-label">Name</label>
<input type="text" name="name" class="form-control" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" name="email" class="form-control" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">
</div>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
这段代码将Bootstrap模态组件添加到CTA按钮上。此外，通过使用PHP的isset()函数，进行一些快速初步的前端表单验证。
验证和净化表单请求
现在是时候写一些代码来验证和处理输入表单的数据了。表单验证是一项必要的安全措施，因为它可以保护你的网站免受恶意攻击，如SQL注入、跨站脚本等。在你的编辑器或IDE中，在项目的顶级目录下创建一个名为form_validation.php的新文件。然后，在该文件中添加以下代码：
<?php
require 'twilio_sms.php';
$msg = '';
$alert = '';
if (filter_has_var(INPUT_POST, 'submit')) {
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
if (!empty($name) && !empty($email) && filter_var($email, FILTER_VALIDATE_EMAIL) !== false) {
$toEmail = 'msetter@twilio.com';
$subject = 'Contact Request From ' .$name;
$body = '<h2>Contact Request</h2><h4>Name</h4><p>'.$name.'</p><h4>Email</h4><p>'.$email.'</p>';
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "content-Type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: " .$name. "<" .$email. ">" . "\r\n";
if (mail($toEmail, $subject, $body, $headers)) {
send_sms($name, $email);
unset($_POST['name']);
unset($_POST['email']);
$msg = "Your Email Has Been Sent";
$alert = "alert-success";
} else {
$msg = "Your Email Was Not Sent";
$alert = "alert-danger";
}
}
if (empty($name) || empty($email)) {
$msg = "Please fill in all fields";
$alert = "alert-danger";
} elseif (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$msg = "Please use a valid email";
$alert = "alert-danger";
}
}
代码开始需要Twilio SMS函数，该函数将用于发送短信。之后，filter_has_var() 用来进行简单的检查，以确认表单是否已经提交。如果这个检查不成功，那么用户会被告知填写所有的表单字段。如果检查通过，就会对提交的姓名和电子邮件地址进行检查，以确保它们不是空的，而且电子邮件地址是有效的。如果这些检查失败，用户会收到错误信息的提醒。如果检查通过，收件人的电子邮件就被创建。
最后，使用mail()函数将用户输入的数据用电子邮件发送出去。如果数据被成功发送，那么Twilio会发送一条短信，通知登陆页面的所有者他们有了一个新的线索。否则，访问者会被提醒他们的电子邮件没有被发送。
不要忘记用你自己的电子邮件地址替换example@mail.com ，否则你的代码将无法工作。
这样就完成了表单的验证和净化工作。下一个部分是创建Twilio函数来发送短信。
将Twilio SMS API与登陆页面结合起来
在项目的顶层目录下创建一个新的文件，twilio_sms.php，并在其中添加以下代码：
<?php
require __DIR__ . '/vendor/autoload.php';
use Twilio\Rest\Client;
function send_sms($name, $email)
{
$sid = "TWILIO_ACCOUNT_SID";
$token = "TWILIO_AUTH_TOKEN";
$client = new Client($sid, $token);
$client->messages->create(
'+[your mobile number]',
[
'from' => 'TWILIO_PHONE_NUMBER',
'body' => 'Congratulations! You Have A New Lead! ' . $name . " > " . $email . "."
]
);
}
在这里，代码首先要求Composer的自动加载器并导入Twilio API。然后，它初始化了一个新的Client 实例，名为$client ，并将你的Twilio账户SID和Auth Token作为参数传给它。这个对象通过它的create() 函数创建一个包含你的手机号码、Twilio号码和通知信息的信息体。现在，每当用户成功提交表单时，一条短信将被发送到你的手机上。
检索你的Twilio凭证和电话号码
这些都是必需的，这样代码才能向Twilio提出认证请求，并发送线索通知。登录到你的Twilio账户，从Twilio控制台的仪表板，复制你的账户SID和Auth Token，并将它们分别粘贴到twilio_sms.php中TWILIO_ACCOUNT_SID 和TWILIO_AUTH_TOKEN 的占位符数值的地方。
然后，在左侧的导航面板上点击**"电话号码** > 管理 > 活动号码"。从那里，点击 "号码 "栏中具有短信功能的号码。最后，在twilio_sms.php中复制 "电话号码 "值，而不是 "友好名称 "值，以取代TWILIO_PHONE_NUMBER 。最后，用你的手机号码替换+[your mobile number] 。
测试着陆页是否按预期工作
现在代码已经完成，是时候测试它是否工作了。要做到这一点，首先使用PHP内置的webserver启动应用程序，在项目的根目录下运行以下命令：
php -S 0.0.0.0:8080 -t .
接下来，打开浏览器http://localhost:8080，加载登陆页面。它应该看起来像下面的图片。
接下来，点击 "立即注册"按钮，这将打开模态对话框，然后填写你的详细资料并按提交。如果一切按预期进行，过一会儿，你应该在你的智能手机上收到一条短信，如下图所示。
祝贺你完成了本教程。我祝愿你在获得这些线索方面获得成功。
