Vill du skapa ett gratis kontaktformulär för Elementor? Ett kontaktformulär gör att dina besökare kan komma i kontakt även om de inte känner till din e-postadress.
I den här handledningen visar vi dig det bästa sättet att lägga till ett kontaktformulär på din Elementor-sida. Det här alternativet fungerar utmärkt med alla versioner av Elementor och är helt “kodfritt”!
Hur skapar jag ett Elementor-kontaktformulär?
Det enklaste sättet att ställa in ett Elementor-kontaktformulär är med WPForms-plugin.
WPForms är den bästa formbyggaren för WordPress. Det är perfekt för Elementors webbplatser eftersom det integreras sömlöst med Elementors sidbyggare.
Det betyder att du kan skapa en Elementor “kontakta oss”-sida med bara några få klick.
För att lägga till ett kontaktformulär med Elementor kan du använda gratisplugin WPForms eller uppgradera till betalversionen för att få många fler funktioner.
Pro-versionen av WPForms formulärbyggarplugin låter dig:
Om du vill veta exakt vad du får i varje version kan du lära dig skillnaderna mellan WPForms Lite och Pro.
Låt oss nu gå vidare och gå igenom processen att skapa ett kontaktformulär med WPForms och Elementor.
Hur man skapar ett gratis kontaktformulär för Elementor
Den här handledningen visar hur du skapar ett Elementor-formulär med WPForms Lite eller Pro. Det här är stegen vi kommer att följa:
- Installera WPForms Plugin
- Gör ditt Elementor-kontaktformulär
- Ställ in Elementor-formuläraviseringar
- Ställ in Elementor-formulärbekräftelsemeddelanden
- Skapa din Elementor-kontaktsida
- Publicera din Elementor-kontaktsida
Låt oss först konfigurera insticksprogrammet.
Steg 1: Installera WPForms Plugin
Det första du vill göra är att installera WPForms plugin. Om du behöver hjälp med detta, kolla in denna enkla handledning om hur du installerar ett WordPress-plugin.
Nu när WPForms är installerat, se till att klicka på Aktivera knapp. Om du använder WPForms Lite kan du klicka på Aktivera på instickssidan för att komma igång.
Och om Elementor-sidbyggaren redan är installerad är du redo att skapa ditt första kontaktformulär (på mindre än 5 minuter!).
Steg 2: Skapa ditt Elementor-kontaktformulär
Den enkla kontaktformulärmallen har alla fält du behöver för att ta emot meddelanden från din webbplats. Om du vill kan du lägga till ytterligare funktioner som rullgardinsmenyer och kryssrutor i den lättanvända formulärbyggaren.
Först, på inställningsskärmen för WPForms, skriv ett namn för ditt formulär högst upp.
Scrolla ner lite så ser du formulärmallarna.
Om du har WPForms Lite har du några mallar att välja mellan för att komma igång. Uppgradera till Pro om du vill lägga till 100+ ytterligare formulärmallar på din webbplats!
För nu, låt oss använda Enkelt kontaktformulär mall. Klicka på den för att öppna den i din webbläsare.
Nu när du har valt en mall öppnas WPForms-byggaren.
WPForms användargränssnitt är designat för att vara mycket lätt att använda för alla. Till vänster kan du se alla fält som finns att lägga till i ditt kontaktformulär. Till höger kan du se en liveförhandsvisning av ditt formulär.
Om du vill anpassa mallen, dra helt enkelt valfritt formulärfält från den vänstra panelen till det högra formuläret. Du kan lägga till rullgardinslistor, flervalsfrågor och mer.
Du kan också dra fält upp och ned för att flytta dem på ditt formulär.
Om du vill öppna fältinställningarna klickar du på fältet en gång i byggaren. När du tittar på panelen till vänster ser du inställningarna bredvid formulärförhandsgranskningen.
Gå vidare och klicka på varje fält för att ställa in det som du vill. Klicka på när du är klar Spara överst.
Steg 3: Ställ in Elementor-formuläraviseringar
Låt oss nu granska meddelandena som kommer att skickas när formuläret skickas. Klicka på i formulärbyggaren inställningaroch klicka sedan på Aviseringar menyalternativet till vänster.
Till höger kan du se e-postmeddelandet som kommer att skickas till dig när ditt formulär skickas. Du kan anpassa e-postmeddelandet här om du vill.
Har du märkt att e-postmeddelandet kommer att skickas till {admin_email}? Det är en platshållare för admin-e-postadressen i WordPress.
Du kan ta bort {admin_email} och ange företagets e-postadress här, eller ändra admin-e-postadressen i WordPress om den är fel.
Steg 4: Ställ in Elementor-formulärbekräftelsemeddelanden
Klicka sedan Bekräftelser. På den här skärmen kan vi anpassa meddelandet som visas i gränssnittet när formuläret skickas.
Detta är valfritt, så du kan lämna standardmeddelandet om du är nöjd med det.
Och det är! Det är dags att klicka på Spara knappen längst upp. Du kan stänga formulärbyggaren genom att klicka på x längst upp till höger i formulärbyggarfönstret.
Bra jobbat! Ditt Elementor-formulär är klart och vi behöver bara en plats att lägga det på.
Steg 5: Skapa din Elementor-kontaktsida
I det här steget kommer vi att skapa en anpassad kontaktsida för din Elementor-webbplats.
Från WordPress-instrumentpanelen klickar du Sidor och klicka på Lägg till ny knapp.
Fortsätt och skriv din titel överst.
Låt oss nu byta till Elementor. Klicka på den blå Redigera med Elementor högst upp på skärmen.
Vänta några sekunder tills Elementor laddas i din webbläsare.
Till vänster ser du olika element som du kan lägga till på din sida. I det Grundläggande avsnitt kommer du att se en ikon märkt WPForms.
Gå vidare och dra den till din sida och klicka sedan på rullgardinsmenyn för att välja formuläret du just skapade.
Bra jobbat! Och vi slutar använda formulärbyggaren. Allt vi behöver göra nu är att publicera kontaktsidan.
Steg 6: Publicera din Elementor-kontaktsida
Undrar du hur man lägger till en kontaktformulärsida med Elementor?
Det är enkelt: du kan publicera din kontaktsida på exakt samma sätt som du publicerar vanliga sidor i Elementor.
Allt du behöver göra är att klicka på den gröna Posta knappen längst ner.
Klicka slutligen Ta en titt för att se ditt kontaktformulär på din webbplats.
Och det är! Din Elementors kontaktsida är uppe och redo att ta emot svar.
Anpassa dina Elementors kontaktformulär
Så nu när du vet allt om den fantastiska Elementor-widgeten som WPForms har, kan du kolla in några av de andra sakerna som pluginet kan göra för att hjälpa din webbplats formulär.
Om du vill anpassa ditt formulär låter WPForms dig enkelt ändra textfärg, typografi och bakgrundsfärg med CSS.
För mer information, kolla in dessa artiklar om kontaktformulärdesign och styling:
Och det är! Nu vet du hur du gör Elementors kontaktformulär enkla.
Utforska sedan funktionerna i WPForms Pro för att lära dig hur du skapar avancerade formulär som:
Åtgärda e-postmeddelanden med Elementor Kontaktformulär
Har du problem med att ta emot Elementors kontaktformulär via e-post? Det är enkelt att fixa detta så att du alltid får dina e-postaviseringar.
Kolla in den här guiden för att fixa Elementors kontaktformulär som inte skickar e-post.
Glöm inte! Nu när du har skapat ett Elementor-formulär vill du också skapa ett formulär som ansluter till din favorittjänst för e-postmarknadsföring. Du kan enkelt göra detta i WPForms Pro, som kommer med plugins för:
Redo att bygga din form? Kom igång idag med det enklaste WordPress kontaktformulärplugin. WPForms Pro inkluderar massor av premiumplugins och erbjuder en 14-dagars pengarna-tillbaka-garanti.
Om den här artikeln hjälpte dig, följ oss på Facebook och Twitter för fler gratis WordPress-guider och handledningar.
