Opret og design formularer med Elementor Form-widget

Hver hjemmeside skal indeholde en kontaktformular! Kontaktformularer er nyttige til en række formål, uanset hvilken type hjemmeside du har. De kan generere kundeemner, opbygge forbindelser og relationer, give brugerne mulighed for at rapportere problemer med dit websted og alt derimellem.

Det er ikke nødvendigt at være teknisk ekspert for at oprette kontaktformularer i WordPress. Elementor-sidebyggeren gør det nemmere end nogensinde før at skabe smukke hjemmesider.

For at demonstrere, hvordan man opretter kontaktformularer med Elementor, gennemgår vi de forskellige muligheder og alt, hvad der er at vide om kontaktformularer i Elementor.

Elementor har inkluderet en formular-widget i et stykke tid nu, hvilket betyder, at du ikke længere behøver at gå andre steder hen for at oprette formularer til dit WordPress-websted, hvilket er en velsignelse!

Tidligere har du muligvis stødt på problemer med at oprette formularer med nogle af plugin tilgængelige. Processen med at designe og konfigurere formularer kan være tidskrævende og frustrerende. Heldigvis for os alle er Elementor Form-widgetten ligetil at arbejde med den.

Før vi går i gang med Elementor-formularbyggeren, lad os tage et hurtigt kig på nogle af dets mest væsentlige funktioner.

En af de mest karakteristiske funktioner, for det første, er, at den er fuldt integreret i Elementor-grænsefladen, hvilket betyder, at du har adgang til mange design/stil/layout-muligheder, der er tilgængelige i Elementor. Jeg tror ikke, du vil finde et selvstændigt formular- plugin med et designsystem, der er lige så robust som dette.

Derfra kan du oprette op til 18 forskellige typer felter:

  • Tekst E-mail Tekstområde Tekstområde
  • URL og telefonnummer er som følger:
  • Radioknapper er en type radioknap.
  • Vælg fra en liste (rullemenu)
  • Afkrydsningsfelter bruges i tjeklister.
  • Der er kun ét afkrydsningsfelt (accept)
  • reCAPTCHA
  • Honeypots er en type beholder, der rummer honning (forhindrer spam)

Du kan også opdele dine formularer i flere sider for at oprette formularer i flere trin, hvilket er gavnligt for applikationer med lang format.

Elementor Pro har over 12 integrationer med populære e-mail-marketingtjenester og systemer til administration af kunderelationer for at hjælpe dig med at få mest muligt ud af dine formularer. Der er også en catchall Zapier-integration, der giver dig mulighed for at oprette forbindelse til et hvilket som helst af de tusindvis af værktøjer, der er tilgængelige på Zapier-platformen, hvis dit værktøj ikke er på listen.

Der er også et par andre spændende alternativer. For amp , når nogen udfylder din formular, kan du modtage meddelelser via Slack eller Discord.

Når vi taler om meddelelser, kan du også tilpasse de e-mail-meddelelser, du modtager, og de e-mail-meddelelser, som indsendere af formularer modtager. Når de har indsendt formularen, kan du omdirigere dem til en tilpasset takkeside, som du opretter.

Hvad er den bedste måde at oprette en formular på i Elementor?

Vi begynder med at åbne Elementor-editoren og derefter trække og slippe formularwidgetten til det sted, hvor vi vil bygge vores formular.

Sådan opretter du en Elementor-formular

Som alt andet i Elementor udføres processen med at oprette formularer visuelt. Det er ikke nødvendigt at bruge et ekstra plugin , og det er heller ikke nødvendigt at fungere som backend på din hjemmeside.

Dannelse af Elementor-elementer på en struktureret måde

Når først din formular er på plads, er det første skridt at organisere informationen i den. Hvilke felter har du brug for, og hvilke typer felter skal de være? Hvad leder du efter?

Når du arbejder i Elementor-editoren, tilføjes og redigeres formularfelter fra fanen Indhold. Som du kan se i amp nedenfor, indeholder formularer nogle få standardfelter. Ved at vælge Tilføj element i rullemenuen kan du oprette nye felter.

Duplikere et felt er også muligt ved at vælge ikonet, der ligner to dokumenter, det ene foran det andet, og klikke på det. 

Typer af felter i en formular

Mange formularfelttyper er tilgængelige, lige fra simple tekstfelter til adgangskoder, ReCaptcha- og honeypot-felter.

For at ændre adfærden af ​​et formularfelt skal du først vælge feltet og derefter like rullemenuen Type for at se de tilgængelige forskellige felttyper.

Typer af felter i en elementorform

Bredden af ​​en formularkolonne

Denne funktion giver dig mulighed for at bruge to formularfelter på samme linje ved at justere indstillingen for kolonnebredde. Skift bredden af ​​vinduet ved at vælge det fra rullemenuen og vælge 50 procent. Det er værd at bemærke, at hvis du gør dette med to på hinanden følgende formularfelter, vil du bemærke, at de vises på samme linje sammen.

Formularer i Elementor til Styling

Stil dine formularer i Elementor på samme måde, som du stiler andre widgets ved at navigere til Style-panelet i Elementor-redigeringsgrænsefladen.

Selve formularen, felterne, knapperne, eventuelle trin, fejlmeddelelser og bekræftelsesmeddelelser kan alle tilpasses.

