13 bästa metoder för design av kontaktsidesformulär (med exempel)

Vet du vad vi brukade göra när vi först startade WPBeginner? Bara slänga på ett grundläggande kontaktformulär på en sida och kalla det bra.

Men här är det intressanta: efter att ha analyserat tusentals webbplatser genom vårt arbete på WPBeginner, upptäckte vi något banbrytande. Ett väldesignat kontaktformulär kan göra en enorm skillnad i hur många leads du faktiskt får.

Kontaktformulär är ofta den första verkliga konversationen mellan dig och dina potentiella kunder. När du lyckas med WordPress-designen får du bättre leads och starkare kundrelationer. Men om du misslyckas kan du lika gärna visa besökarna utgångsdörren.

Därför har vi sammanställt den här guiden fylld med bästa praxis för design av kontaktsidor och verkliga exempel som du kan använda direkt. Vi är glada att visa dig exakt hur du bygger kontaktformulär som inte bara ser bra ut – de ger faktiskt resultat.

Varför är en effektiv kontaktsida så viktig?

En kontaktsidesida är ett måste för alla webbplatser. Oavsett om du driver en personlig blogg eller en företagswebbplats, hjälper en kontaktsidesida användare att nå dig när som helst under besöket på din webbplats.

Till skillnad från sociala medier tillåter ett kontaktformulär användare att kommunicera med dig privat, vilket bygger förtroende och kan leda till försäljning.

Många webbplatsägare ägnar ofta inte mycket uppmärksamhet åt sin kontaktsida. De flesta lägger bara till ett kontaktformulär och glömmer sedan bort det. Eller ännu värre, de visar bara sina kontaktuppgifter och förväntar sig att folk ska agera.

Om du inte får tillräckligt med leads från din webbplats kontaktsida, fortsätt då att läsa. Vi kommer att visa dig hur du optimerar din kontaktsida för konverteringar.

Hur man skapar en sida med kontaktformulär i WordPress 💡

WordPress levereras inte med en inbyggd kontaktside. Du behöver ett kontaktformulärsplugin för att skapa ett formulär och sedan lägga till det på din kontaktsida.

Vi rekommenderar att använda WPForms. Vårt team skapade det för att vara det mest nybörjarvänliga kontaktformulärpluginet för WordPress. Dessutom är gratisversionen av WPForms tillgänglig i den officiella WordPress.org plugin-katalogen.

För fullständiga steg-för-steg-instruktioner, se vår guide om hur man skapar ett kontaktformulär i WordPress och vår fullständiga WPForms-recension.

Nu när du har skapat ett kontaktformulär, här är en snabb titt på några bästa metoder för design av kontaktsidor som kan hjälpa dig att öka dina konverteringar:

1. Se till att ditt kontaktformulär fungerar
2. Undvik onödiga fält i kontaktformuläret
3. Förklara varför användare bör kontakta dig
4. Erbjud alternativa sätt att kontakta dig
5. Lägg till profiler för sociala medier
6. Ange adress och karta
7. Skapa en FAQ-sektion och länka till resurser
8. Optimera din bekräftelsesida för formuläret
9. Be användare att gå med i din e-postlista
10. Använd foton av ditt team
11. Gör din kontaktside engagerande
12. Var kreativ med din kontaktdesign
13. Se till att minska formulärabstinens
14. Frequently Asked Questions About Contact Page Design

Redo? Nu kör vi!

1. Se till att ditt kontaktformulär fungerar

WordPress-värdar har ofta en dåligt konfigurerad e-postfunktion som hindrar e-post från kontaktformulär från att nå inkorgen. Istället hamnar de ofta i skräppostmappen eller kommer inte fram alls.

Om du använder proffsversionen av WPForms, kan du fortfarande se formulärinlägg i ditt WordPress-adminområde. Men med ett gratis plugin kanske du inte ens vet att ditt formulär inte fungerar.

