Verify trial flow telephone number field and improve field completion.

Problem

The telephone number field is not validating user input. It's possible to input everything in the field and submit the form without error. (Scree recording below). Screen_Recording_2021-03-16_at_04.13_PM

Proposed solution

Step 1: Change the input type

Change <input type="text"> to <input type="tel"> The tel type will not run a check to validate the phone number but can still significantly improve the experience by doing the following:

• If a user previously filled a form(on any website) with his phone number, the same phone number will be suggested in the field.
• For mobile users, this will automatically display the number keyboard (instead of the default letters+number keyboard).

Cross-browser compatibility is good, and this input type is widely supported by assistive technology.

Step 2: Verify field content

Telephone numbers are widely different across countries so we can not apply a specific pattern for numbers here. That being said, we can explore the following solution:

• Verify that the telephone number field does not contain letters.
• Run a check to see if the phone number is valid.

Step 3: Pre-fill phone number field based on country selected

We could consider moving the country field above the phone number in the form. We could then use the input data to start pre-filling the phone number field with the dialing code. Users should be able to edit this dialing code if needed. (Example below):

Before	After

Status

• Step 1
• Step 2
• Step 3