**支援結束通知：**2026 年 10 月 30 日， AWS 將結束對 Amazon Pinpoint 的支援。2026 年 10 月 30 日之後，您將無法再存取 Amazon Pinpoint 主控台或 Amazon Pinpoint 資源 (端點、區段、行銷活動、旅程和分析)。如需詳細資訊，請參閱 [Amazon Pinpoint 終止支援](https://docs.aws.amazon.com/console/pinpoint/migration-guide)。**注意：**與 SMS、語音、行動推播、OTP 和電話號碼驗證相關的 APIs 不受此變更影響，並受 AWS 最終使用者傳訊支援。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 建立和部署 Web 表單，以使用 Amazon Pinpoint 的簡訊
<a name="tutorials-two-way-sms-part-5"></a>

使用 AWS 服務透過 Amazon Pinpoint 傳送簡訊的所有元件現在都已就緒。最後一個步驟是建立和部署 Web 表單，用來擷取客戶的資料。

## 建立 JavaScript 表單處理常式
<a name="tutorials-two-way-sms-part-5-create-form-handler"></a>

在本節中，您將建立一個 JavaScript 函數，用來剖析您在下一節中建立之 Web 表單的內容。剖析內容後，此函數會將資料傳送至您在[設定 Amazon API Gateway 中建立的 API](tutorials-two-way-sms-part-4.md)。

**建立表單處理常式**

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) 中取得的調用 URL。

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 託管供應商。若您不是現有的託管供應商，您可以使用 Amazon Route 53、Amazon Simple Storage Service (Amazon S3) 和 Amazon 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_tw/pinpoint/latest/userguide/images/SMS_Reg_Tutorial_Form_Step5.3.1.png)

1. 在 **First name (名字)**、**Last name (姓氏)** 和 **Phone number (電話號碼)** 欄位輸入您的聯絡資訊。
**注意**  
提交表單後，Amazon Pinpoint 會嘗試傳送訊息到您指定的電話號碼。由於此項功能，您應該使用真實的電話號碼，才能從頭到尾測試解決方案。  
如果您在[建立 Lambda 函數中測試 Lambda 函數](tutorials-two-way-sms-part-3.md)，您的 Amazon Pinpoint 專案至少已包含一個端點。測試此表單時，您應該在表單上提交不同的電話號碼或使用 [DeleteEndpoint](https://docs.aws.amazon.com/pinpoint/latest/apireference/apps-application-id-endpoints-endpoint-id.html#DeleteEndpoint) API 操作刪除現有的端點。

1. 檢查與您指定之電話號碼關聯的裝置，確保有收到訊息。

1. 開啟位於 [https://console.aws.amazon.com/pinpoint/](https://console.aws.amazon.com/pinpoint/) 的 Amazon Pinpoint 主控台。

1. **在所有專案**頁面上，選擇您在[建立 Amazon Pinpoint 專案中建立的專案](tutorials-two-way-sms-part-1.md#tutorials-two-way-sms-part-1-create-project)。

1. 在導覽窗格中，選擇 **Segments (客群)**。在 **Segments (客群)** 頁面，選擇 **Create a segment (建立客群)**。

1. 在 **Segment group 1 (客群群組 1)** 的 **Add filters to your segment (新增篩選條件來精簡客群)** 中，選擇 **Filter by user (依使用者篩選)**。

1. 對於 **Choose a user attribute (選擇使用者屬性)**，選擇 **FirstName**。然後，對於 **Choose values (選擇值)**，選擇您在提交表單時指定的名字。

   **Segment estimate (客群估計)** 區段應該會顯示有零個符合資格的端點以及一個端點 (位於總端點下)，如下圖所示。這個結果是正常的。Lambda 函數建立一個新端點時，預設是不選擇該端點。  
![\[端點選擇為零的區段。\]](http://docs.aws.amazon.com/zh_tw/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。目前，當您建立客群時，您會看到一個符合資格的端點，以及一個總端點。這個結果是正常的，因為端點現在已選擇加入。