For dem, der allerede er bekendt med Elementor, er der ikke meget mere, de behøver at lære i styling af Elementor Forms.

Handlinger på en formular

Efter vores diskussion om oprettelse af en formular i Elementor, lad os se på at konfigurere, hvad der sker efter din formular er indsendt; dette opnås gennem formularhandlinger, eller som de omtales i Elementor, Actions After Submit.

Når en formular indsendes, er det almindeligt, at systemet sender en e-mail og omdirigerer brugeren til en anden webside. Du kan selvfølgelig inkludere så mange handlinger som du vil på dine formularer og kombinere dem på den måde du vil. Som du kunne forvente, er der et specifikt vælgerfelt uden kodning involveret.

Hver af de handlinger, du tilføjer, vises som en separat faneindstilling i hovedmenuen. Vi har i øjeblikket en fanemulighed for e-mail, men hvis jeg skulle inkludere en omdirigering i Tilføj handlingsfeltet, ville jeg også se Redirect i mine faneindstillinger, som vist i amp nedenfor.

Afslutningsvis vil jeg demonstrere, hvordan du konfigurerer formularen til at acceptere indsendelser via e-mail, det hyppigst stillede spørgsmål om formularer.

Når du vælger E-mail fra fanen Indhold i editoren, vil du blive præsenteret for skærmen vist nedenfor; det er her, du kan tilpasse fra-e-mailen og svar-e-mailen, og du kan også tilføje en CC eller BCC til alle, der skal modtage en kopi af indsendelserne fra formularen.

Oprettelse af en kontaktformularbeskedskabelon i Elementor

Mange mennesker er overraskede over at erfare, at Elementors formulareditor er mere kraftfuld, end den ser ud ved første øjekast, og en af ​​de mere avancerede funktioner er muligheden for at tilpasse meddelelserne til hver formular.

Det er muligt at tilpasse formularmeddelelserne for at give en mere personlig feedbackproces til slutbrugeren, der har udfyldt din formular, i stedet for at lyde som en kedelig robot. Men specifikt, hvilke beskeder kan du tilpasse til din Elementor-kontaktformular er som følger:

For at begynde skal du først aktivere brugerdefineret meddelelser ved at vælge "Yderligere indstillinger" fra rullemenuen og derefter skifte kontakten for "Brugerdefineret meddelelser" til "Ja."

Tilpasning af Elementor kontaktformularwidget ved at tilføje brugerdefinerede beskeder

Som du kan se, er der fire forskellige beskeder, som du kan tilpasse, inklusive dem, der er anført nedenfor:

En succesmeddelelse vises til en slutbruger efter indsendelse af formularen og bekræftelse af, at formularen var korrekt udfyldt (f.eks. ingen manglende obligatoriske felter osv.).

Fejlmeddelelse — en meddelelse, der vises til slutbrugeren, når der opstår en ukendt fejl under indsendelsen af ​​formularen.

Påkrævet meddelelse — vises, når et påkrævet formularfelt ikke er udfyldt, formularen indsendes, og formularen ikke er udfyldt.

Når noget i formularens indsendelse er forkert og ikke kan sendes, vises meddelelsen Ugyldig meddelelse til slutbrugeren.

At være i stand til at redigere beskederne giver dig mulighed for at være kreativ og finurlig, eller mere formel og forretningsmæssig, hvis du driver en virksomhedsside. Det bedste er, at de er fuldstændig redigerbare, så du kan gøre, hvad du vil!

Konklusion

Elementor form widget, det er nemt at konstruere en kontaktformular. Den kommer med en intuitiv træk-og-slip kontaktformularbygger og et væld af tilpasningsmuligheder, der adskiller det fra de andre plugin , der er tilgængelige på markedet. Du kan nemt tilpasse dens styling og farveskema til at matche udseendet og følelsen af ​​din virksomhed. Også inkluderet er forskellige andre attraktive widgets, mere end 300+ professionelle skabeloner og en pop-up builder i én praktisk pakke. Denne fuldt udstyret WordPress-sidebygger består af alle de nødvendige widgets og funktioner, så du ikke behøver at købe yderligere sidebyggere for at tilpasse dit websted yderligere. Ydermere giver det mulighed for integration af mere end 30 marketingtjenester, hvorfor det er et af de mest populært købte plugin på markedet i dag.

Hanson F.

Seneste indlæg

Sådan bruger du sidehoveder og sidefødder med Elementor

Et websteds sidehoveder og sidefødder er væsentlige elementer. I de fleste tilfælde giver overskriften navigation...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To af de mest populære WordPress-temaer på markedet er Astra og OceanWP. Professionel…

2. januar 2022

WordPress nyhedstema sammenligning: Avis vs. Astra

Oprettelse af et fremragende nyhedswebsted kræver ikke, at du bliver webdesigner. Vi…

25. oktober 2021

Opret en nyhedsrelateret hjemmeside med Avis-tema

Avis-temaet er et af de mest betydningsfulde WordPress-temaer designet af tagDiv, en...

18. oktober 2021

Sådan bygger du en e-handel med Avada WooCommerce builder

Når det kommer til at oprette en online butik, er WooCommerce det perfekte plugin . Det…

4. oktober 2021

Sådan bruger du sticky header og rulleeffekter med Elementor

En header er generelt det første, en person ser, når de besøger dit websted,...

21. september 2021