如何使用 HTML 创建按钮打开短信撰写功能并发送至电话号码?

htmlweb developmentfront end technology更新于 2024/11/18 17:48:17

打开短信的按钮方便用户直接从我们的网站向电话号码发送短信，而无需先写下短信再发送。

借助 <a> 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

我们将创建一个按钮来打开短信撰写功能，以便向多个号码发送文本消息。

算法

创建一个 HTML 文件，其中包含必要的元素，包括 head、body、title、h1、p 和 a。
在 head 部分，添加所有必要的 CSS 样式来布局网页，包括字体样式、背景颜色和按钮图案。
在 body 部分，添加一个主标题和一段页面定义好的文本，以解释短信功能的用途。
创建一个锚标记，并将 href 函数设置为"sms:(countrycode)(number1), (countrycode)(number2), ..."，以指定需要保存短信的手机号码。
将文本上传到锚标记标签表示点击按钮将向所需的手机号码发送文本消息。

<!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 集成到网站或应用程序中才能运行短信撰写功能。