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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankit says
A well written article. Must read for non-tech beginners like me.
WPBeginner Support says
Glad you found our content helpful
Administratör
Deepak says
Hi i want to popup form whn i clk button… How i can do this
WPBeginner Support says
For what it sounds like you are wanting, you would want to take a look at OptinMonster: https://www.wpbeginner.com/wordpress-plugins/optinmonster-wordpress-popup-plugin/
Administratör
Isaac says
This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.
Editorial Staff says
Hi Isaac, there are likely other plugins that can do this, but we recommend the solution that we’re using ourselves. We have a good tutorial on how to pick the best plugin while you look through the WordPress.org plugin directory.
Administratör
Kulwant Singh says
can i create differents popup for different post ? it is possible or not
WPBeginner Support says
Hi Kulwant,
Yes, you can create different popups for different posts.
Administratör
Lela Donelson says
My WP menu does not have a WP forms option. I have a GoDaddy managed WP.
WPBeginner Support says
Hi Lela,
WPForms is a WordPress Plugin. You will first need to install and activate it. For more details, see our step by step guide on how to install a WordPress plugin.
If you have already installed and activated the plugin, and you still can’t see it in your WordPress admin menu, then please contact WPForms Support or your hosting company.
Administratör
Michael Wahhab says
Where’s the demo?
Nick Vail says
Are pop up windows only available with the paid ”business plan”?
Ruben says
Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.
WPBeginner Support says
Yes you can.
Administratör
shagufta says
how to have tabs in the popup that will link to div’s which will open in the same popup
Jhorene says
Hello,
Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?
Thank you.
Regards,
Jhorene
WPBeginner Support says
OptinMonster comes with a feature called mobile friendly popups. You can create different popups for your desktop and mobile users, providing a much better user experience to your mobile audiences.
Administratör
Ian Perera says
can i pass data to gravity form
Dave E says
Hi, I’m looking for the same. Did you ever find a solution? Thanks
Alicia Beale says
How can I use this pop-up contact form to notify different email addresses?
Mike Whaling says
Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.
Any tips or suggestions?
WPBeginner Support says
Please open a support ticket on OptinMonster website.
Administratör
Silvan says
could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.
sharul says
Can you please show us some demo.
Thank you
WPBeginner Staff says
Please submit a support ticket on OptinMonster’s support website.
Alvin Ng says
heya man, need some help here. No matter what i do, i can’t get optinmonster to pop up. do i need to replace the # with a link?
Don DeMaio says
This would be great if they offered a demo to check it out.