Lag og utform skjemaer med Elementor Form-widget

Hver nettside må inneholde et kontaktskjema! Kontaktskjemaer er nyttige for en rekke formål, uansett hvilken type nettside du har. De kan generere potensielle kunder, bygge forbindelser og relasjoner, tillate brukere å rapportere problemer med nettstedet ditt, og alt i mellom.

Det er ikke nødvendig å være teknisk ekspert for å lage kontaktskjemaer i WordPress. Elementor-sidebyggeren gjør det enklere enn noen gang å lage vakre nettsteder.

For å demonstrere hvordan du oppretter kontaktskjemaer med Elementor, går vi gjennom de forskjellige alternativene og alt som er å vite om kontaktskjemaer i Elementor.

Elementor har inkludert en skjemawidget i en stund nå, noe som betyr at du ikke lenger trenger å gå noe annet sted for å lage skjemaer for WordPress-nettstedet ditt, noe som er en velsignelse!

Tidligere kan du ha støtt på problemer når du oppretter skjemaer med noen av de tilgjengelige plugin . Prosessen med å designe og konfigurere skjemaer kan være tidkrevende og frustrerende. Heldigvis for oss alle er Elementor Form-widgeten enkel å jobbe med den.

Før vi begynner med Elementor-skjemabyggeren, la oss ta en rask titt på noen av de viktigste funksjonene.

En av de mest karakteristiske funksjonene, for det første, er at den er fullt integrert i Elementor-grensesnittet, noe som betyr at du har tilgang til mange design/stil/layout-alternativer tilgjengelig i Elementor. Jeg tror ikke du vil finne en frittstående plugin med et designsystem som er like robust som dette.

Derfra kan du opprette opptil 18 forskjellige typer felt:

  • Tekst E-post Tekstområde Tekstområde
  • URL og telefonnummer er som følger:
  • Radioknapper er en type alternativknapp.
  • Velg fra en liste (rullegardin)
  • Avmerkingsbokser brukes i sjekklister.
  • Det er bare én avmerkingsboks (godkjenning)
  • reCAPTCHA
  • Honeypots er en type beholder som inneholder honning (forhindrer spam)

Du kan også dele opp skjemaene dine på flere sider for å lage flertrinnsskjemaer, gunstig for langformatapplikasjoner.

Elementor Pro har over 12 integrasjoner med populære e-postmarkedsføringstjenester og styringssystemer for kunderelasjoner for å hjelpe deg med å få mest mulig ut av skjemaene dine. Det er også en catchall Zapier-integrasjon som lar deg koble til et av de tusenvis av verktøyene som er tilgjengelige på Zapier-plattformen hvis verktøyet ditt ikke er oppført.

Det er noen andre spennende alternativer også. For amp , når noen fyller ut skjemaet ditt, kan du motta varsler via Slack eller Discord.

Når vi snakker om varsler, kan du også tilpasse e-postvarslene du mottar og e-postvarslene som skjemainnsendere mottar. Etter at de har sendt inn skjemaet, kan du omdirigere dem til en tilpasset takkeside som du oppretter.

Hva er den beste måten å lage et skjema på i Elementor?

Vi begynner med å åpne Elementor-editoren og deretter dra og slippe skjemawidgeten til stedet der vi vil bygge skjemaet vårt.

Hvordan lage et Elementor-skjema

Som alt annet i Elementor, utføres prosessen med å lage skjemaer visuelt. Det er ikke nødvendig å bruke en ekstra plugin , og det er heller ikke nødvendig å fungere som backend av nettstedet ditt.

Danne Elementor-elementer på en strukturert måte

Når skjemaet ditt er på plass, er det første trinnet å organisere informasjonen i det. Hvilke felt trenger du, og hvilke typer felt skal de være? Hva ser du etter?

Når du arbeider i Elementor-editoren, legges skjemafelt til og redigeres fra fanen Innhold. Som du kan se i amp nedenfor, inkluderer skjemaer noen få standardfelt. Ved å velge Legg til element fra rullegardinmenyen, kan du opprette nye felt.

Du kan også duplisere et felt ved å velge ikonet som ser ut som to dokumenter, det ene foran det andre, og klikke på det. 

Typer felt i et skjema

Mange skjemafelttyper er tilgjengelige, alt fra enkle tekstfelt til passord, ReCaptcha- og honeypot-felt.

For å endre oppførselen til et skjemafelt, velg først feltet og lik deretter Type-rullegardinmenyen for å se de tilgjengelige forskjellige felttypene.

Typer felt i en elementorform

Bredden på en Form-kolonne

Denne funksjonen lar deg bruke to skjemafelt på samme linje ved å justere innstillingen for kolonnebredde. Endre bredden på vinduet ved å velge det fra rullegardinvelgeren og velge 50 prosent. Det er verdt å merke seg at hvis du gjør dette med to påfølgende skjemafelt, vil du legge merke til at de vises på samme linje sammen.

Skjemaer i Elementor for Styling

Stil skjemaene dine i Elementor på samme måte som du stiler andre widgets ved å navigere til stilpanelet i Elementor-redigeringsgrensesnittet.

Selve skjemaet, feltene, knappene, eventuelle trinn, feilmeldinger og bekreftelsesmeldinger kan tilpasses.

