Hur man lägger till ett utskjutbart kontaktformulär i WordPress (enkel handledning)

Att få besökare att kontakta dig via din webbplats kan vara knepigt. Vi lärde oss detta på första parkett när vi drev vår första WordPress-företagswebbplats – folk besökte sidan, men använde sällan kontaktformuläret.

Det var inte förrän vi lade till ett utskjutbart kontaktformulär som saker började förändras.

Tänk på ett utskjutbart kontaktformulär som en vänlig assistent som dyker upp vid precis rätt ögonblick. Till skillnad från popups, som kan irritera besökare, glider dessa formulär smidigt in i vyn när någon är redo att ansluta.

Efter att ha implementerat detta på flera klientwebbplatser har vi sett att engagemangsgraden har förbättrats avsevärt.

I den här handledningen guidar vi dig genom det enklaste sättet att lägga till ett utskjutbart kontaktformulär på din WordPress-webbplats. Vi har testat och undersökt den mest användarvänliga lösningen, så att du slipper slösa tid på att lista ut det själv. 🙌

Varför lägga till ett utskjutbart kontaktformulär i WordPress? 💭

Många småföretagare startar sina webbplatser i hopp om att det ska hjälpa till att växa deras verksamhet.

Det är därför du lägger till en kontaktside så att användare kan komma i kontakt med dig.

Problemet är dock att de flesta användare som har frågor kommer att lämna din WordPress-webbplats utan att kontakta dig eller ens besöka din kontaktsida.

Därför kanske du märker att många populära webbplatser lägger till kontaktformulärspopups, en kontakt-slider eller knappar för "call-to-action" som öppnar kontaktformulär.

Dessa animerade och interaktiva alternativ drar uppmärksamhet till kontaktformuläret och låter användare snabbt fylla i det utan att besöka en annan sida. Dessa formulär kan hjälpa till att avsevärt öka dina konverteringar.

Med det sagt kommer vi att dela hur man skapar ett utskjutningsformulär i WordPress. Här är en snabb översikt över allt vi kommer att täcka i den här guiden:

• Lägga till ett utskjutbart kontaktformulär i WordPress
• Steg 1: Skapa ett kontaktformulär i WordPress
• Steg 2: Skapa en Slide Out Optin i OptinMonster
• Steg 3: Visa utskjutande kontaktformulär i WordPress
• Bonusresurser 🔗: Experthandledningar för användning av WordPress-formulär

Låt oss börja.

Lägga till ett utskjutbart kontaktformulär i WordPress

För den här handledningen behöver du WPForms. Det är den bästa WordPress-plugin för kontaktformulär på marknaden eftersom det är både enkelt och kraftfullt.

Du kan använda gratisversionen av WPForms kontaktformulärsplugg för om du inte behöver alla premiumfunktioner.

Du kommer också att behöva OptinMonster. Det är den mest kraftfulla programvaran för konverteringsoptimering. Den hjälper dig att omvandla övergivna webbplatsbesökare till kunder. För den här handledningen kommer vi att använda gratisversionen av OptinMonster.

Steg 1: Skapa ett kontaktformulär i WordPress

Först måste du installera och aktivera WPForms-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

ℹ️ WPForms driver alla våra formulär på WPBeginner, inklusive vårt kontaktformulär. Det är lätt att använda, mycket anpassningsbart, och de nya AI-verktygen gör det snabbare än någonsin att skapa formulär.

Nyfiken på hur det fungerar? Kolla in vår fullständiga WPForms-recension för att utforska allt det kan göra!

Vid aktivering måste du besöka sidan WPForms » Lägg till ny för att skapa ett nytt kontaktformulär. Detta startar WPForms-byggargränssnittet.

Ange ett namn för ditt kontaktformulär högst upp på sidan.

Därefter måste du föra muspekaren över mallen 'Enkelt kontaktformulär' och klicka på knappen 'Använd mall'.

WPForms kommer att skapa ett nytt formulär baserat på mallen Enkelt kontaktformulär.

Du kommer att se formulärförhandsgranskningen i den högra panelen av formulärbyggaren. Du kan klicka på vilket fält som helst för att redigera det eller lägga till nya formulärfält från den vänstra kolumnen.

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

När du är klar med att redigera formuläret klickar du bara på knappen 'Spara' för att lagra dina ändringar.

Därefter behöver du klicka på knappen 'Bädda in' högst upp för att få formulärets inbäddningskod.

Detta kommer att visa en popup som visar flera sätt att bädda in ditt formulär. Klicka helt enkelt på länken 'använd en kortkod' och kopiera sedan kortkoden. Du behöver den i nästa steg.

Steg 2: Skapa en Slide Out Optin i OptinMonster

Nu kommer vi att skapa en utskjutbar kampanj som visar det kontaktformulär du skapade i det första steget.

Du måste installera och aktivera gratispluginet OptinMonster. Detta plugin fungerar som en koppling mellan din webbplats och ditt OptinMonster-konto.

För detaljer kan du hänvisa till vår guide om hur man installerar ett WordPress-plugin.

ℹ️ Vi använder OptinMonster på WPBeginner för att marknadsföra exklusiva erbjudanden via popups, slide-ins och banners. Det är ett mångsidigt verktyg som driver engagemang och växer vår e-postlista utan ansträngning.

Vill du veta mer? Kolla in vår kompletta OptinMonster-recension för att utforska dess funktioner!

