Den skicka-knapp som presterar sämst i de flesta studier är alltid densamma. Den har ingen egen färg. Den smälter in i sidan. Texten är ett enda ord. Och den fungerar pålitligt på varje webbplats som vill ha färre konverteringar.
Den knappen säger "Skicka."
Inte alla besökare som når din knapp är redo att klicka på den. Vissa funderar fortfarande. Vissa är nervösa. Vissa letar efter en försäkran om att det är värt tiden att fylla i formuläret. Knappen är ofta det sista intrycket som avgör om de fullföljer. En generisk text på ett ord lämnar åt dem att fylla i den försäkran själva. En genomtänkt knapp med konkret text tar bort tvivlet.
Det här kapitlet går igenom vad knapptext, färg och placering faktiskt ändrar för andelen som skickar formulär, hur formulärets sammanhang påverkar vilken knapptext som fungerar och hur du undviker design- och textmönster som förstör konverteringen utan att du märker det.
Vad knapptexten faktiskt påverkar i konverteringen
Forskning om knappar med uppmaning visar tydliga mönster. Generiska knappar som "Skicka" presterar 30 till 40 procent sämre än handlingsspecifik text. En knapp som säger "Få mitt kostnadsfria förslag" konverterar bättre än en som säger "Skicka". En knapp som säger "Bekräfta min anmälan" fungerar bättre än "Skicka". Men det handlar inte om att vara kreativ med texten. Det handlar om att vara tydlig med utfallet.
När en besökare håller markören över en knapp med texten "Skicka" besvarar hen en outtalad fråga. Vad skickar jag? Vart går det? Vad händer sedan? Hen har inte svaret. Hen gissar. Generisk knapptext skapar friktion eftersom besökaren måste dra slutsatser om vad som kommer härnäst.
Konkret, handlingsinriktad knapptext besvarar frågan direkt. "Få mitt kostnadsfria förslag" visar besökaren exakt vad som händer vid klicket. "Bekräfta min anmälan" förklarar nästa steg. "Boka en demo" gör det tydligt att hen inleder ett samtal och inte förbinder sig till något okänt.
Mönstret gäller över formulärtyper och branscher. I en studie av ett forskningsinstitut inom användbarhet av kassaformulär presterade "Slutför beställning" 25 procent bättre än "Skicka" i konverteringsgrad. I ett test av kontaktformulär med ett marknadsföringsverktyg slog "Skicka min förfrågan" "Skicka" med 18 procent. I en analys av konverteringstester på 50 e-handelssajter presterade knappar som innehöll en nytta eller ett nästa steg i genomsnitt 23 procent bättre än handlingar på ett ord.
Förbättringen är inte liten. Det här är ingen optimering på 2 procent. Det är att höja andelen som skickar formuläret från 15 procent till 19 procent. Eller från 300 inskick i månaden till 370. Knapptext är en av de ändringar i ett formulär som ger störst effekt.
Knapptext efter formulärtyp
Samma uppmaning fungerar inte i alla formulär. Sammanhanget kring varför någon fyller i ett formulär avgör vilken knapptext hen reagerar på.
Registrerings- och anmälningsformulär
När någon skapar ett konto förbinder hen sig till något. Beslutet är oftast fattat. Hen frågar inte längre "ska jag?". Hen frågar "kommer det här att fungera?" och "är det säkert?". Knapptexten för registrering bör bekräfta handlingen och ge trygghet.
Effektiva mönster: "Skapa mitt konto", "Nu kör vi", "Bekräfta min anmälan". Undvik generiskt "Skicka". Undvik texter som känns permanenta eller tunga, som "Förbind dig till kontoskapande". Håll tonen lätt och framåtriktad.
För registreringar med lösenord kan knapptexten erkänna friktionen: "Skapa lösenord och fortsätt". Det visar besökaren att hen inte skapar ett lösenord utan anledning. Det är ett steg mot något. Handlingen är tydlig.
Kontakt- och förfrågningsformulär
Kontaktformulär tjänar på en vardaglig, mänsklig knapptext. Besökaren tar kontakt. Hen ber om något. Knappen ska låta som att du bekräftar den förfrågan.
Effektiva mönster: "Skicka min förfrågan", "Hör av dig", "Skicka mitt meddelande", "Be om mer information". De får formuläret att kännas som ett samtal, inte en datadump.
Undvik kliniskt eller formellt språk. Skriv inte "Lämna in förfrågan". Skriv "Skicka min förfrågan". Skillnaden är subtil. Det ena känns som en transaktion. Det andra känns som att prata med en människa.
Boknings- och tidsbokningsformulär
När någon fyller i ett bokningsformulär är avsikten redan bekräftad. Hen vill ha tiden. Knapptexten ska vara direkt och ta bort tvivel om vad som händer härnäst.
Effektiva mönster: "Bekräfta min tid", "Boka min session", "Boka mitt samtal", "Reservera min plats". De erkänner att personen redan har bestämt sig. Knappen är det sista bekräftelsesteget.
Undvik allt som skapar otydlighet. "Reservera" fungerar. "Anmäl dig" ger mindre tydlighet om vad som reserveras. Tydlighet i det här skedet ökar andelen som slutför.
Kassa- och betalningsformulär
Kassan i e-handel har mest att förlora på vag knapptext. Varje ord här påverkar intäkterna direkt. Besökaren är redo att köpa. Skapa ingen tvekan.
Effektiva mönster: "Slutför mitt köp", "Betala nu", "Slutför beställningen", "Köp nu". Vissa butiker testar nyttoinriktad text som "Få min [produktnamn]" för att förstärka vad kunden får, inte vad hen betalar.
Använd aldrig generiskt "Skicka". Testa om "Slutför mitt köp" eller "Köp nu" fungerar bäst för din målgrupp. Vissa branscher och prisnivåer svarar på olika språk. Men båda slår generisk text.
Feedback- och enkätformulär
Knappar i enkäter ska kännas snabba och enkla. Besökaren gör dig en tjänst. Knapptexten ska erkänna det och få det att kännas friktionsfritt.
Effektiva mönster: "Skicka min feedback", "Skicka mitt svar", "Dela mina tankar". De känns snabba. Undvik språk som får feedback att kännas som en formell inlämning. "Skicka min feedback" känns lättare än "Lämna in enkät".
Leadkvalificering och B2B-formulär
B2B-formulär kräver ofta mer information eftersom de sållar leads. Knapptexten kan visa vad som kommer härnäst utan att verka avskräckande.
Effektiva mönster: "Be om ett förslag", "Boka en rådgivning", "Starta min kostnadsfria provperiod", "Få en skräddarsydd offert". De gör tydligt vad nästa steg är. Besökaren oroar sig inte för att förbinda sig till något vagt.
Knappdesign påverkar klickandet mer än de flesta tror
Knapptexten är bara en del av bilden. Hur knappen ser ut och var den sitter på sidan avgör om någon över huvud taget uppfattar den som klickbar.
Färgkontrast och synlighet
En knapp som smälter in i sidans bakgrund får färre klick än en med hög kontrast. Det handlar inte om flashig design. Det handlar om att knappen ska gå att hitta. Om en knapp inte syns tydligt mot formuläret kan besökaren missa den helt.
Effektiva knappar har en färgkontrast på minst 4,5 till 1 mot bakgrunden. Praktiskt betyder det att knappfärgen ska vara märkbart annorlunda än sidans bakgrund och än andra formulärelement.
Testa vad som fungerar för ditt varumärke. Vissa varumärken använder en varumärkesfärg som naturligt sticker ut. Andra använder varma färger som orange eller rött mot kalla bakgrunder som grått eller vitt. Den exakta färgen spelar mindre roll än kontrasten. Se till att knappen går att hitta.
Storlek och luft
Knappar som är för små känns inte klickbara. Knappar som är för stora känns påträngande. Rätt storlek är relativ till formuläret och sidan. En knapp som tar upp halva formulärbredden känns aggressiv. En knapp som är 150 pixlar bred i ett kontaktformulär i full bredd känns lagom.
Luft runt knappen ökar andelen klick. En knapp som omges av andra formulärelement smälter in. En knapp med fritt utrymme runt sig sticker ut och känns klickbar. Lägg till marginal ovanför och under knappen. Låt den andas.
Knappens form och stil
Rundade hörn känns modernare och vänligare. Skarpa hörn känns mer företagsmässiga eller tekniska. Ingen är universellt bättre. Testa vilken stil som passar ditt varumärke och din målgrupp.
Fyllda knappar med tydlig bakgrund presterar bättre än konturknappar eller genomskinliga knappar i de flesta formulär. En konturknapp som matchar formulärets stil smälter in. En fylld knapp med kontrast sticker ut.
Skuggor och hovringseffekter förstärker känslan av att något är klickbart. En knapp som byter färg eller har ett synligt hovringsläge visar besökaren att den reagerar på interaktion.
Knappstorlek på mobil
Mobilanvändare trycker med tummen. En knapp som är för liten får missade tryck. Riktlinjerna från en av de stora mobilplattformarna rekommenderar en minsta tryckyta på 44 gånger 44 pixlar. Androids riktlinjer rekommenderar 48 gånger 48 pixlar. Formulär på mobil bör ha knappar som är tillräckligt stora för att en tumstor yta ska träffa pålitligt.
På mobil staplas knappar ofta vertikalt. En knapp i full bredd känns mer klickbar än en som bara syns delvis. En fast knapp som förblir synlig medan man scrollar genom formuläret ökar andelen som slutför på mobil.
Placeringen avgör vem som ser knappen
Den bästa knapptexten och designen hjälper inte om folk scrollar förbi utan att märka den. Var knappen sitter på sidan påverkar synligheten.
Knappar ovanför vikningen
Helst bör den primära knappen synas utan scrollning på dator. Om formuläret tar upp det mesta av skärmen kan man behöva scrolla till knappen. Det går inte att undvika. Men om det finns utrymme ovanför vikningen, placera knappen där så att besökaren inte behöver leta.
Fasta knappar på mobil
Formulär på mobil kräver ofta scrollning. En fast knapp som förblir synlig längst ner på skärmen ökar andelen som slutför. Besökaren tappar aldrig knappen ur sikte medan hen fyller i fälten. Hen kan slutföra när som helst utan att scrolla till botten.
Primära och sekundära knappar
Vissa formulär har flera knappar. "Skicka", "Spara som utkast", "Nästa steg". När du har flera knappar, gör den primära handlingen visuellt dominerande. En stark primär knapp ska tydligt vara mer klickbar än de sekundära alternativen. Använd färg, storlek eller position för att visa hierarkin.
Ett vanligt misstag är att göra primära och sekundära knappar identiska. Om "Avbryt" och "Skicka" har samma storlek och färg klickar vissa besökare fel. Designer har testat detta och funnit att en primär knapp som är 30 till 40 procent större än de sekundära minskar oavsiktliga avbrott.
Text under knappen ökar andelen som slutför
Själva knappen är bara den sista interaktionen. Text under eller nära knappen ger en sista försäkran som knuffar tveksamma besökare att klicka.
Trygghetstexten möter den sista invändningen. Om formuläret frågar efter en e-postadress tar en rad under knappen med "Vi delar aldrig din information" bort det sista skälet att inte skicka. Om formuläret kräver ett telefonnummer bygger "Inga reklamsamtal, vi kontaktar dig inom en arbetsdag" förtroende.
Den här trygghetstexten ska vara liten och underordnad. Du säljer inte längre. Du besvarar det sista tvivlet. Exempel: "Vi återkommer inom 24 timmar", "Dina uppgifter är alltid skyddade", "Inget kreditkort krävs för att starta din kostnadsfria provperiod", "Din integritet är vår prioritet".
Tester visar att trygghetstext under knappar ökar andelen som slutför med 3 till 5 procent i formulär med hög friktion. I formulär med låg friktion, som nyhetsbrev, är effekten mindre. I B2B-formulär som frågar efter mycket information kan trygghetstext öka andelen som slutför med 10 procent eller mer.
Felmeddelanden och laddningsfeedback
Vad som händer efter att någon klickat på knappen avgör om hen känner sig säker på sitt inskick.
Inaktiverat läge under inskick
När någon har klickat på knappen, inaktivera den direkt. En inaktiverad knapp förhindrar dubbla inskick. Ännu viktigare är att den visar besökaren att klicket registrerades. Knappen bör visa ett laddningsläge: "Skickar..." eller en snurra eller animerad text.
Utan laddningsläge vet besökaren inte om klicket fungerade. Hen kanske klickar igen. Hen kanske stänger webbläsaren. En sekunds fördröjning mellan klick och någon respons känns lång för en användare. Visa direkt att något pågår.
Text vid felhantering
När ett formulärinskick misslyckas ska knappen och texten runt den förklara vad som gick fel och vad hen ska göra härnäst. Visa inte bara ett felmeddelande högst upp i formuläret. Uppdatera själva knappen.
En knapp som säger "Försök igen" är mer användbar än "Skicka" när ett fel uppstår. Texten bredvid knappen ska förklara exakt vad som misslyckades: "Den här e-postadressen är redan registrerad" eller "Fyll i alla obligatoriska fält."
Gör felhanteringen tydlig. Vissa formulär markerar det fält som har problem. Vissa visar felmeddelanden på raden. Vissa gör båda. Ju tydligare felet är, desto snabbare kan besökaren rätta det.
WEMASY-formulär och optimering av skicka-knappen
WEMASY:s formulärbyggare låter dig anpassa knapptext, design och placering efter din formulärstrategi. Du kan ställa in olika knapptext för olika typer av formulär. Du kan lägga till villkorsstyrd logik som ändrar knapptexten utifrån svaren i formuläret. Du kan anpassa knappens färger, storlek och stil så att de passar ditt varumärke.
Formulärstatistik visar vilka fält som orsakar avhopp. Om just din knapp har höga avhopp är det ett tecken på att knapptext eller design behöver testas. Om besökare når knappen men inte klickar, testa olika texter och designer utan att bygga om formuläret.
Se hur WEMASY:s formulärbyggare hanterar anpassning av knappar och formulärstatistik. Läs mer om formulärtexter som ger fler ifyllda formulär i hur du skriver formuläretiketter och hjälptexter som fungerar och vad som orsakar övergivna formulär och hur du förebygger det.