For de som allerede er kjent med Elementor, er det ikke mye mer de trenger å lære i styling av Elementor Forms.

Handlinger på et skjema

Etter diskusjonen vår om å lage et skjema i Elementor, la oss se på konfigurering av hva som skjer etter at skjemaet er sendt inn; dette oppnås gjennom skjemahandlinger, eller som de refereres til i Elementor, handlinger etter innsending.

Når et skjema sendes inn, er det vanlig at systemet sender en e-post og omdirigerer brukeren til en annen nettside. Du kan selvfølgelig inkludere så mange handlinger du vil på skjemaene dine og kombinere dem på hvilken som helst måte du vil. Som du kanskje forventer, er det et spesifikt velgerfelt uten koding involvert.

Hver av handlingene du legger til vil vises som et eget fanealternativ på hovedmenyen. Vi har for øyeblikket et fanealternativ for e-post, men hvis jeg skulle inkludere en omdirigering i feltet Legg til handling, ville jeg også se Redirect i fanealternativene mine, som vist i amp nedenfor.

Avslutningsvis skal jeg demonstrere hvordan du konfigurerer skjemaet til å godta innsendinger via e-post, det mest vanlige spørsmålet om skjemaer.

Når du velger E-post fra Innhold-fanen i redigeringsprogrammet, vil du bli presentert med skjermen vist nedenfor; Det er her du kan tilpasse fra-e-posten og svar-e-posten, og du kan også legge til en CC eller BCC til alle som skal motta en kopi av innsendingene fra skjemaet.

Opprette en meldingsmal for kontaktskjema i Elementor

Mange mennesker er overrasket over å høre at Elementors skjemaredigering er kraftigere enn det ser ut ved første øyekast, og en av de mer avanserte funksjonene er muligheten til å tilpasse meldingene for hvert skjema.

Det er mulig å tilpasse skjemameldingene for å gi en mer personlig tilbakemeldingsprosess til sluttbrukeren som har fylt ut skjemaet ditt, i stedet for å høres ut som en kjedelig robot. Men spesifikt, hvilke meldinger kan du tilpasse for Elementor-kontaktskjemaet ditt er som følger:

For å begynne må du først aktivere tilpasset meldinger ved å velge "Tilleggsalternativer" fra rullegardinmenyen og deretter bytte bryteren for "Egendefinerte meldinger" til "Ja."

Elementor kontaktskjema-widgettilpasning ved å legge til egendefinerte meldinger

Som du kan se, er det fire forskjellige meldinger du kan tilpasse, inkludert de som er oppført nedenfor:

En suksessmelding vises til en sluttbruker etter å ha sendt inn skjemaet og bekreftet at skjemaet var riktig fylt ut (f.eks. ingen manglende obligatoriske felt osv.).

Feilmelding – en melding som vises til sluttbrukeren når en ukjent feil oppstår under innsending av skjemaet.

Nødvendig melding — vises når et obligatorisk skjemafelt ikke er fylt ut, skjemaet sendes inn og skjemaet ikke er utfylt.

Når noe i skjemainnsendingen er feil og ikke kan sendes, vises meldingen Ugyldig melding til sluttbrukeren.

Å kunne redigere meldingene lar deg være kreativ og sære, eller mer formell og forretningsmessig hvis du driver en bedriftsside. Det beste er at de er fullstendig redigerbare, så du kan gjøre hva du vil!

Konklusjon

Elementor-skjema-widget, det er enkelt å lage et kontaktskjema. Den kommer med en intuitiv dra-og-slipp kontaktskjemabygger og en mengde tilpasningsalternativer som skiller den fra de andre plugin som er tilgjengelige på markedet. Du kan enkelt tilpasse stylingen og fargevalget for å matche utseendet og følelsen til din bedrift. Også inkludert er forskjellige andre attraktive widgets, mer enn 300+ profesjonelle maler og en popup-bygger i en praktisk pakke. Denne fullverdige WordPress-sidebyggeren består av alle nødvendige widgets og funksjoner, slik at du ikke trenger å kjøpe flere sidebyggere for å tilpasse nettstedet ditt ytterligere. Videre gir det mulighet for integrering av mer enn 30 markedsføringstjenester, som er grunnen til at det er en av de mest populært kjøpte plugin på markedet i dag.

Hanson F.

Siste innlegg

Slik bruker du topptekst og bunntekst med Elementor

Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjon...

6. januar 2022

WordPress-temasammenligning: Astra vs OceanWP

To av de mest populære WordPress-temaene på markedet er Astra og OceanWP. Profesjonell…

2. januar 2022

WordPress nyhetstema sammenligning: Avis vs. Astra

Å lage et utmerket nyhetsnettsted krever ikke at du blir webdesigner. Vi…

25. oktober 2021

Lag en nyhetsrelatert nettside med avis-tema

Avis-temaet er et av de viktigste WordPress-temaene designet av tagDiv, en...

18. oktober 2021

Hvordan bygge en e-handel med Avada WooCommerce-bygger

Når det gjelder å sette opp en nettbutikk, er WooCommerce go-to- plugin . Den…

4. oktober 2021

Hvordan bruke klebrig overskrift og rulleeffekter med Elementor

En overskrift er vanligvis det første en person ser når de besøker nettstedet ditt,...

21. september 2021