Efter att ha lagt till ett kontaktformulär på din WordPress-webbplats är det viktigt att testa det genom att skicka in ett formulär.

Efter att ha lagt till ett kontaktformulär på din WordPress-webbplats är det viktigt att testa det genom att skicka in ett formulär.

När du testar ditt formulär, här är några viktiga saker att kontrollera:

• Är adressen 'Från' och ämnesraden vettiga?
• Gick e-postmeddelandet till din inkorg istället för skräppostmappen?
• Fick du e-postaviseringen?

Att verifiera dessa detaljer hjälper dig att bekräfta att ditt formulär fungerar korrekt.

Till exempel, om du inte får e-postaviseringar, kan du följa vår guide om att fixa problemet med att WordPress inte skickar e-post.

Dessutom kanske du vill bekanta dig med formulärfel så att du vet bästa sättet att felsöka dem.

Ibland skickas inte formulärsaviseringar på grund av problem med plugin eller SMTP-inställningar. Valideringsfel kan uppstå när formulärsfält är felkonfigurerade, och du kan också hantera skräppost även med åtgärder mot skräppost på plats.

För mer information kan du hänvisa till vår guide om vad du ska göra när ditt WordPress-formulär inte fungerar.

2. Undvik onödiga fält i kontaktformuläret

Du kan lägga till många fält i ditt kontaktformulär, men varje extra fält tar längre tid att fylla i.

Därför rekommenderar vi att du håller fälten i ditt kontaktformulär till ett minimum och bara lägger till de som hjälper dig att förstå användarens fråga.

(Källa: Neil Patel)

Om du behöver ett längre formulär, kanske du vill kolla in det sista tipset i slutet av den här artikeln för att minska formulärabstinens.

3. Förklara varför användare bör kontakta dig

Din kontaktside bör kännas inbjudande. Du kan börja med en hälsning och ett välkomstmeddelande för att göra den artig och hjälpsam.

Sedan kan du också berätta för användarna vilka typer av frågor du kan hjälpa till med, som i exemplet nedan:

(Källa: Michael Hyatt)

Om du har olika sidor för olika avdelningar är det mycket hjälpsamt att dirigera användare till rätt sida.

Till exempel kan du skicka befintliga kunder till support och gästbloggare till ett "skriv för oss"-formulär.

(Källa: OptinMonster)

4. Erbjud flera kontaktmetoder

Att lägga till ett formulär på din kontaktsida gör det enkelt för användare att skicka ett meddelande till dig. Att erbjuda andra kontaktalternativ kan dock hjälpa användare att välja vad som fungerar bäst för dem.

Livechatt och chatbots är utmärkta alternativ för att ge omedelbara svar på användarnas frågor, vilket ökar engagemanget och tillfredsställelsen. Dessa funktioner kan effektivt hantera vanliga frågor och eskalera mer komplexa problem till en mänsklig representant.

Om du vill lägga till livechatt eller en chatbot på din WordPress-webbplats kan du hänvisa till vår guide om hur du lägger till gratis livechatt i WordPress.

Förutom formuläret och livechatt kan du inkludera din företags-e-postadress, WhatsApp eller telefonnummer som alternativa kontaktmetoder.

Till exempel erbjuder Accentures kontaktsida användare flera sätt att komma i kontakt. Den har telefonnummer för snabba svar på brådskande frågor.

Dessutom låter rullgardinsmenyn dig hitta kontaktformulär och e-postadresser för olika behov.

Om du till exempel expanderar menyn 'Nyhetsmedia/branschanalytiker' hittar du representanternas e-postadresser. Denna uppsättning gör det enkelt att välja det bästa sättet att nå rätt avdelning eller tjänst.

(Källa: Accenture)

5. Lägg till profiler för sociala medier

Medan de flesta användare vill kontakta dig privat, kanske vissa föredrar att ta kontakt på Facebook eller Twitter.

