Hvordan lage et WordPress-skjema med en datavelger

hvordan lage et wordpress-skjema med en datavelger


Ønsker du å legge en datovelger til kontaktskjemaet ditt? En datavelger er nødvendig når du vil at brukerne skal velge en dato og klokkeslett i skjemaet.

I denne artikkelen vil vi dele hvordan du oppretter et WordPress-skjema med en datavelger.

Når og hvorfor du bør legge til en datovelger i WordPress-skjemaer?

Mange kontaktskjemaer har enkle felt som navn, e-post, telefon og melding. Denne informasjonen er nok til å få forbindelse med brukerne dine. Hvis du imidlertid vil planlegge en avtale med brukerne dine, må du legge til en datavelger på skjemaet ditt.

Hvis du driver en eCommerce-butikk og ønsker at klienter skal legge til tilgjengelighetsdatoen for levering, kan du legge til et dato- og tidsfelt i kontakt- eller bestillingsskjemaet.

Det er mange andre grunner til at du må be brukerne dine om å sende inn dato og tid med grunnleggende informasjon. La oss se på hvordan du enkelt kan lage et WordPress-skjema med en datavelger.

Opprette et WordPress-skjema med en datavelger

Det første du trenger å gjøre er å installere og aktivere WPForms plugg inn. For mer informasjon, se vår trinnvise guide for hvordan du installerer en WordPress-plugin.

Etter aktivering, må du gå til WPForms »Legg til nytt side for å opprette et skjema i WordPress. Den starter WPForms-oppsettskjermbildet der du finner flere forhåndsbygde maler for enkelt å lage en ny form du ønsker. Du kan også velge et blankt skjema for å starte helt fra bunnen av.

For å komme i gang, velger vi Enkelt kontaktskjema mal.

Lag en ny form

Et enkelt kontaktskjema lastes inn med grunnleggende feltnavn, e-post, kommentar osv. Du kan se flere felt på venstre side og en forhåndsvisning av det nye skjemaet på høyre side av skjermen. Bare dra og slipp et hvilket som helst felt fra venstre side til det nye skjemaet på høyre side.

Siden du vil legge til en datovelger, må du dra og slippe den Dato tid felt fra venstre kolonne på skjemaet ditt. Du kan plassere datovelgeren over eller under hvilket som helst felt på WordPress-skjemaet.

Dra og slipp datovelgerfelt

Skjemaet er fullt fleksibelt, noe som betyr at du enkelt kan omorganisere rekkefølgen på feltene eller tilpasse hvilket som helst felt fra forhåndsvisningsdelen av skjemaet på høyre side.

Endre feltrekkefølge

Når du klikker på et hvilket som helst felt i forhåndsvisningen av skjemaet, vil det vise innstillingene på venstre side for det spesifikke feltet. Hvis du for eksempel klikker på Dato tid -feltet du nettopp la til skjemaet ditt, så ser du disse innstillingene for å tilpasse:

  • Merkelapp: Det er tittelen på feltet Date / Time i skjemaet ditt.
  • Format: I denne rullegardinmenyen kan du velge et format for dato, klokkeslett eller begge deler.
  • Beskrivelse: Den lar deg legge til instruksjoner for brukere under feltet.
  • nødvendig: Hvis du merker av for dette alternativet, kan ikke en bruker sende inn skjemaet uten å velge en dato / tid i dette feltet.

Bortsett fra disse grunnleggende innstillingene, er det avanserte alternativer for å tilpasse design og stil på datoen / klokkeslettet.

Innstillinger for skjemafelt

Få av de avanserte alternativene inkluderer:

  • Feltstørrelse: Det er forskjellige visningsstørrelser tilgjengelig for dato / klokkeslettet.
  • Dato: Det er en plassholder. Teksten du vil legge til her, vises som standard for brukerne. Ved siden av kan du også velge format for datoen.
  • Type: Du kan velge en type for datavelgeren. Det er to typer: Datovelger og Dato dropdown
  • Tid: Dette er en annen plassholder for tid. Du kan også trenge å velge et format fra 12 eller 24 timer.

Det er mange andre tilpassede innstillinger som intervall, skjul etiketter og mer.

Avanserte instillinger

Du bør også sjekke ut denne guiden på hvordan du legger til tilpasset CSS i skjemaet for mer detaljerte instruksjoner.

Sørg for å klikke på Lagre -knappen for å lagre endringene dine.

Innstillinger for bekreftelse og varsler

Når du er fornøyd med feltene, må du administrere bekreftelsesinnstillingene og e-postvarslene for skjemaet ditt. Bare besøk Innstillinger »Bekreftelse siden i WPForms-byggherren. Derfra kan du legge til en tilpasset melding for brukerne dine som de vil motta etter at du har sendt skjemaet. Du kan også endre bekreftelsestypen for å omdirigere brukere til en takkeside.

Innstillinger for skjemabekreftelse

Etter det kan du gå til Innstillinger »Varsler side for å administrere e-postvarsler for skjemainnleveringer. Du kan også sende flere varsler på forskjellige e-postadresser. Sjekk ut denne guiden på hvordan lage flere varsler i WPForms.

For avanserte innstillinger, kan du legge til betinget logikk i skjemaet ditt for å sende spesifikke varsler til brukere. Lære hvordan lage varslinger om betinget form i WordPress-skjemaer.

Til slutt må du klikke på Lagre for å se kontaktskjemaet ditt i aksjon.

Vis skjemaet på ditt WordPress-nettsted

Du kan enkelt legge til kontaktskjemaet i WordPress-sidene, innleggene, sidefeltene og andre widget-områder.

Hvis du vil legge til skjemaet på en side, må du gå til Sider »Legg til nytt i WordPress. Bare klikk på knappen Legg til skjema over tekstredigereren.

Legg til skjema på siden

En popup vises der du kan velge skjemaet du har laget. Etter å ha valgt riktig skjema, klikk på Legg til skjema knapp. Denne prosessen er den samme for WordPress-innleggene. Publiser siden / innlegget for å se kontaktskjemaet med datovelgeren på ditt WordPress-nettsted.

WordPress-skjema med datovelger

Hvis du imidlertid vil legge til skjemaet i sidefeltet eller et annet widgetisert område, kan du gå til Utseende »Widgets for å dra og slippe WPForms-widgeten i sidefeltet. I widgetens innstillinger kan du velge skjemaet du opprettet ovenfor, og klikke på Lagre knapp.

Det er alt. Vi håper denne artikkelen hjalp deg med å lære hvordan du lager et WordPress-skjema med en datavelger. Det kan også være lurt å se guiden vår om hvordan du oppretter et skjema for filopplasting i WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map