Så här addar du en Contact Form popup i WordPress

Contact Form är en viktig del av kommunikationen med besökarna på din website. Genom att placera dem i en popup gör du det enklare för potentiella customers att kontakta dig om dina produkter och tjänster.

När kontaktformuläret är lättillgängligt och användarvänligt är det mer troligt att besökarna gillar att höra av sig. Detta kan leda till fler förfrågningar, återkoppling och potentiella konverteringar.

Popups kan dock vara påträngande om de ej används på rätt sätt. Om du använder dem för mycket eller visar dem kl. fel tid kan det frustrera användarna. Så det är viktigt att hitta rätt balans så att ditt popup-kontaktformulär är till hjälp eller ej störande.

I den här artikeln kommer vi att guida you genom stegen för hur du lägger till en popup för kontaktformulär i WordPress.

Vi kommer också att dela med oss av våra experttips om hur du skapar en popup som fångar uppmärksamheten utan att vara påträngande. Detta tillvägagångssätt ser till att din WordPress site förblir användarvänlig samtidigt som du maximerar interaktionsmöjligheterna.

Varför använda en Contact Form Popup?

Alla WordPress-webbplatser och bloggar behöver ett kontaktformulär där användarna kan skicka in frågor, återkoppling eller problem.

Men om ditt kontaktformulär bara finns på en enda page är det svårt för människor att hitta det. Som ett resultat kan dina användare lämna din site innan de kontaktar you, och du kan förlora potentiella leads och konverteringar.

En Contact Form Popup hjälper till att lösa detta issue genom att allow yours besökare att snabbt view formuläret genom att click a button. På så sätt kan de komma i kontakt med you oavsett vilken page de befinner sig på.

Denna typ av Contact Form hjälper också till att hålla människor på din website, eftersom de inte behöver lämna den page de viewar. Dessutom kan du växa din email list med hjälp av ett kontaktformulär popup.

Med det sagt måste you först skapa ett kontaktformulär och displayed det i en popup på your web pages. Men oroa dig inte för det. I följande sections guidar vi dig genom att skapa ett kontaktformulär och lägga till det i en popup i WordPress:

Är du redo? Låt oss sätta igång.

Video Tutorial

Om du föredrar skriftliga instruktioner kan du fortsätta Läsa.

Så här skapar du ett Contact Form i WordPress

Först måste du välja ett plugin för kontaktformulär för WordPress.

Det finns många gratis och betalda alternativ du kan välja mellan, men vi rekommenderar att du använder WPForms, eftersom det är det bästa alternativet.

WPForms är ett nybörjarvänligt form builder plugin som erbjuder en drag and drop builder för att skapa kontaktformulär i WordPress med bara några clicks. Det erbjuder också förbyggda formulärmallar och massor av alternativ för customize.

För denna tutorial kommer vi att använda WPForms Lite-versionen, som är gratis och erbjuder en kontaktformulärsmall.

Men du kan också använda dess premiumversion för att låsa upp fler funktioner. WPForms Pro erbjuder till exempel 1 800+ formulärmallar, fler alternativ för customize, kraftfulla tillägg och möjligheten att samla in onlinebetalningar utan extra 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 läsa vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

När pluginet är aktivt är du redo att skapa ditt kontaktformulär. Allt du behöver göra är att gå till WPForms ” Add New från din WordPress dashboard.

Efter det kommer WPForms att be dig att namnge ditt formulär och välja en template.

När du har enter ett formulärnamn går du vidare och väljer templaten ”Simple Contact Form”.

Därefter kan du lägga till fält i formuläret med hjälp av drag and drop builder.

Dra helt enkelt de fält du vill add to formuläret från alternativen i menyn till vänster. You can also reorder the positions of each field in the form.

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

Om du till exempel klickar på fältet ”Name” får du olika alternativ, till exempel att ändra dess etikett och format. Du kan även add to en description eller markera ett fält som obligatoriskt.

När du är klar går du vidare och klickar på alternativet ”Settings” för att konfigurera formulärets notification och bekräftelse.

I ”General” section kan du byta namn på formuläret, ändra texten på knappen submit, aktivera skydd mot skräppost med mera.

Därefter kan du gå till alternativet för inställningar för ”Notifications”. Som standard skickas aviseringarna till admin email som är konfigurerad på din WordPress website.

Du kan dock skicka din contact form notification till vilken email address du vill. Om du vill få aviseringar från formuläret till flera email, separera varje email med ett kommatecken.

För ämnesraden i email använder WPForms namnet på formuläret som du tidigare har enterat. Du kan dock editera ämnesradens text till vad du vill.

Låt oss nu gå till alternativet ”Bekräftelser”.

WPForms kommer att använda ”Message” som standard bekräftelsetyp. Detta kommer att visa dina besökare ett tack-meddelande när de skickar in ett formulär.

Du kan dock ändra typen av message och redirecta användare till en specifik page på your website när de completed ett formulär.

När du är klar med att skapa ett kontaktformulär, se till att klicka på knappen ”Save” högst upp till höger för att spara dina ändringar.

Därefter kan du klicka på alternativet ”Embed” i det övre hörnet bredvid knappen ”Save” för att få formulärets shortcode. You will need this information to display your form on a popup.

När ett nytt fönster visas kan du selecta alternativet ”use a shortcode”.

WPForms kommer sedan att displayed shortcode för ditt kontaktformulär så snart du klickar på länken. Vi föreslår att du håller den här tabben/fönstret öppet eftersom du kommer att behöva det i nästa steg, där vi visar dig hur du addar ditt kontaktformulär i en popup.

