Hur man gör dina kontaktformulär Mobile Friendly
Med tanke på ökningen av mobilanvändningen år för år finns det nu ett ökat fokus på att göra webbplatser mer mottagliga, anpassningsbara och användarvänliga för besökare på små skärmar. Ett nyckelområde som ofta förbises och som lätt kan leda till en hög frustration är kontaktformuläret. Huruvida en användare loggar in på en webbplats, delvis genom en registreringsprocess eller i slutskedet av att slutföra en online-order, är bra användbarhet och en högkvalitativ upplevelse på mobilen avgörande för ett framgångsrikt resultat.
Många enkla HTML- och CSS-metoder gör dina kontaktformulär mer användarvänliga och eleganta för besökare på mobila enheter.
Stilformatingångar för enklare pekskontroll
Användning av beröringsvänlig CSS-styling för att skapa element kommer att göra ingångar, knappar och kontroller en mycket trevligare upplevelse för pekskärmsanvändare.
Formulärinmatningsfält kommer att gynnas av stora beröringsområden:
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {-webkit-utseende: ingen; -moz-appearance: none; display: block; margin: 0; width: 100%; höjd: 40px; linjehöjd: 40px; fontstorlek: 17px; gräns: 1px solid #bbb;}
Andra former av inmatningskontroll skulle också enkelt kunna dra nytta av anpassad CSS-styling:
Kryssrutorna drar nytta av att det blir lättare att trycka på:
input[type=checkbox] {width: 44px; height: 44px;-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;border: 1px solid #bbb;}
På samma sätt kan knappelementen stylas och ges särskild behandling:
button[type=submit] {-webkit-appearance: none; -moz-appearance: none;display: block;margin: 1.5em 0;font-size: 1em; line-height: 2.5em;color: #333;font-weight: bold;height: 2.5em; width: 100%;background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);border: 1px solid #bbb;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
Ännu mindre vanliga ingångstyper, till exempel raderare, kan dra nytta av ytterligare CSS-styling:
input[type=range] {width: 100%;}input [type = range] :: - webkit-slider-tumme {-webkit-utseende: ingen; bredd: 44px; höjd: 44px; bakgrund: #fdfdfd; bakgrund: -moz-linjär-gradient (topp, #fdfdfd 0%, #bebebe 100%); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, färgstopp (0%, # fdfdfd), färgstopp (100%, # bebebe)); bakgrund: -webkit-linjär-gradient (topp, #fdfdfd 0%, # bebebe 100%); bakgrund: -o-linjär-gradient (topp, #fdfdfd 0%, # bebebe 100%); bakgrund: -ms-linjär-gradient (topp, #fdfdfd 0%, # bebebe 100%); bakgrund: linjär gradient (till botten, #fdfdfd 0%, # bebebe 100%); kant: 1px solid #bbb; -webkit-gränsradio: 22px; -moz-gräns-radie: 22px; gränslinjen: 22px;}
Använd HTML5-ingångstyper för att utlösa rätt tangentbord
HTML5 erbjuder en rad olika typer av inmatningar för att hjälpa användarupplevelsen. Vissa webbläsare erbjuder nu flera inbyggda kontroller, beroende på vilken typ av inmatning som har valts. Detta är särskilt användbart för mobila webbläsare, av vilka vissa har olika tangentbord på skärmen för olika dataformer.
Så här visar de olika mjuka tangentborden på iPhone (iOS 6), beroende på den angivna ingångstypen:
Observera i dessa exempel att vi också specificerar platshållartekst, med hjälp av placeholder attribut. Detta gör att vi kan visa användaren ett exempel på vilken typ av data de förväntas komma in i ett visst fält.
Style-telefon-länk
Vissa mobila webbläsare försöker upptäcka telefonnummer på webbsidor och konvertera dem automatiskt till tappable links. Detta beteende är användbart för besökare, men auto-detektering är tyvärr inte alltid tillförlitlig, och webbläsare kommer av misstag att rikta in siffror som inte är faktiskt telefonnummer. Länkarna kan också vara svåra att trycka på, beroende på stilen som appliceras på dem.
Lyckligtvis kan detta auto-detekterade beteendet avaktiveras på både iOS- och Android-enheter genom att infoga följande element i del av webbsidan:
På så sätt kan du manuellt ange telefonlänkar på dina webbsidor, vilket ger dig mycket större kontroll över var de visas och hur de ser ut:
Tel:a[href^='tel:']:link, a[href^='tel:']:visited {color: #333;font-weight: bold;text-decoration: underline;}a [href ^ = 'tel:']: svävar, en [href ^ = 'tel:']: aktiv {text-decoration: none;}
Den enda nackdelen med den här handboken är att skrivbordsbesökare också kommer att kunna se dessa telefonlänkar, men kommer inte att kunna aktivera dem. En väg runt detta är att ansöka tel länka styling endast till små visningsportar, med hjälp av en CSS-mediafråga:
/* unstyled tel links as default */a[href^='tel:']:link, a[href^='tel:']:visited {color: #6f757c;font-weight: normal;text-decoration: none;} a [href ^ = 'tel:']: svävar, en [href ^ = 'tel:']: aktiv {färg: # 6f757c; textdekoration: none;} / * styled tel links för små visningar * / @ mediaskärm och (maxbredd: 600px) {a [href ^ = 'tel:']: länk, en [href ^ = 'tel:']: besökte {färg: # 333; vikt: fet; text-dekoration: understreck;} a [href ^ = 'tel:']: svävar, en [href ^ = 'tel:']: aktiv {färg: # 333; textdekoration: none;}}
Kontrollera automatisk korrigering och aktivering
iOS har i synnerhet en vana att automatiskt korrigera och kapitalisera formulärinmatningsdata. För vissa fälttyper är detta mycket användbart, men för andra kan det snabbt orsaka frustration. Till exempel blandar användarnamnen ofta bokstäver och siffror. Lyckligtvis tillåter iOS dig att kontrollera detta beteende med hjälp av autocorrect och autocapitalize attribut:
Det finns mer konfigurerbara alternativ för autocapitalize . Du kan också ställa in värdet till words , characters eller sentences , men tänk noga på var du tillämpar dessa attribut.
En anteckning om webbläsarsupport
Medan många av exemplen i denna artikel lyfter fram funktioner på iOS Safari, gäller vissa tips också för Android (beroende på webbläsareversion), liksom andra mobila webbläsare. Det bra med HTML5-formfunktioner är att de gradvis förbättras. Webbläsare som stöder en funktion kommer att dra nytta av det, medan icke-stödjande webbläsare i allmänhet bara ignorerar det.
Behöver mobila webbplatser mobilvänliga formulär? Vilka andra tips skulle du lägga till? Låt oss veta i kommentarerna.