Ett telefonnummerfält är bedrägligt enkelt. En textruta med etiketten "Telefon". Men så fort du öppnar formuläret för internationella användare eller ber om telefonnummer på mobilen blir det enkla fältet komplicerat. Olika länder formaterar nummer olika. Olika tangentbord behöver visas. Internationella uppringare tänker i landskoder. Ditt formulär måste hantera allt det, annars försämras datakvaliteten. Ett starkt telefonfält fungerar överallt och leder användarna mot rätt format, inte emot det.
Ta vilket formulär med hög konvertering som helst som samlar in telefonnummer. Titta på hur det hanterar fältet. De flesta behandlar det som vilket textfält som helst och utgår från att användarna skriver i det format de tror är rätt. Sedan kommer datan in i kaos. Vissa nummer har bindestreck. Vissa har parenteser. Vissa har mellanslag. Vissa hoppar över formatering helt. Din databas innehåller samma telefonnummer i fem olika format. När du behöver ringa någon kan ditt system inte se att 5551234567 och (555) 123-4567 är samma nummer. Datan är tekniskt insamlad men fungerar inte.
Lösningen är inte att acceptera kaoset och normalisera det senare. Lösningen är att leda användarna mot ett korrekt format medan de skriver. Det sker med inmatningsmasker, smarta förval och validering som hjälper i stället för att blockera.
Därför behöver telefonfält hanteras annorlunda än textfält
Ett telefonnummer är data med internationella regler. En e-postadress är i princip universell. Ett namn kan vara vad någon vill. Men ett telefonnummer har en struktur som definieras av Internationella teleunionen (ITU). Olika länder använder olika längder, prefix och formateringsstandarder. Ett giltigt telefonnummer i Japan ser inte alls ut som ett giltigt nummer i Frankrike. Ditt fält måste förstå det, annars avvisar det bra nummer och godtar dåliga.
Dessutom tänker användare på telefonnummer i sitt eget lands format. Någon i London tänker i brittiskt format. Någon i Berlin tänker i tyskt format. När du tvingar dem in i amerikanskt format blir de förvirrade. De gör fel. De överger formuläret. Friktionen kommer av glappet mellan vad fältet förväntar sig och vad användaren försöker ge dig.
Ett fält eller delade fält
Vissa formulär delar upp telefonnumret i separata fält. Riktnummer i en ruta. Växel i en annan. Abonnentnummer i en tredje. Det fungerar utmärkt för amerikanska telefonnummer, där strukturen är förutsägbar. Överallt annars fungerar det inte. En användare i Tyskland kan inte få in sitt nummer i tre amerikanska rutor. Det kan inte heller en användare i Australien eller Frankrike. Delade fält försämrar också mobilupplevelsen eftersom användare måste trycka mellan fälten i stället för att skriva i ett svep. Användbarhetstester visar att många har svårt att navigera mellan separata fält på telefoner.
Ett enda fält är bättre. En lång inmatningsruta. Ett ställe att skriva hela numret. Fältet styr formatet med inmatningsmask, inte genom uppdelning. Det fungerar lika bra för nationella och internationella nummer. Mobilanvändare skriver en gång och är klara.
Så gör inmatningsmasker kaos till ordning
En inmatningsmask formaterar numret automatiskt medan någon skriver. Hen skriver 5 5 5 1 2 3 4 5 6 7 och fältet visar (555) 123-4567. Hen skriver långsamt eller snabbt, formateringen följer med. Det tjänar två syften. Först ger det återkoppling i realtid om att hen skriver i rätt format. Sedan hindrar det hen från att skriva fel format över huvud taget. Hen kan inte skriva ett tecken som bryter formatet. Fältet tar inte emot det.
Formatet som visas beror på valt land. Om hen väljer USA är masken (XXX) XXX-XXXX. Om hen väljer Kanada är den densamma. Om hen väljer Tyskland anpassas masken. Användaren ser ett format hen känner igen. Hen skriver i det. Datan kommer in ren hos dig.
Forskning visar att 89 procent av användarna skriver ett telefonnummer i det format de själva väljer, även när det finns tips. Inmatningsmasker tar bort det problemet helt. Du tipsar inte om formatet. Du tvingar fram det visuellt medan hen skriver.
Landskod och internationellt stöd
I samma stund som du går internationellt behöver du en landsväljare. En rullgardinslista som visar landsnamn med flaggikoner. Användaren väljer sitt land. Fältet uppdaterar sin inmatningsmask. Landskoden visas automatiskt.
Två designbeslut spelar roll här. Först, sätt ett smart förval. Om de flesta av dina användare finns i USA, förvälj USA. Har du en global publik kan du förvälja användarens faktiska plats med hjälp av platsdata. Någon i Frankrike ska inte behöva scrolla förbi 20 länder för att hitta Frankrike. Sedan, låt landsväljaren vara synlig och lätt att ändra. En användare kan välja fel land av misstag. Hen ska kunna byta med ett tryck, inte leta efter en undangömd rullgardinslista.
Landskoden ska visas bredvid numret. Användaren ser +1 (555) 123-4567, inte bara (555) 123-4567. Det gör formatet entydigt. Hen vet att det är ett amerikanskt nummer från prefixet +1. Om hen gjorde fel och valde fel land ser hen det direkt och kan byta.
En sak till: när användaren byter land, behåll numret hen redan skrivit. Töm inte fältet. Återställ inte allt. Om hen skrev 5551234567 och sedan insåg att hen valt fel land, låt hen byta landskod och behålla siffrorna. Hen ska inte behöva börja om.
Mobila tangentbord och attributet type="tel"
På en telefon spelar tangentbordet roll. Visa e-posttangentbordet för ett e-postfält. Visa sifferknappsatsen för ett telefonnummer. Det är inte bara bekvämt. En liten skillnad i tangentbordets layout förebygger fel. Någon som tittar på en sifferknappsats påminns om att hen skriver ett nummer, inte text. Layouten gör det svårare att råka skriva bokstäver.
Använd type="tel" i HTML för att automatiskt visa sifferknappsatsen. Alla telefoner visar inte samma tangentbord. Vissa visar 0-9 plus symboler. Vissa visar bara siffror. Vissa visar bokstäver tillsammans med siffror. Beteendet varierar mellan enheter. Men varje telefon visar något mer hjälpsamt än hela QWERTY-tangentbordet.
Utöver valet av tangentbord är mobilskärmar små. Gör inmatningsfältet stort. Tumstora knappar längst ned. Fält i full bredd. Ingen horisontell scrollning. Ett nummer som är svårt att trycka på är ett nummer som inte blir rätt skrivet.
Vilka valideringsstrategier som faktiskt fungerar
Validering kontrollerar om numret är äkta. Äkta betyder att det följer formatreglerna för valt land och har rätt antal siffror. Olika länder har olika antal siffror. Ett amerikanskt nummer har 10 siffror efter landskoden. Ett tyskt nummer har 6 till 11 siffror beroende på region. Din validering måste känna till de här reglerna.
Det bästa sättet att validera telefonnummer är standarden E.164. Det är det internationella format som ITU har definierat och som alla globala system förstår. E.164-format är ett plustecken, landskod och sedan det nationella numret. Inga mellanslag, inga parenteser, inga bindestreck. +14155550123 för ett amerikanskt nummer. Det är det som lagras i din databas. Det användaren ser och skriver är formaterat för läsbarhet. Det som lagras är E.164 för konsekvens och noggrannhet.
Kör validering på två ställen. Först, validera i webbläsaren medan användaren skriver. Validering i realtid. Hen ser en bockmarkering när numret är komplett och giltigt. Hen ser ett meddelande när något saknas. Sedan, validera på din server efter inskick. Validering på klientsidan gör upplevelsen smidig. Validering på serversidan skyddar din data om någon stänger av webbläsarens kontroller eller skickar dålig data via ett API.
Misstaget att be om bekräftelse av telefonnumret
Vissa formulär ber om telefonnummer och sedan om bekräftelse av det. Skriv ditt nummer. Skriv det igen för att bekräfta. Det fördubblar friktionen. Någon måste skriva ett nummer med 10 siffror rätt och sedan skriva det rätt igen. De flesta gör ett skrivfel i ett av de två försöken. Då kör de fast. De två numren stämmer inte överens. Hen måste rätta båda fälten för att komma vidare.
Ett bättre sätt är att validera numret i realtid medan hen skriver. När hen når skickaknappen är numret redan validerat. Du behöver inte att hen skriver det två gånger. Själva valideringen är bekräftelsen.
Vanliga misstag som försämrar kvaliteten på telefondata
Att godta vilket telefonnummer som helst utan att kontrollera landet
Ett formulär godtar ett nummer med 7 siffror och ett med 15 siffror utan att veta vilket land något av dem kommer från. Båda lagras som giltiga. Senare försöker du ringa någon och inget av numren fungerar. Validera alltid utifrån valt land. Ett nummer med 7 siffror kan vara giltigt i vissa europeiska länder. Ett nummer med 10 siffror är standard i USA men fel överallt annars. Landssammanhanget spelar roll för varje valideringsregel.
Att visa valideringsfel först efter inskick
Om du väntar tills någon klickar på skicka för att tala om att telefonnumret är ofullständigt eller ogiltigt har du skapat friktion. Hen klickar på skicka. Ser ett fel. Rättar numret. Skickar igen. Validering i realtid förebygger det. I samma stund som hen skrivit klart numret vet hen om det är giltigt. När det är dags att skicka ska det inte finnas några överraskningar.
Att gömma landsväljaren på en förvirrande plats
Landskoden är ingen eftertanke. Gör den tydlig. En stor rullgardinslista högst upp i telefonfältet, inte begravd under tre andra rullgardinslistor. Användaren behöver se den och kunna ändra den lätt. Om hen väljer fel land ska hen märka det direkt av att formatet i fältet ändras.
Att inte förklara varför du behöver telefonnumret
Forskning visar att 14 procent av användarna överger kassan om ett telefonfält är obligatoriskt utan förklaring. Tester visar också att användare stannar om du helt enkelt berättar varför du behöver det. Lägg till en mening hjälptext. "Vi använder det för att bekräfta din beställning" eller "Så når vi dig om det uppstår frågor." Lite sammanhang förebygger avhopp.
Att använda formatering som bara fungerar i ett land
Om du formaterar alla nummer som (XXX) XXX-XXXX har du låst dig till amerikanska nummer. Det formatet betyder ingenting i Tyskland eller Japan. Använd antingen E.164 för lagring och en landsanpassad mask för inmatning, eller låt formatet anpassas efter valt land. Utgå inte från att ett format fungerar överallt.
Integritet och det valfria telefonfältet
Telefonnummer är personuppgifter. I många jurisdiktioner utlöser insamlingen av dem integritetsregler. Användare är allt mer skyddande med sina telefonnummer eftersom de leder till spamsamtal. Vissa formulär samlar in telefonnummer av vana, inte av verkligt behov. Om du inte faktiskt behöver ett telefonnummer, fråga inte efter det. Om du behöver det, förklara varför.
Gör fältet valfritt om möjligt. Obligatoriska fält skapar friktion. Valfria fält minskar avhoppen. Om telefonkontakt är viktig men inte absolut nödvändig för ditt arbetsflöde, markera fältet som valfritt och förklara nyttan. "Lägg till ditt telefonnummer så kan vi skicka orderuppdateringar via sms" ger en anledning att fylla i det även om det inte är obligatoriskt.
Så hanterar WEMASY telefonnummerfält
WEMASY:s formulärbyggare har telefonnummerfält med inbyggt internationellt stöd. Skapa ett telefonfält och välj om det är lokalt eller internationellt. För lokalt anger du ditt land. För internationellt ser användarna en rullgardinslista med länder och flaggikoner. Fältet visar automatiskt rätt inmatningsmask utifrån valt land. Medan hen skriver formateras fältet automatiskt. (555) 123-4567 visas utan att hen skriver parenteser och bindestreck. Validering i realtid bekräftar att numret är komplett och giltigt för valt land. På mobilen visas sifferknappsatsen. Fältet fungerar på alla enheter. Se dina telefonnummerdata i formulärens analys och upptäck mönster i vilket format användarna försöker skriva. När datan kommer in i ditt CRM-system är alla nummer i E.164-format. De är konsekventa. De fungerar med uppringningssystem. Din uppföljning når rätt person.