Vid aktivering startar OptinMonster-installationsguiden automatiskt. Detta låter dig skapa ett nytt konto eller ansluta ett befintligt konto.

Alternativt kan du gå till sidan OptinMonster » Inställningar, där du kan skapa eller ansluta ett konto.

Efter att du har skapat eller anslutit ditt OptinMonster-konto kan du skapa en ny optin.

Navigera helt enkelt till sidan OptinMonster » Kampanjer och klicka på knappen 'Lägg till ny'. Om du inte har några kampanjer ännu kan du också klicka på knappen 'Skapa din första kampanj'.

OptinMonster erbjuder olika typer av dynamiska kampanjer.

För den här handledningen kommer vi att använda kampanjen 'Slide-in'.

Klicka för att välja 'Utdragbar' som kampanjtyp.

Därefter behöver du välja mall. OptinMonster erbjuder flera färdiga mallar.

För den här handledningen måste du välja 'Canvas'.

Du hittar detta enkelt med sökfunktionen och klickar sedan på knappen 'Använd mall' som visas när du för muspekaren över den.

Så snart du väljer mallen, kommer du att bli ombedd att ange ett namn för din kampanj. Detta hjälper dig att enkelt hitta kampanjen i din OptinMonster-instrumentpanel.

Klicka sedan på knappen 'Starta bygga'.

Nu kommer OptinMonster att ladda sitt gränssnitt för kampanjbyggaren.

Du kommer att se en liveförhandsgranskning av din kampanj till höger och de olika blocken i menyn till vänster.

Hitta helt enkelt WPForms-blocket och dra och släpp det sedan i förhandsgranskningsområdet.

Nu kommer WPForms-blocket att visas på mallen, och du kommer att se dess inställningar till vänster.

Du måste klicka på rullgardinsmenyn 'Formulärval' i blockinställningarna i den vänstra menyn och välja alternativet 'Lägg till kortkod manuellt'.

Detta gör att du kan klistra in din WPForms kontaktformulär kortkod i blocket. Du kopierade den tidigare i handledningen.

Nu kan du ta bort eller anpassa de andra blocken i formuläret.

Du kan till exempel ändra bilden genom att klicka på den och använda inställningarna till vänster.

Eller så kan du ta bort det genom att helt enkelt föra muspekaren över blocket och klicka på ikonen 'Papperskorg'.

För den här handledningen kommer vi att ta bort de andra blocken från optin, och bara lämna WPForms-blocket kvar.

Om du vill kan du också klicka på bakgrunden och välja en färg, gradient eller bild för alternativet från inställningspanelen till vänster.

Därefter måste du klicka på fliken 'Visningsregler' högst upp på sidan för att konfigurera när och hur optinet ska visas.

Du bör titta på fliken 'Villkor' längst ner på skärmen. Här kommer standardinställningarna att visa opt-in på vilken sida som helst efter 5 sekunder. Detta bör fungera för de flesta webbplatser.

Därefter bör du klicka på fliken 'Åtgärder' längst ner på sidan.

Som standard finns det ingen animation eller ljud när optin visas. Om du vill kan du välja ett alternativ från rullgardinsmenyn ‘Animate with MonsterEffects’, till exempel ‘Slide In (Left)’.

När du är klar med att konfigurera visningsreglerna måste du klicka på knappen ‘Spara’ högst upp för att lagra dina inställningar och sedan klicka på knappen ‘Publicera’.

På nästa skärm måste du ändra publiceringsstatusen till 'Publicera'. Detta gör optinen tillgänglig på din WordPress-blogg eller webbplats.

Steg 3: Visa utskjutande kontaktformulär i WordPress

Nu när du har skapat både kontaktformuläret och slide-out-kampanjen är du redo att visa den på din webbplats.

Du kan stänga sidan Publiceringsstatus genom att klicka på 'X'-ikonen längst upp till höger. Du bör nu se en sida som låter dig konfigurera 'WordPress-utdatainställningar' och 'Synlighet & Status' för optin.

När du skrollar ner i sektionen 'Synlighet & Status', vill du normalt att 'Alla besökare och inloggade användare' ska se kampanjen. Det finns dock alternativ för 'Endast besökare' och 'Endast inloggade användare'.

Därefter måste du välja 'Publicerad' från rullgardinsmenyn Status.

När du har gjort det bör du klicka på knappen 'Spara ändringar' för att lagra dina inställningar.

Du kan nu besöka din webbplats för att se utskjutningsformuläret i aktion.

Bonusresurser 🔗: Experthandledningar för användning av WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till ett utskjutbart kontaktformulär i WordPress. Du kanske också vill se några av våra andra guider om WordPress-formulär:

• Hur du visar ett flytande kontaktformulär i WordPress
• Hur man skapar ett kontaktformulär med flera mottagare
• Hur man skapar GDPR-kompatibla formulär i WordPress
• Hur man blockerar spam i kontaktformulär i WordPress
• Hur man enkelt lägger till reCAPTCHA i WordPress kommentarsformulär
• Bästa praxis för design av kontakformulärssidor (med exempel)
• Hur man använder kontaktformulär för att växa din e-postlista i WordPress
• Hur man lägger till ett popup-formulär för kontakter i WordPress
• Hur man bäddar in en Google-karta i kontaktformulär (med kartnål)
• Hur man skapar flerspråkiga formulär i WordPress

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.