Skapa och designa formulär med Elementor Form-widget

Varje webbplats måste innehålla ett kontaktformulär! Kontaktformulär är användbara för en mängd olika ändamål, oavsett vilken typ av webbplats du har. De kan generera leads, bygga kontakter och relationer, tillåta användare att rapportera problem med din webbplats och allt däremellan.

Det är inte nödvändigt att vara en teknisk expert för att skapa kontaktformulär i WordPress. Elementors sidbyggare gör det enklare än någonsin att skapa vackra webbplatser.

För att visa hur man skapar kontaktformulär med Elementor går vi igenom de olika alternativen och allt som finns att veta om kontaktformulär i Elementor.

Elementor har inkluderat en Formulär-widget ganska länge nu, vilket innebär att du inte längre behöver gå någon annanstans för att skapa Formulär för din WordPress-webbplats, vilket är en välsignelse!

Tidigare kan du ha stött på svårigheter när du skapar formulär med några av plugin tillgängliga. Processen att designa och konfigurera formulär kan vara tidskrävande och frustrerande. Lyckligtvis för oss alla är Elementor Form-widgeten enkel att arbeta med den.

Innan vi börjar med Elementor-formulärbyggaren, låt oss ta en snabb titt på några av dess viktigaste funktioner.

En av de mest utmärkande funktionerna, till att börja med, är att den är helt integrerad i Elementor-gränssnittet, vilket innebär att du har tillgång till många design/stil/layout-alternativ som finns i Elementor. Jag tror inte att du kommer att hitta ett fristående plugin med ett designsystem som är lika robust som det här.

Därifrån kan du skapa upp till 18 olika typer av fält:

  • Text E-post Textområde Textområde
  • URL och telefonnummer är följande:
  • Radioknappar är en typ av radioknapp.
  • Välj från en lista (rullgardinsmeny)
  • Kryssrutor används i checklistor.
  • Det finns bara en kryssruta (acceptans)
  • reCAPTCHA
  • Honungskrukor är en typ av behållare som innehåller honung (förhindrar skräppost)

Du kan också dela upp dina formulär på flera sidor för att skapa flerstegsformulär, vilket är fördelaktigt för långa applikationer.

Elementor Pro har över 12 integrationer med populära e-postmarknadsföringstjänster och kundrelationshanteringssystem för att hjälpa dig att få ut det mesta av dina formulär. Det finns också en catchall Zapier-integration som gör att du kan ansluta till något av de tusentals verktyg som finns på Zapier-plattformen om ditt verktyg inte finns med i listan.

Det finns några andra spännande alternativ också. Till amp , när någon fyller i ditt formulär kan du få meddelanden via Slack eller Discord.

På tal om aviseringar, kan du också anpassa e-postmeddelandena som du får och e-postmeddelanden som formulärinlämnare får. När de har skickat in formuläret kan du omdirigera dem till en anpassad tacksida som du skapar.

Vad är det bästa sättet att skapa ett formulär i Elementor?

Vi börjar med att öppna Elementor-redigeraren och sedan dra och släppa formulärwidgeten till den plats där vi vill bygga vårt formulär.

Hur man skapar en Elementor Form

Precis som allt annat i Elementor utförs processen att skapa formulär visuellt. Det är inte nödvändigt att använda ett extra plugin , och det är inte heller nödvändigt att fungera som backend för din webbplats.

Att bilda elementorelement på ett strukturerat sätt

När ditt formulär är på plats är det första steget att organisera informationen i den. Vilka fält behöver du, och vilka typer av fält ska de vara? Vad letar du efter?

När du arbetar i Elementor-redigeraren läggs formulärfält till och redigeras från fliken Innehåll. Som du kan se i amp nedan innehåller formulär några standardfält. Genom att välja Lägg till objekt från rullgardinsmenyn kan du skapa nya fält.

Det är också möjligt att duplicera ett fält genom att välja ikonen som ser ut som två dokument, det ena framför det andra, och klicka på den. 

Typer av fält i ett formulär

Många formulärfältstyper är tillgängliga, allt från enkla textfält till lösenord, ReCaptcha och honeypot-fält.

För att ändra beteendet för ett formulärfält, välj först fältet och gilla sedan rullgardinsmenyn Typ för att se de tillgängliga olika fälttyperna.

Typer av fält i en elementorform

Bredden på en formulärkolumn

Med den här funktionen kan du använda två formulärfält på samma rad genom att justera kolumnbreddsinställningen. Ändra fönstrets bredd genom att välja det från rullgardinsmenyn och välja 50 procent. Det är värt att notera att om du gör detta med två på varandra följande formulärfält, kommer du att märka att de visas på samma rad tillsammans.

Formulär i Elementor for Styling

Stil dina formulär i Elementor på samma sätt som du utformar andra widgets genom att navigera till stilpanelen som finns i Elementors redigeringsgränssnitt.

