Hur man addar Contact Form i WordPress (Easy Tutorial)

Att få nya kunder via din webbplats är viktigt för många företag. Vi har upptäckt att kontaktformulär är ett bra sätt att få kontakt med potentiella kunder på våra webbplatser och i våra företag. Men ibland lägger folk inte märke till dessa formulär på din webbplats.

En smart lösning är att använda ett kontaktformulär som glider ut. Det är ett formulär som flyttas upp på skärmen när besökaren är redo att kontakta dig. Det är mer synligt än ett vanligt formulär, men det är inte lika uppenbart som en popup som dyker upp direkt.

I den här artikeln visar vi dig hur du lägger till ett utskjutbart kontaktformulär på din WordPress-webbplats som får mer uppmärksamhet och hjälper dig att komma i kontakt med fler potentiella kunder.

Varför add to en Slide Out Contact Form i WordPress?

Många småföretagare startar sin website i hopp om att den ska hjälpa deras företag att växa.

Det är därför du addar till en page med ett kontaktformulär så att användarna kan komma i kontakt med dig.

Problemet är dock att de flesta användare som har frågor kommer att lämna din WordPress website utan att kontakta you eller ens besöka din kontakt page.

That’s why you might notice that many popular websites add to contact form popups, a contact slider, or call-to-action buttons that open contact forms.

Dessa animerade och interaktiva alternativ drar uppmärksamhet till kontaktformuläret och tillåter användare att snabbt fylla i det utan att besöka en annan page. Dessa formulär ökar din konvertering avsevärt.

Med detta sagt, låt oss ta en titt på hur man skapar ett slides-out kontaktformulär i WordPress.

Lägga till ett utskjutbart Contact Form i WordPress

För denna tutorial behöver du WPForms. Det är det bästa tillägget för kontaktformulär för WordPress på marknaden eftersom det är både enkelt och kraftfullt.

Du kan använda den gratis versionen av WPForms plugin för kontaktformulär om du inte behöver alla funktioner i premium.

Du kommer också att behöva OptinMonster. Det är den mest kraftfulla programvaran för optimering av konvertering. Det hjälper dig att konvertera övergivande website besökare till customers. För denna tutorial kommer vi att använda OptinMonster gratis version.

Step-by-Step 1: Skapa ett Contact Form i WordPress

Först måste du installera och aktivera WPForms plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering måste du besöka WPForms ” Add New page för att skapa ett nytt kontaktformulär. Detta kommer att starta WPForms byggargränssnitt.

Ange ett namn för ditt kontaktformulär högst upp på sidan. Efter det måste du hovera musen över templaten ”Simple Contact Form” och clicka på knappen ”Use Template”.

WPForms kommer att skapa ett new formulär baserat på Simple Contact Form template.

Du kommer att se formulärets preview i den högra rutan i form buildern. Du kan clicka på valfritt fält för att editera det eller add new formulärfält från den vänstra colonnen.

För mer details, you can see our guide on how to create a WordPress contact form.

När du har slutfört edit av formuläret klickar du bara på knappen ”Save” för att store dina ändringar.

Därefter måste du klicka på knappen ”Embed” högst upp för att få ditt formulärs embed-kod.

Detta kommer att ge en popup som visar flera sätt att embed ditt formulär. Klicka bara på länken ”use a shortcode” och kopiera sedan shortcoden. Du kommer att behöva den i nästa steg.

Steg 2: Skapa en Slide Out Optin i OptinMonster

Nu ska vi skapa en slide-out-kampanj som ska displayed det kontaktformulär you skapade i första steget.

Du måste installera och aktivera det gratis OptinMonster plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Detta plugin fungerar som en kontakt mellan din website och ditt OptinMonster account.

Vid aktivering kommer OptinMonster Setup Wizard att starta automatiskt. Detta gör att du kan skapa ett nytt konto eller ansluta ett befintligt konto.

Alternativt kan du gå till OptinMonster ” Settings page, där du kan skapa eller ansluta ett konto.

När du har skapat eller anslutit ditt OptinMonster-konto kan du skapa en ny optin.

