Capturing phone numbers on your website

SMS marketing can be an effective strategy that allows brands to target customers on their most personal devices. In fact, SMS is one of the most reliable forms of communication, with up to a 98% delivery rate. Some researches also suggest that 90% of text messages are opened within three minutes of receiving them.

And it all starts by creating an effective way of collecting phone numbers on your website. Just like with email, you can choose one of many familiar formats most websites use today. Pop-ups, Interstitials, Inline, Slide-ins, or any other method will work as great as it does with email.

With Notificare, it is also pretty easy to achieve. All you need is a bit of HTML, CSS, and Javascript, and you can also capture phone numbers just like you do with email.

A bit of HTML

Just like with any web based form, you will be using a text input embedded in a form element. With Notificare, you will also be able to provide some other information like the language and region. We will even explore how you can also capture some preferences from your users. Let's take the following code into consideration:

<form method="post" id="mySubscribeForm">
  <h2 class="header">Subscribe to our mailing list</h2>

  <div class="form-group">
    <label for="phone">Phone Nr.</label>
    <input type="text" value="" name="phone">
  </div>

  <div class="response" id="feedbackText" style="display:none"></div>

  <input type="hidden" value="nl" name="language">
  <input type="hidden" value="NL" name="region">

  <input type="submit" value="Subscribe" name="subscribe" class="button">
</form>

A bit of CSS

If you are familiar with Cascade Style Sheets, you will also know that it's what you need to give your form the look and feel of your website. In most cases, you will already have these styles for other forms, and most likely, it looks more or less like this:

h2{
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

.response{
  font-family: Arial, sans-serif;
  font-size: 14px;
}

label{
  font-family: Arial, sans-serif;
  font-size: 16px;
}

input[type=button] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

A bit of Javascript

Finally, we will be making this all work using Javascript. This will allow us to handle the submission of the form and register the phone number in Notificare. Below we demonstrate how you can do this using plain javascript, of course, it will all depend on how your website is set up or which frameworks it uses.

document.getElementById("mySubscribeForm").addEventListener("submit", function(e) {
  e.preventDefault();

  var data;

  data['phone'] = document.getElementsByName('phone')[0];
  data['language'] = document.getElementsByName('language')[0];
  data['region'] = document.getElementsByName('region')[0];

  let headers = new window.Headers(),
      options = {
          credentials: 'include',
          method: 'POST',
          mode: 'cors'
      };

  headers.append('Accept', 'application/json');
  headers.append('Content-Type',  'application/json; charset=utf-8');
  headers.append("Authorization", "Basic " + btoa("{APP_KEY_HERE}:{APP_SECRET_HERE}"));
  options.headers = headers;
  options.body = JSON.stringify(data);

  fetch('https://push.notifica.re/sms/subscribe', options)
  .then((response) => {
      if (response.ok) {
          document.getElementById('feedbackText').innerHTML = 'Phone number registered successfully';
      } else {
          document.getElementById('feedbackText').innerHTML = 'Failed to register this phone number';
      }
  });

});

This would be the minimum required for you to collect a phone number. Notificare would handle the contact's registration and trigger the opt-in flow, which in this case, would mean sending a text message to the recipient with a link that, once clicked, would complete the registration.

Capturing Preferences

Although not mandatory, the last thing you want to do is irritate your customers with irrelevant texts they never asked for. That's called SPAM. To prevent that, you will want to also capture some preferences about which kind of messages they would like to receive. Something similar to what we use on our own website:

With Notificare, you can capture these preferences using Tags, which will allow you to categorize your contacts, and later on, use them to create targeted messaging campaigns.

Implementing Tags, would require a small addition to the example code above. For instance, in your HTML, you would want to add some checkboxes, each one used to capture a specific preference for a certain topic:

<label for="tag_updates">
    <input type="checkbox" name="tag_updates"> Send me all your product updates
</label>
<label for="tag_blog">
    <input type="checkbox" name="tag_blog"> Send me all your blog posts
</label>
<label for="tag_events">
    <input type="checkbox" name="tag_events"> Send me all your events
</label>

And in your Javascript, you would handle these checkboxes, as follows:

document.getElementById("mySubscribeForm").addEventListener("submit", function(e) {
  e.preventDefault();

  var data;

  data['phone'] = document.getElementsByName('phone')[0];
  data['language'] = document.getElementsByName('language')[0];
  data['region'] = document.getElementsByName('region')[0];

  var tags = [];
  if (document.getElementsByName('tag_updates')[0].checked){
    tags.push('tag_updates');
  }
  if (document.getElementsByName('tag_blog')[0].checked){
    tags.push('tag_blog');
  }
  if (document.getElementsByName('tag_events')[0].checked){
    tags.push('tag_events');
  }
  data['tags'] = tags.toString();

  ...more code

});

Step into SMS marketing today!

It's that easy, and you can start today building an engaged omni-channel audience, one that receives only the messaging campaigns they subscribe for. When done right, SMS marketing can be a powerful tool that can help you bring traffic back to your website, deliver extremely important communications, distribute promo codes and last-minute offers.

If you would like to see all this in action, don't hesitate and create a demo app today. As always, we are available via our Support Channel for any questions you might have.