如何使用HTML建立開啟簡訊撰寫介面並填寫手機號的按鈕?


開啟簡訊撰寫介面的按鈕為使用者提供了便利,可以直接從我們的網站向電話號碼傳送簡訊,而無需將其寫下再進行傳送。

藉助``標籤的href屬性,我們將URL替換為手機號碼,並在其前面新增sms:,以建立一個簡訊超連結。

建立開啟簡訊撰寫介面並填寫手機號的按鈕有幾個用例,例如:聯絡客戶支援、請求資訊、銷售和營銷等。對於那些更喜歡簡訊而不是電話或電子郵件的使用者來說,這尤其有用。在緊急情況下,當他們無法撥打電話時,它也非常方便。

語法

<a href="sms:(numberwith_countrycode),
           (numberwith_countrycode),..."> Text for the link</a>

“連結文字”將顯示為可點選的連結。

示例1

我們將建立一個可點選的按鈕,可以直接向預先填充的號碼撰寫簡訊。

演算法

  • 上傳包含頁面CSS樣式的樣式部分。

  • 定義主體部分並新增重要的HTML元素以建立頁面的內容。

  • 分別使用h1和p標籤新增主要標題和頁面的文字描述。

  • 建立一個超連結,以便使用者可以使用sms:方案和在href屬性中包含的電話號碼傳送簡訊。

<!DOCTYPE html>
<html>
  
<head>
    <title>Create a button to send SMS directly</title>
    <!-- CSS styles for the page -->
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 20px;
            line-height: 1.6;
            color: #333;
        }
        a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
        }
        a:hover {
            background-color: #0069d9;
        }
    </style>
</head>
  
<body>
    <!-- Main heading for the page -->
    <h1>Get in touch with us</h1>
    <!-- Description text for the page -->
    <p>Have any questions or concerns? Send us a text message:</p>
      
    <!-- Link for sending a text message -->
    <a href="sms:+912244668800">Text us at +91-224-4668-800</a>
</body>
  
</html>

示例2

我們將建立一個按鈕,開啟簡訊撰寫介面,以便向多個號碼傳送簡訊。

演算法

  • 建立一個包含必要的元素(包括head、body、title、h1、p和a)的HTML檔案。

  • 在head部分,新增任何必要的CSS樣式來設計頁面,包括字型樣式、背景顏色和按鈕樣式。

  • 在body部分,新增主要標題和頁面的定義文字,以解釋簡訊功能的目的。

  • 建立一個錨點標籤,並將href屬性設定為"sms:(國家程式碼)(號碼1), (國家程式碼)(號碼2), ...",以指定需要接收簡訊的手機號碼。

  • 向錨點標籤新增文字,表示點選按鈕將向所需的手機號碼傳送簡訊。

<!DOCTYPE html>
<html>
  
<head>
    <title>Send SMS to Multiple Recipients</title>
    <style>
        /* Styling the body element */
        body {
            font-family: Arial, sans-serif;
            font-size: 18px;
            line-height: 1.6;
            color: #333;
            text-align: center;
            margin-top: 50px;
        }
        
        /* Styles for the heading element */
        h1 {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        /* Styles for the paragraph element */
        p {
            font-size: 24px;
            margin-bottom: 30px;
        }
        
        /* Style the anchor tag */
        a {
            display: inline-block;
            padding: 20px 40px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 24px;
            transition: all 0.3s ease-in-out;
        }
        
        /* Hover styles for the anchor tag */
        a:hover {
            background-color: #0069d9;
            transform: scale(1.1);
        }
    </style>
</head>
  
<body>
    <h1>Send SMS to Multiple Recipients</h1>
    <p>Click the button below to send a text message to multiple numbers:</p>
      
    <!-- Anchor tag with href attribute that specifies the phone numbers -->
    <a href="sms:+919789971368,+12255678910,+919887744331">Send text messages</a>
</body>
  
</html>

結論

此程式的主要限制是它僅適用於預先安裝了簡訊應用程式的移動裝置。如果使用者使用的是桌上型電腦或筆記型電腦,則只有某些版本的瀏覽器和具有特殊內建簡訊應用程式的電腦才能支援開啟簡訊撰寫介面的按鈕。

還有其他方法可以建立開啟簡訊撰寫介面並填寫手機號的按鈕。其中一些方法包括:使用Javascript建立按鈕元素,然後新增事件監聽器,以便在點選按鈕時開啟簡訊撰寫視窗;使用第三方服務,例如Twilio、Plivo和Nexmo,但這些都需要建立一個帳戶並將它們的API整合到他們的網站或應用程式中才能執行簡訊撰寫功能。

更新於:2023年8月9日

2K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.