Navigera bara till OptinMonster ” Campaigns page och klicka på knappen ’Add New’. 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 denna tutorial kommer vi att använda kampanjen ”Slide-in”. Gå vidare och click för att select ’Slide-in’ som your campaign type.

Därefter måste du välja templates. OptinMonster erbjuder flera färdiga templates.

För den här tutorialen måste du välja ’Canvas’. Du hittar den enkelt med hjälp av den utvalda funktionen search och klickar sedan på knappen ”Use Template” som visas när du hoverar musen över den.

Så snart du har valt templates kommer du att bli ombedd att ange ett namn för din kampanj. Detta hjälper dig att enkelt hitta kampanjen i din OptinMonster dashpanel.

Klicka sedan på knappen ”Starta byggnad”. Nu kommer OptinMonster att hämta sitt kampanjbyggargränssnitt. Du kommer att se en live preview av din kampanj till höger.

Du kommer att se de olika blocken i menyn till vänster. Du måste hitta WPForms-blocket och drag and drop det på din template.

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

Du måste klicka på dropdown-menyn ”Form Selection” från blockinställningarna i den vänstra menyn och välja alternativet ”Add Shortcode Manually”.

Detta kommer att tillåta dig att klistra in din WPForms kontaktformulär shortcode i blocket. Du kopierade den tidigare i tutorialen.

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

Du kan till exempel ändra image genom att clicka på den och använda settings till vänster. Eller så kan du helt enkelt ta bort den genom att hovera med musen över blocket och clicka på Trash icon.

För denna tutorial kommer vi att ta bort de andra blocken från optin, vilket bara lämnar WPForms-blocket.

Om du gillar kan du också clicka på bakgrunden och välja en färg, gradient eller image för alternativet från settings-panelen till vänster.

Därefter måste du klicka på tabben ”Display Rules” högst upp på sidan för att konfigurera när och hur optin kommer att visas.

Du bör titta på tabben ”Villkor” längst ner på vyn. Här kommer standardinställningarna att visa optin på alla sidor efter 5 sekunder. Detta bör fungera för de flesta websites.

Därefter ska du klicka på tabben ”Actions” längst ner på sidan.

Som standard finns det ingen animering eller ljud när optin visas. Om du gillar det kan du selecta ett alternativ från ”Animate with MonsterEffects” dropdown, till exempel ”Slide In (Left)”.

När du är klar med att konfigurera displayreglerna måste du klicka på knappen ”Save” högst upp för att spara dina settings och sedan klicka på knappen ”Publicera”.

På nästa vy måste du ändra statusen för Publicera till ”Publicera”. Detta kommer att göra optin tillgängligt på din WordPress blogg eller website.

Step 3: Visa Contact Form med slide-out i WordPress

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

Du kan stänga sidan Publicera status genom att klicka på ikonen ”X” högst upp till höger. Du bör nu se en page som låter dig konfigurera ”WordPress Output Settings” och ”Visibility & Status” för optin.

När du rullar ner i ”Visibility & Status” section vill du normalt att ”All Visitors and Logged-In Users” ska se kampanjen. Det finns dock alternativ för ”Visitors Only” och ”Logged-In Users Only”.

Därefter måste du välja ”Publicerad” i dropdown-menyn Status. När du har gjort det klickar du på knappen ”Save Changes” för att spara dina inställningar.

You can now visit your website to see the slide-out contact form in action.

Expertguider 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:

• Så här visar du ett flytande kontaktformulär i WordPress
• Så här skapar du ett Contact Form med flera mottagare
• Så här skapar du GDPR-kompatibla formulär i WordPress
• Så här blockerar du skräppost i Contact Form i WordPress
• Hur man enkelt add to reCAPTCHA till formuläret för comments i WordPress
• Bästa praxis för design av Contact Form Page (med exempel)
• Så här använder du Contact Form för att utöka din email list i WordPress
• Så här addar du en Contact Form popup i WordPress
• Hur man embedar en Google Map i Contact Forms (med Map Pin)
• Så här skapar du flerspråkiga formulär i WordPress

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.