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-kontaktformulär gör det enklare för besökare att kontakta dig utan att avbryta deras surfande eller sökande efter din kontaktsida.

Detta är viktigt eftersom varje WordPress-webbplats behöver ett enkelt sätt för användare att skicka frågor, feedback eller supportförfrågningar. Men när ditt kontaktformulär bara finns på en sida, kanske många besökare aldrig hittar det. Och detta leder ofta till förlorade leads.

Ett popup-kontaktformulär löser detta genom att låta besökare öppna formuläret med ett enda klick, från vilken sida som helst på din webbplats. De kan kontakta dig direkt utan att lämna sidan de för närvarande tittar på.

Det hjälper också till att behålla folk på din webbplats istället för att skicka dem någon annanstans. Och som en bonus kan du använda dessa popups för att samla in e-postadresser och växa din e-postlista.

I den här guiden visar vi dig hur du skapar ett kontaktformulär och lägger 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:

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, men vi rekommenderar att använda WPForms, eftersom det är den bästa WordPress-formulärbyggaren på marknaden. Det är också den mest nybörjarvänliga, tack vare AI-verktygen, dra-och-släpp-byggaren och förbyggda formulärmallar.

På WPBeginner använder vi 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.

För att börja, gå till WPForms webbplats och klicka på knappen 'Get WPForms Now'. Följ sedan helt enkelt stegen för att skapa ditt konto och slutföra köpet.

Efter utcheckning hamnar du på din WPForms-kontopanel, där du kan hitta pluginets licensnyckel.

Härifrån navigerar du till WPForms » Add New från din WordPress-instrumentpanel.

På nästa skärm använder du sökfältet för att snabbt hitta WPForms-pluginet.

När det visas i sökresultatet, klicka på 'Install Now' och sedan 'Activate'.

Om du behöver hjälp kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Om du köper WPForms Pro behöver du aktivera din licensnyckel. Gå till WPForms » Inställningar, ange din nyckel i respektive fält och klicka på ‘Verifiera nyckel’.

Härifrån är du redo att skapa ditt kontaktformulär.

Navigera till WPForms » Lägg till ny från din WordPress-instrumentpanel.

På nästa skärm kan du 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 i menyn till vänster. Du kan också ändra ordningen på fälten i formuläret.

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

Om du till exempel klickar på fältet ‘Namn’ ser du alternativ för att ändra dess etikett och format. Du kan till och med lägga till en beskrivning eller markera ett fält som obligatoriskt.

För steg-för-steg-instruktioner, se vår guide om hur man skapar ett kontaktformulär.

När du är klar klickar du på alternativet ‘Inställningar’ för att konfigurera formuläranmälan och bekräftelsen.

I avsnittet ‘Allmänt’ kan du byta namn på formuläret, lägga till en formulärbeskrivning, ändra texten på skicka-knappen, aktivera anti-spam-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 använder ‘Meddelande’ som standardbekräftelsetyp. Detta visar ett tackmeddelande omedelbart efter att formuläret har skickats. Utöver det ser du alternativen ‘Visa sida’ och ‘Gå till URL (Omdirigera)’.

För popup-fönster rekommenderar vi dock att du behåller denna ‘Meddelande’-inställning. Att leda användare vidare till en annan sida kan ibland kännas abrupt när de interagerar med ett popup-fönster.

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 ett nytt popup-fönster 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 eller fönster öppet eftersom du kommer att behöva kortkoden 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 ren mall och avancerade visningsregler för att visa popup-fönstret.

Så, låt oss registrera ett konto genom att gå till OptinMonster-webbplatsen. Besök helt enkelt webbplatsen och klicka på knappen ‘Skaffa OptinMonster Nu’.

Efter registrering hamnar du i din OptinMonster-kontopanel. Håll denna flik öppen, eftersom vi kommer att ansluta ditt konto till WordPress om ett ögonblick.

Därefter måste du installera och aktivera det kostnadsfria OptinMonster-pluginet på din webbplats. Detta plugin fungerar som en koppling mellan din webbplats och ditt OptinMonster-konto.

I din WordPress-instrumentpanel går du till Plugins » Lägg till nytt plugin.

På nästa skärm använder du sökfältet för att hitta ‘OptinMonster’.

Klicka sedan på ‘Installera nu’ och ‘Aktivera’ för att aktivera det korrekt.

För detaljer kan du följa vår guide om hur man installerar ett WordPress-plugin.

Efter att pluginet är aktivt kommer du att se 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 visas i menyn till vänster. Leta reda på ‘WPForms’-blocket, dra och släpp det sedan på din mall.

Därefter klickar du på rullgardinsmenyn ‘Formulärval’ i blockinställningarna till vänster.

Välj helt enkelt kontaktformuläret du skapade tidigare från listan. Om du inte ser ditt formulär listat kan du välja ‘Lägg till kortkod manuellt’ och klistra in kortkoden du kopierade i Steg 1.

Ange din WPForms kontaktformulärs kortkod i blocket. Om du tappade bort din kortkod kan du gå tillbaka till din WPForms inbäddningsinställningssida 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 rekommenderar att använda MonsterLink (vid klick)-målinställning. Detta triggar popupen endast när en användare klickar på en specifik länk eller knapp. Det ger besökaren kontroll och är mycket mindre påträngande än en popup som öppnas automatiskt.

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://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Du behöver inte hela HTML-koden – du behöver bara URL:en. Så du kan kopiera länken som börjar med https://.

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

https://app.monstercampaigns.com/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 text för din knapp och klicka på länksymbolen. Till exempel använder vi 'Kontakta oss' som knappens text.

Nu lägger vi till MonsterLink-URL:en. Klicka på knappblocket för att välja det, klicka sedan på länksymbolen i verktygsfältet. Klistra helt enkelt in URL:en du kopierade tidigare och tryck på 'Enter'.

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.

Experimentera gärna med olika animations- och ljudinställningar. När du är klar klickar du på knappen 'Nästa steg'.

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 göra din kampanj live och publicera ditt kontaktformulärs-popup.

För att göra det vill du gå till fliken ‘Publicera’ högst upp. Klicka sedan på knappen ‘Förhandsgranska’ för att se hur ditt popup-fönster ser ut innan det går live.

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.

Navigera till OptinMonster » Kampanjer och klicka på rullgardinsmenyn ‘Status’. Sedan kan du ändra 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 popup-fönster med kontaktformulär i WordPress. Ännu bättre, du har gjort det på ett sätt som gör ditt kontaktformulär lättillgängligt utan att vara påträngande.

Bonustips för att ö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 registreringar bör du fokusera på att skapa hjälpsamma och relevanta popup-fönster snarare än påträngande:

Genom att kombinera dessa strategier kan du skapa popups som fångar uppmärksamhet, kopplar an till din publik och driver handling utan att kännas påträngande.

För mer information och exempel kan du ta en titt på vår guide om hur man använder psykologin bakom popups 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 ta en titt på våra guider om:

• Hur man använder kontaktformulär för att växa din e-postlista i WordPress
• 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.