Categories
JavaScript

JavaScript for optimizers #20: Testing optimized phone fields

In this article, we will be testing optimized phone fields according to Baymard. It involves disabling auto-correction, getting the right keypad with numbers, and setting the right autocomplete.

Business case: Testing optimized phone fields

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that Baymard recommends optimizing the phone attributes, we expect that adding the correct ones will cause an increase in sales. We’ll measure this using conversion rate”.

To test this hypothesis, we’re going to apply the changes below:

We remove the autocorrect, get the right keypad for the phone field and add the right autocomplete.
We remove the autocorrect, get the right keypad and add the right autocomplete.

The code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action! Scroll all the way to the bottom for the correct input fields.

var phoneFields = document.querySelectorAll(".phone");
function fixPhoneFields(inputFields) {
  for (var i = 0; i < inputFields.length; i++) {
    inputFields[i].setAttribute("type", "tel");
    inputFields[i].setAttribute("inputmode", "tel");
    inputFields[i].setAttribute("autocomplete", "tel");
    inputFields[i].setAttribute("autocorrect", "off");
  }
}
fixPhoneFields(phoneFields);

Logic

var phoneFields = document.querySelectorAll(".phone");

We start by assigning the phone input field to the phoneFields variable. We select all the phone input fields on the page that contain the phone class.

function fixPhoneFields(inputFields) {

Then we declare a function that sets all the attributes we need. We will take an array that we call inputFields as the argument.

for (var i = 0; i < inputFields.length; i++) {

We create a loop that sets the attributes for every input field in the array.

inputFields[i].setAttribute("type", "tel");

Then we set the tel value to the type attribute. Any existing attribute values will be removed.

inputFields[i].setAttribute("inputmode", "tel");

After that, we set the tel value to the inputmode attribute. Any existing attribute values will be removed.

inputFields[i].setAttribute("autocomplete", "tel");

We set the tel value to the autocomplete attribute. Any existing attribute values will be removed.

inputFields[i].setAttribute("autocorrect", "off");

We set the off value to the autocorrect attribute. Any existing attributes will be removed.

}

Then we close the loop.

}

And close our function.

fixPhoneFields(phoneFields);

We call our function and input our assigned variable as the argument. The input field will now have the correct attributes.

New resource: How to win your first a/b test on a zero budget?

A zero budget conversion optimization process with Google Optimize and JavaScript.

Download now