Själva formuläret, fälten, knapparna, eventuella steg, felmeddelanden och bekräftelsemeddelanden kan alla anpassas.

För de som redan är bekanta med Elementor, det finns inte mycket mer som de behöver lära sig i styling av Elementor Forms.

Åtgärder på ett formulär

Efter vår diskussion om att skapa ett formulär i Elementor, låt oss titta på att konfigurera vad som händer efter att ditt formulär har skickats; detta åstadkoms genom formuläråtgärder, eller som de hänvisas till i Elementor, Actions After Submit.

När ett formulär skickas är det vanligt att systemet skickar ett e-postmeddelande och omdirigerar användaren till en annan webbsida. Du kan naturligtvis inkludera så många åtgärder du vill på dina Formulär och kombinera dem på vilket sätt du vill. Som du kan förvänta dig finns det ett specifikt väljarfält utan kodning inblandad.

Var och en av de åtgärder du lägger till kommer att visas som ett separat flikalternativ på huvudmenyn. Vi har för närvarande ett flikalternativ för e-post, men om jag skulle inkludera en omdirigering i fältet Lägg till åtgärd, skulle jag också se Redirect i mina flikalternativ, som visas i amp nedan.

Avslutningsvis ska jag visa hur du konfigurerar formuläret för att acceptera inlämningar via e-post, den vanligaste frågan om formulär.

När du väljer E-post från fliken Innehåll i redigeraren kommer du att se skärmen nedan; det är här du kan anpassa från e-post och svarsmail, och du kan också lägga till en CC eller BCC till alla som ska få en kopia av inlämningarna från formuläret.

Skapa en meddelandemall för kontaktformulär i Elementor

Många människor är förvånade över att få veta att Elementors formulärredigerare är mer kraftfull än den verkar vid första anblicken, och en av de mer avancerade funktionerna är möjligheten att anpassa meddelandena för varje formulär.

Det är möjligt att anpassa formulärmeddelandena för att ge en mer personlig feedbackprocess till slutanvändaren som har fyllt i ditt formulär, snarare än att låta som en tråkig robot. Men specifikt, vilka meddelanden kan du anpassa för ditt Elementor-kontaktformulär är följande:

Till att börja med måste du först aktivera anpassade meddelanden genom att välja "Ytterligare alternativ" från rullgardinsmenyn och sedan växla växlingsreglaget för "Anpassade meddelanden" till "Ja".

Elementor kontaktformulär widget anpassning genom att lägga till anpassade meddelanden

Som du kan se finns det fyra olika meddelanden som du kan anpassa, inklusive de som listas nedan:

Ett framgångsmeddelande visas för en slutanvändare efter att ha skickat in formuläret och verifierat att formuläret var korrekt ifyllt (t.ex. inga obligatoriska fält saknas, etc.).

Felmeddelande — ett meddelande som visas för slutanvändaren när ett okänt fel inträffar under inlämningen av formuläret.

Obligatoriskt meddelande — visas när ett obligatoriskt formulärfält inte är ifyllt, formuläret skickas och formuläret inte är ifyllt.

När något i formulärinlämningen är felaktigt och inte kan skickas, visas meddelandet Ogiltigt meddelande för slutanvändaren.

Att kunna redigera meddelanden gör att du kan vara kreativ och udda, eller mer formell och affärsmässig om du driver en företagswebbplats. Det bästa är att de är helt redigerbara, så du kan göra vad du vill!

Slutsats

Elementor-formulärwidget, det är enkelt att skapa ett kontaktformulär. Den kommer med en intuitiv dra-och-släpp kontaktformulärbyggare och en uppsjö av anpassningsalternativ som skiljer den från de andra plugin som finns på marknaden. Du kan enkelt anpassa dess styling och färgschema för att matcha ditt företags utseende och känsla. Dessutom ingår olika andra attraktiva widgets, mer än 300+ professionella mallar och en popup-byggare i ett bekvämt paket. Denna fullfjädrade WordPress-sidbyggare består av alla nödvändiga widgets och funktioner, så du behöver inte köpa ytterligare sidbyggare för att anpassa din webbplats ytterligare. Dessutom möjliggör det integration av mer än 30 marknadsföringstjänster, vilket är anledningen till att det är ett av de mest populära plugin på marknaden idag.

Hanson F.

Senaste inlägg

Hur man använder sidhuvud och sidfot med Elementor

En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...

6 januari 2022

WordPress-temajämförelse: Astra vs OceanWP

Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…

2 januari 2022

Jämförelse av WordPress-nyhetstema: Newspaper vs. Astra

Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…

25 oktober 2021

Skapa en nyhetsrelaterad webbplats med tidningstema

The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...

18 oktober 2021

Hur man bygger en e-handel med Avada WooCommerce Builder

När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Det…

4 oktober 2021

Hur man använder sticky header och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...

21 september 2021