Så du kan lägga till knappar för sociala medier på din kontaktsidesida som ett alternativt sätt för användare att kontakta dig.

(Källa: Retro Portfolio)

6. Ange adress och karta

Att lägga till en adress och fysisk plats för ditt företag (ännu bättre, bädda in en Google Maps-karta) hjälper till att öka användarnas förtroende. Det visar att du har en fysisk närvaro, vilket kan få ditt företag att verka mer pålitligt.

Även om du inte har en fysisk butik eller ett kontor, känner sig användarna trygga när de vet var du finns.

(Källa: LEDbow)

Om du har flera platser i olika städer eller länder, gör det mer användbart att lägga till dem alla på din kontaktsidesformulär.

(Källa: The Chase)

7. Skapa en FAQ-sektion och länka till resurser

Efter ett tag kommer du att inse att många av dina användare ställer liknande frågor.

Du kan hjälpa dem att spara tid och svara på dessa frågor direkt på din kontaktsida genom att lägga till en FAQ-sektion.

(Källa: Smart Passive Income)

8. Optimera din bekräftelsesida för formuläret

De flesta kontaktformulärplugins låter dig visa användarna ett bekräftelsemeddelande vid inlämning eller vidarebefordra dem till en annan sida.

Att omdirigera användare ger dig en chans att visa dem dina mest hjälpsamma resurser, som ditt mest populära innehåll eller att erbjuda en rabattkod.

Ett annat sätt att optimera din formulärbekräftelsesida är att följa upp med möjliga nästa steg. Du kan till exempel be besökare att prenumerera på ditt nyhetsbrev eller följa dina sociala mediekonton.

(Källa: Orbit Media)

9. Be användare att gå med i din e-postlista

När du skapar ett kontaktformulär kan du be användare om deras e-postadresser. Om du gör det rekommenderar vi att du lägger till en kryssruta för att bjuda in dem att gå med i din e-postlista.

Och om du inte bygger en e-postlista än, kanske du vill se vår guide om varför det är så viktigt att bygga en e-postlista.

(Källa: WPBeginner)

För detaljer om hur du gör detta kan du se vår handledning om hur man gör leadgenerering i WordPress som ett proffs.

10. Använd foton av ditt team

Att lägga till foton av dina teammedlemmar på kontaktsidan gör den mer personlig och välkomnande. Det försäkrar besökare om att det finns riktiga människor bakom kontaktsidan, redo att svara på deras frågor.

(Källa: Goldelucks)

11. Gör din kontaktsida engagerande

Din kontaktsidesida behöver inte vara enkel. Att lägga till foton av ditt kontor, din butik, dina produkter eller ditt team kan spegla ditt företags personlighet.

Du kan också göra det roligt genom att lägga till designelemnt, som ikoner, illustrationer eller animationer, och använda dina varumärkesfärger.

För detaljer om hur du gör detta, se vår handledning om hur man skapar en anpassad sida i WordPress.

(Källa: Omsom)

12. Var kreativ med din kontaktsidesdesign

Du kanske har märkt att många kontaktsidor på olika webbplatser följer en enkel och mycket förutsägbar layout. Även om den fyller sitt syfte, kan du använda din sida som en möjlighet att sticka ut.

Många premium WordPress-teman kommer med inbyggda stilar för formulär. Du kan anpassa dessa stilar genom att lägga till anpassad CSS eller använda ett plugin som CSS Hero.

Du kan också använda ett dra-och-släpp sidbyggarplugin som SeedProd för att skapa din kontaktside-layout. Detta ger dig flexibiliteten att vara mer kreativ utan att skriva någon kod.

Den har startmallar som kan hjälpa dig att sätta upp en webbplats med bara några få klick, inte bara en enda sida. Eftersom dessa mallar inkluderar en färdig kontaktsida behöver du bara justera innehållet så att det passar ditt varumärke eller din verksamhet.

(Källa: SeedProd)

