HTML SMS

When you visit a website, you may need to message customer support. It becomes convenient for you when you find the customer care contact on the webpage, and you can send a message directly from the webpage without copying the contact.

We can create an SMS link on a webpage so the user can directly and conveniently message customer support from the webpage.

When the user clicks on the SMS link, they are redirected to the default messaging app, from which they can send a message. In this article, we will discuss how to create an SMS link on a webpage.

Uses of HTML SMS

Feedback form: The SMS link permits users to provide feedback directly through messaging by clicking on it.
Product information: The SMS link is utilized to get information about the product by sending a message through the SMS link.
Website Engagement: The SMS link is utilized to get more engagement from the users.
Quick contact: The SMS link permits customers to quickly contact customer service by clicking on the SMS link.
Discounts: The SMS link directly opens the text message with a predefined code, allowing users to get the discount by clicking on the SMS link.

We can create an SMS link with the help of <a> href attribute.

Syntax:

The <a> is the opening hyperlink tag, and the </a> is the closing hyperlink tag. The "href" is the attribute utilized to define the destination of the link. The value SMS: (country-code)(number) is given to the href attribute for adding the contact number. The text which becomes the redirected link is written inside the opening and closing tags of the hyperlink.

We can create an SMS link for a single recipient or multiple recipients utilizing the <a> href attribute.

Demonstrations of the HTML SMS

We will comprehend the HTML SMS properly with the help of demonstrations.

Demonstration 1:

We will construct an SMS link for a single recipient utilizing the <a> href attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SMS link for a single recipient</title>
</head>
<body>
    <h2>SMS link for a single recipient</h2>
    <div>
        <a href="sms:+91987654321">Send a message</a>
    </div>
</body>
</html>

Output:

Here is the output below in which we can witness an SMS link for a single recipient.

Demonstration 2:

We will make an SMS link for multiple recipients utilizing the <a> href attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SMS link for multiple recipients</title>
</head>
<body>
    <h2>SMS link for multiple recipients</h2>
    <div>
        <a href="sms:+91987654321, +919988776655, +919998886665, , +919999888877">Send a message</a>
    </div>
</body>
</html>

Output:

Here is the output below, where we can witness an SMS link for multiple recipients.

Demonstration 3:

We will create an SMS link in the feedback form utilizing the <a> href attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SMS link in the feedback form</title>
</head>
<body>
    <h2>SMS link in the feedback form</h2>
    <div>
        <form>
            <label for="full-name">Full Name:</label>
            <input type="text" value="Write your full name"> <br> <br>
            <label for="email">Email id:</label>
            <input type="email" value="Write your email id"> <br> <br>
            <label for="message">Feedback:</label> <br> <br>
            <textarea name="" id="" cols="30" rows="2">Write your feedback</textarea>
             <br> <br>
            <a href="sms:+919887665443">Send a message directly</a> <br> <br>
            <input type="submit" name="" id="submit" value="Submit">
        </form>
    </div>
</body>
</html>

Output:

Here, in the output below, we can witness an SMS link inside the feedback form.

Demonstration 4:

We will construct an SMS link with the default message utilizing the <a> href attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SMS link with the default message</title>
</head>
<body>
    <h2>SMS link with the default message</h2>
    <div>
        <a href="sms:+918855664422?body=Hi%20there!%20I%20would%20like%20to%20get%20the%20information.">Send an SMS</a>
    </div>
</body>
</html>

Output:

Here, in the output below, we can witness an SMS link with the default message.

Demonstration 5:

We will construct an SMS link with the predefined code utilizing the <a> href attribute.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML SMS link with the predefined discount code</title>
</head>
<body>
    <h2>SMS link with the predefined discount code</h2>
    <div>
        <a href="sms:+917766554433?body=DISCOUNT50">Send an SMS</a>
    </div>
</body>
</html>

Output:

Here, in the output below, we can witness an SMS link with the predefined discount code.

Browsers Support

Following are the browsers which support <a> href attribute:

Microsoft Edge
Google Chrome
Opera
Firefox
Safari

Conclusion

We have understood the HTML SMS in this article. A few points to remember about HTML SMS are given below:

We can create an SMS link on the webpage and allow users to send a message directly.
We use <a> href attribute for constructing an SMS link.
We can construct an SMS link for a single recipient utilizing the <a> href attribute.
We can construct an SMS link for multiple recipients utilizing the <a> href attribute.
We can create a default message link or predefined code SMS link utilizing the <a> href attribute.