Add a Contact Form Popup to Your WordPress Site

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

Vi rekommenderar att du använder OptinMonster, eftersom det är det bästa pluginet för lead-generering och konvertering för WordPress. Det är också ett av de mest populära, med över 1,2 miljoner websites som använder detta kraftfulla verktyg.

För denna tutorial kommer vi att använda OptinMonster Pro-versionen, som innehåller en rörig mall och avancerade visningsregler för att visa popupen.

Låt oss först registrera oss för ett konto genom att gå till OptinMonster-webbplatsen. Besök bara webbplatsen och klicka på knappen ”Get OptinMonster Now”.

Därefter måste du installera och aktivera det gratis OptinMonster plugin på din website. För mer detaljer kan du följa vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktivt kommer du att se installationsguiden. Gå vidare och klicka på knappen ”Anslut ditt befintliga konto”.

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

Klicka bara på knappen ”Anslut till WordPress”.

Nu när ditt account är anslutet är nästa sak att göra att skapa en new kampanj för din popup 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 vy måste du selecta en kampanjtyp.

Eftersom vi ska skapa en popup för ett kontaktformulär, väljer du ”Popup” som campaign type.

Efter det vill du rulla ner på sidan för att välja en template.

OptinMonster erbjuder över 75 attraktiva och mycket konverterande mönster för dina popups. Du kan välja vilken template som helst som du gillar.

När du har bestämt dig för en template, enter ett namn på your campaign och click the ”Start Building” button.

Nu, med hjälp av drag and drop-byggaren i OptinMonster, kan du edit din popup template.

You will see different ’Blocks’ appear in the menu on your left. Låt oss lokalisera blocket ’WPForms’ och sedan drag and drop det till din template.

Efter det måste du klicka på dropdown-menyn ”Form Selection” från blockinställningarna i den vänstra menyn. Välj sedan alternativet ”Add Shortcode Manually”.

Härifrån kan du enter din WPForms contact form shortcode i blocket. För att hitta koden måste du gå tillbaka till dina WPForms embed-inställningar och kopiera shortcoden.

Det är viktigt att notera att du inte kommer att se en preview av kontaktformuläret i templaten när du addar shortcoden.

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

Därefter kan du gå till tabben ”Display Rules” högst upp för att välja när popupen ska visas på din website.

Som standard kommer OptinMonster att ställa in det när tiden på sidan är 5 sekunder, och popupen kommer att visas på vilken sida som helst. Du kan dock ändra inställningarna för visningsregeln och välja olika utlösare och inriktningsalternativ.

Vi föreslår att du använder MonsterLink (On Click) -inriktningen. På så sätt kommer din popup att visas när en visitor klickar på en link eller en knapp.

Därefter kan du clicka på ”Copy MonsterLink Code” knappen och add den till valfri text, image eller knapp på din website.

För mer detaljer kan du följa vår guide för nybörjare om hur du 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>

Men för att embed länken på din WordPress blogginlägg eller sida, behöver du bara URL från koden.

Så här ska URL:en se ut:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Låt oss till exempel säga att du vill lägga till en knapp för att kontakta oss på din site.

I det här fallet kan du börja med att editera en page eller post och gå till din WordPress editor. Sedan klickar du på plustecknet (+) högst upp och add to ett block med ”Knappar”.

Därefter kan du enter en text för din knapp och click the link icon. Vi använder till exempel ”Kontakta oss” som text för knappen.

Nu är det dags att add to MonsterLink URL till din knapp. You click on the button then on the link inserter button and paste the URL.

När du har gjort det, gå vidare och publicera din WordPress post eller page. Monsterlänken kommer nu att addas till din ”Kontakta oss”-knapp.

Låt oss nu heada tillbaka till din OptinMonster-kampanj för att slutföra konfigurationen.

När du har valt MonsterLink som ditt mål och visar det på valfri page kan du klicka på knappen ”Next” längst ner.

På nästa vy ser du options för att ändra typen av kampanjvy, add to en MonsterEffect-animation och spela upp ett ljud när popupen visas.

You can be creative and experiment with different settings. När du är nöjd med konfigurationen går du vidare och klickar på knappen ”Next”.

OptinMonster kommer då att visa en summary av your ’Display Rule’ settings.

Detta hjälper dig att se till att du har ställt in korrekt när dina kampanjer ska visas på din website.

Nu är du redo att ta din kampanj live och publicera din popup med kontaktformulär. För att göra det vill du gå till tabben ”Publicera” högst upp.

Därefter kan du klicka på knappen ”Preview” innan du publicerar din kampanj. Detta kommer att visa dig en Live Preview av hur din popup kommer att se ut på din website.

När du är nöjd med kampanjens appearance ändrar du statusen för Publicera från Draft till Publicera.

När du är klar kan du lämna OptinMonster-kampanjbyggaren och kontrollera statusen för din kampanj från din WordPress dashboard.

För att göra detta vill du navigera till OptinMonster ” Kampanjer. Härifrån klickar du helt enkelt på dropdown-menyn ”Status” och ändrar den från ”Inventerar” till ”Publicerad”.

OptinMonster uppdaterar automatiskt ändringarna.

Därefter vill du gå till där du displayar knappen ”Contact Form” med MonsterLink-integration och se popupen för kontaktformuläret i action.

Där har du det!

Du har utan problem skapat ett plugin för kontaktformulär i WordPress. Och du har dessutom sett till att formuläret inte är påträngande.

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. Sedan kanske du också vill kontrollera vår guide om hur du skickar bekräftelsemail efter WordPress-formulärinlämningar och hur du spårar och minskar övergivande av formulär.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.