13. Se till att minska antalet övergivna formulär

När du skapar ett formulär med flera sidor eller ett formulär med många fält, riskerar du att minska din konverteringsgrad. Ibland blir användare trötta på att fylla i ett långt formulär och lämnar sidan innan de är klara.

Vi kallar ofta detta formulärabortfall, och det kan hända med vilket formulär som helst, inklusive registrering för e-postutskick, WooCommerce-kassa eller kontaktformulär.

För att bekämpa formulärtrötthet kommer många avancerade formulärbyggare som WPForms med tillägg för formulärabonnemang. Detta hjälper dig att fånga partiella inlägg från dina formulär.

På så sätt kan du följa upp potentiella leads som inte har fyllt i formuläret, vilket hjälper dig att återfå kunder som annars kan ha gått förlorade.

Genom att spåra formulärsavhopp kan du identifiera vilka formulär som ofta lämnas ofullständiga. Detta gör att du kan göra nödvändiga förbättringar för att uppmuntra fler inlämningar och minska avhoppsfrekvensen.

För mer detaljerad information kan du se vår guide om hur man spårar och minskar formulärsavhopp i WordPress.

Vanliga frågor om design av kontaktsida

Här är några vanliga frågor som våra läsare ofta ställer om att skapa en kontaktsidesformulär:

1. Kommer ett kontaktformulär att påverka min webbplats SEO?

Ja, men på ett positivt sätt. En väl utformad kontaktsida kan bygga förtroende hos både användare och sökmotorer som Google.

Att inkludera detaljer som en fysisk adress och ett telefonnummer signalerar att ett verkligt företag ligger bakom webbplatsen. Detta kan bidra till din webbplats övergripande auktoritet och trovärdighet, vilket är viktiga SEO-faktorer.

2. Hur skyddar jag mitt kontaktformulär från spam?

Spam i kontaktformulär är en vanlig frustration, men det är hanterbart. Bästa sättet att förhindra det är att använda ett kvalitetsformulärplugin som WPForms, som har inbyggda funktioner mot spam.

Du kan aktivera Google reCAPTCHA, använda en anpassad CAPTCHA eller ställa in ett "honeypot"-fält som är osynligt för människor men fångar spamrobotar. För fler metoder, se vår guide om hur man blockerar spam i WordPress-kontaktsformulär.

3. Vilken är den viktigaste informationen att inkludera på en kontaktsida?

Varje bra kontaktsida bör ha tre kärnelement. För det första, ett varmt och välkomnande meddelande som förklarar varför och när användare bör ta kontakt.

För det andra, ett enkelt kontaktformulär med endast de mest nödvändiga fälten (vanligtvis Namn, E-post och Meddelande).

Slutligen bör du erbjuda alternativa sätt att ansluta, som en e-postadress, telefonnummer eller länkar till dina sociala medieprofiler.

Experthandledningar om WordPress kontaktformulär och sidor

Nu när du känner till bästa praxis för att skapa en kontaktsida, kanske du vill se några andra guider relaterade till kontaktformulär och sidor i WordPress:

• Hur man skapar ett kontaktformulär i WordPress (steg för steg)
• Hur man skapar ett säkert kontaktformulär i WordPress
• Hur man skapar ett kontaktformulär med flera mottagare
• Hur man lägger till ett popup-formulär för kontakter i WordPress
• Hur man lägger till ett utskjutbart kontaktformulär i WordPress (enkel handledning)
• Hur man bäddar in en Google-karta i kontaktformulär (med kartnål)
• Hur man använder kontaktformulär för att växa din e-postlista i WordPress
• Hur man blockerar spam i kontaktformulär i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig bästa praxis för bra design av kontaktsidesformulär. Därefter kanske du också vill se våra steg-för-steg-guider om hur man lägger till automatisk komplettering för adressfält och hur man ställer in spårning av WordPress-formulär i Google Analytics.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.