**终止支持通知：** AWS 将于 2026 年 10 月 30 日终止对亚马逊 Pinpoint 的支持。2026 年 10 月 30 日之后，您将不再能够访问 Amazon Pinpoint 控制台或 Amazon Pinpoint 资源（端点、分段、活动、旅程和分析）。有关更多信息，请参阅 [Amazon Pinpoint 终止支持](https://docs.aws.amazon.com/console/pinpoint/migration-guide)。**注意：** APIs 与短信相关、语音、移动推送、OTP 和电话号码验证不受此更改的影响，并受 AWS 最终用户消息的支持。

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 创建和部署 Web 表单，以便在 Amazon Pinpoint 上使用短信收发
<a name="tutorials-two-way-sms-part-5"></a>

使用 Amazon Pinpoint 发送短信 AWS 服务的所有组件现已准备就绪。最后一步是创建和部署捕获客户数据的 Web 表单。

## 创建 JavaScript 表单处理程序
<a name="tutorials-two-way-sms-part-5-create-form-handler"></a>

在本节中，您将创建一个 JavaScript 函数来解析您在下一节中创建的 Web 表单的内容。解析内容后，此函数将数据发送到您在[设置 Amazon API Gateway](tutorials-two-way-sms-part-4.md) 中创建的 API。

**创建表单处理程序**

1. 在文本编辑器中，创建一个新文件。

1. 在编辑器中，粘贴以下代码。

   ```
   $(document).ready(function() {
   
     // Handle form submission.
     $("#submit").click(function(e) {
   
       var firstName = $("#firstName").val(),
           lastName = $("#lastName").val(),
           source = window.location.pathname,
           optTimestamp = undefined,
           utcSeconds = Date.now() / 1000,
           timestamp = new Date(0),
           phone = $("#areaCode").val()
                 + $("#phone1").val()
                 + $("#phone2").val();
   
       e.preventDefault();
   
       if (firstName == "") {
         $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your first name.</div>');
       } else if (lastName == "") {
         $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your last name.</div>');
       } else if (phone.match(/[^0-9]/gi)) {
         $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Your phone number contains invalid characters. Please check the phone number that you supplied.</div>');
       } else if (phone.length < 10) {
         $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Please enter your phone number.</div>');
       } else if (phone.length > 10) {
         $('#form-response').html('<div class="mt-3 alert alert-info" role="alert">Your phone number contains too many digits. Please check the phone number that you supplied.</div>');
       } else {
         $('#submit').prop('disabled', true);
         $('#submit').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  Saving your preferences</button>');
   
         timestamp.setUTCSeconds(utcSeconds);
   
         var data = JSON.stringify({
           'destinationNumber': phone,
           'firstName': firstName,
           'lastName': lastName,
           'source': source,
           'optTimestamp': timestamp.toString()
         });
   
         $.ajax({
           type: 'POST',
           url: 'https://example.execute-api.us-east-1.amazonaws.com/v1/register',
           contentType: 'application/json',
           data: data,
           success: function(res) {
             $('#form-response').html('<div class="mt-3 alert alert-success" role="alert"><p>Congratulations! You&apos;ve successfully registered for SMS Alerts from ExampleCorp.</p><p>We just sent you a message. Follow the instructions in the message to confirm your subscription. We won&apos;t send any additional messages until we receive your confirmation.</p><p>If you decide you don&apos;t want to receive any additional messages from us, just reply to one of our messages with the keyword STOP.</p></div>');
             $('#submit').prop('hidden', true);
             $('#unsubAll').prop('hidden', true);
             $('#submit').text('Preferences saved!');
           },
           error: function(jqxhr, status, exception) {
             $('#form-response').html('<div class="mt-3 alert alert-danger" role="alert">An error occurred. Please try again later.</div>');
             $('#submit').text('Save preferences');
             $('#submit').prop('disabled', false);
           }
         });
       }
     });
   });
   ```

1. 在前面的示例中，*https://example.execute-api.us-east-1.amazonaws.com/v1/register*替换为您在[部署 API](tutorials-two-way-sms-part-4.md#tutorials-two-way-sms-part-4-deploy-api) 中获得的调用网址。

1. 保存该文件。

## 创建表单文件
<a name="tutorials-two-way-sms-part-5-create-form"></a>

在本部分，您将创建一个 HTML 文件，其中包含客户注册您的短信计划时使用的表单。此文件使用您在上一节中创建的 JavaScript 表单处理程序将表单数据传输到您的 Lambda 函数。

**重要**  
当用户提交此表单时，它将触发一个 Lambda 函数，该函数会调用多个 Amazon Pinpoint API 操作。恶意用户可以对您的表单发起攻击，这可能会导致发出大量请求。如果您计划将此解决方案用于生产使用案例，应通过使用 [Google reCAPTCHA](https://www.google.com/recaptcha/about/) 之类的系统来确保其安全。

**创建表单**

1. 在文本编辑器中，创建一个新文件。

1. 在编辑器中，粘贴以下代码。

   ```
   <!doctype html>
   <html lang="en">
   
   <head>
     <!-- Meta tags required by Bootstrap -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   
     <script type="text/javascript" src="SMSFormHandler.js"></script>
     <title>SMS Registration Form</title>
   </head>
   
   <body>
     <div class="container">
       <div class="row justify-content-center mt-3">
         <div class="col-md-6">
           <h1>Register for SMS Alerts</h1>
           <p>Enter your phone number below to sign up for PromotionName messages from ExampleCorp.</p>
           <p>We don't share your contact information with anyone else. For more information, see our <a href="http://example.com/privacy">Privacy Policy</a>.</p>
           <p>ExampleCorp alerts are only available to recipients in the United States.</p>
         </div>
       </div>
       <div class="row justify-content-center">
         <div class="col-md-6">
           <form>
             <div class="form-group">
               <label for="firstName" class="font-weight-bold">First name</label>
               <input type="text" class="form-control" id="firstName" placeholder="Your first name" required>
             </div>
             <div class="form-group">
               <label for="lastName" class="font-weight-bold">Last name</label>
               <input type="text" class="form-control" id="lastName" placeholder="Your last name" required>
             </div>
             <label for="areaCode" class="font-weight-bold">Phone number</label>
             <div class="input-group">
               <span class="h3">(&nbsp;</span>
               <input type="tel" class="form-control" id="areaCode" placeholder="Area code" required>
               <span class="h3">&nbsp;)&nbsp;</span>
               <input type="tel" class="form-control" id="phone1" placeholder="555" required>
               <span class="h3">&nbsp;-&nbsp;</span>
               <input type="tel" class="form-control" id="phone2" placeholder="0199" required>
             </div>
             <div id="form-response"></div>
             <button id="submit" type="submit" class="btn btn-primary btn-block mt-3">Submit</button>
           </form>
         </div>
       </div>
       <div class="row mt-3">
         <div class="col-md-12 text-center">
           <small class="text-muted">Copyright © 2019, ExampleCorp or its affiliates.</small>
         </div>
       </div>
     </div>
   </body>
   
   </html>
   ```

1. 在前面的示例中，*SMSFormHandler.js*替换为您在上一节中创建的表单处理程序 JavaScript 文件的完整路径。

1. 保存该文件。

## 上传表单文件
<a name="tutorials-two-way-sms-part-5-upload-form"></a>

现在，您已经创建了 HTML 表单和 JavaScript 表单处理程序，最后一步是将这些文件发布到互联网。本部分假定您已经有一个 Web 托管提供商。如果您没有现有的托管服务提供商，则可以使用亚马逊 Route 53、亚马逊简单存储服务 (Amazon S3) 和亚马逊启动网站。 CloudFront有关更多信息，请参阅[托管静态网站](https://aws.amazon.com/getting-started/hands-on/host-static-website/)。

如果您使用另一个 Web 托管提供商，请参阅该提供商的文档，以了解有关发布网页的更多信息。

## 测试表单
<a name="tutorials-two-way-sms-part-5-test-form"></a>

发布表单后，您应提交一些测试事件，以确保该表单按预期工作。

**测试注册表单**

1. 在 Web 浏览器中，转至您上传注册表单的位置。如果您使用了 “[创建 JavaScript 表单处理程序”](#tutorials-two-way-sms-part-5-create-form) 中的代码示例，则会看到与下图中的示例类似的表单。  
![\[在步骤 5.1 中创建的客户申请表。\]](http://docs.aws.amazon.com/zh_cn/pinpoint/latest/userguide/images/SMS_Reg_Tutorial_Form_Step5.3.1.png)

1. 在**名字**、**姓氏**和**电话号码**字段中输入您的联系信息。
**注意**  
当您提交表单时，Amazon Pinpoint 会尝试向您指定的电话号码发送消息。由于有这种功能，您应该从头到尾使用真实的电话号码来测试该解决方案。  
如果您在[创建 Lambda 函数](tutorials-two-way-sms-part-3.md)中测试了 Lambda 函数，则您的 Amazon Pinpoint 项目已经包含至少一个端点。测试此表单时，您应该在表单上提交不同的电话号码，或者使用 [DeleteEndpoint](https://docs.aws.amazon.com/pinpoint/latest/apireference/apps-application-id-endpoints-endpoint-id.html#DeleteEndpoint)API 操作删除现有的终端节点。

1. 检查与您指定的电话号码关联的设备，以确保它收到消息。

1. 打开亚马逊 Pinpoint 控制台，网址为。[https://console.aws.amazon.com/pinpoint/](https://console.aws.amazon.com/pinpoint/)

1. 在**所有项目**页面上，选择您在[创建 Amazon Pinpoint 项目](tutorials-two-way-sms-part-1.md#tutorials-two-way-sms-part-1-create-project)中创建的项目。

1. 在导航窗格中，选择**客户细分**。在**客户细分**页面上，选择**创建客户细分**。

1. 在 **Segment group 1 (分段组 1)** 的 **Add filters to refine your segment (添加筛选条件以细化分段)** 下，选择 **Filter by user (按用户筛选)**。

1. 在 **“选择用户属性”** 中，选择**FirstName**。然后，对于**选择值**，选择您在提交表单时指定的名字。

   **客户细分估算**部分应显示有零个合格端点以及一个端点（在总计端点下），如以下示例所示。这是预期结果。当 Lambda 函数创建一个新的端点时，该端点默认情况下选择退出。  
![\[选择加入的端点为零的客户细分。\]](http://docs.aws.amazon.com/zh_cn/pinpoint/latest/userguide/images/SMS_Reg_Tutorial_LAM_Step8.9.png)

1. 在设备收到消息时，使用您在[启用双向短信](tutorials-two-way-sms-part-1.md#tutorials-two-way-sms-part-1-enable-two-way)中指定的双向短信关键字来回复该消息。Amazon Pinpoint 会立即发送回复消息。

1. 在 Amazon Pinpoint 控制台中，重复步骤 4 至 8。这次，当您创建一个客户细分时，将看到一个合格端点，以及总共一个端点。这是预期结果，因为端点现已选择接收消息。