Vil du tilpasse et kontaktskjema 7-skjema med Elementors Essential Addons-plugin?
Kontaktskjema 7 er en av WordPress plugins av de mest populære formbyggere. Det er helt gratis, og du kan bruke det til å lage en Kontaktskjema på WordPress-nettstedet ditt.
Du kan også lage mange typer skjemaer, for eksempel et reservasjonsskjema eller et filopplastingsskjema. Den tilbyr 14 typer felt som du kan bruke mens du lager et skjema.
Se også: Slik bruker du Elementor-widgets/maler som Gutenberg-blokker
Et av de vanlige problemene med kontaktskjema 7-plugin er tilpasningsprosessen. Kontaktskjema 7 bruker standardstilen til din WordPress tema ressurs. Du kan bruke en annen stil, men CSS-ferdigheter vil være nødvendig. Hvis du ikke har noen CSS-ferdigheter, kan du bruke modulen Viktige tillegg for å style formen din.
Essential Addons er et Elementor-tillegg som forbedrer prosessen med å tilpasse Kontaktskjema 7-skjemaene dine med Elementor. Elementor og Essential Addons er freemium plugins. Du kan bruke gratisversjonene av begge for å style kontaktskjemaet 7.
Hvordan style et kontaktskjema 7-skjema med viktige tillegg
Før du begynner å style skjemaene dine, sørg for at du har installert Elementor et Viktige tillegg. Når den er installert og aktivert, oppretter du en ny side (Sider – > Legg til) og rediger den med Elementor.
Før du starter tilpasningsprosessen, angi sidelayout ved å klikke på tannhjulikonet i nedre venstre hjørne. Angi oppsettet fra rullegardinmenyen.
Legg til en ny seksjon ved å klikke på plussikonet i redigeringsboksen og dra widgeten EA-kontaktskjema 7 fra venstre panel i editoren.
Gå til venstre panel og velg skjemaet du vil tilpasse stilen til.
Etter å ha valgt et skjema, naviger til fanen Stil. Som du kan se, kan du angi flere stylingalternativer. Her er de vanlige stylingalternativene du kan angi.
- Skjemabredde, justering og bakgrunn
Under blokken FormContainerklikker du på fargevelgeren i delen Bakgrunnstype og angi ønsket farge for bakgrunnen til skjemaet. Du kan bruke enten en solid farge eller en gradientfarge som bakgrunn.
Les også: Elementor: Slik importerer eller eksporterer du maler
For å angi skjemajusteringen, velg ganske enkelt det foretrukne justeringsalternativet i delen Skjemajustering.
For å angi bredden på skjemaet, angi verdien for Maksimal bredde på skjemaet i feltet Form Maks Bredde.
- Bakgrunnsfelt, kantbredde og radius
For å definere bakgrunnen til feltene, bredden og radiusen til kantlinjen, kan du åpne seksjonen Input & Textarea. Klikk på feltfargevelgeren Bakgrunnsfarge for å angi bakgrunnen.
Du kan også angi bakgrunnsfargen til feltene i feilsøkingsmodus ved å klikke på fanen FOKUS.
For å definere bredden på feltene kan du definere verdien i feltene Inndatabredde. I denne delen kan du også angi bredden på tekstboksfeltet i Tekstområdebredde.
For å angi kantradius, bare gå til å redigere feltet Grensradius og angi grenseverdien du foretrekker. Du kan også stille inn typografien (fontfamilie, skriftstørrelse, skriftstil) ved å klikke på blyantikonet i feltet Typographie.
- etiketter
Essential Addons lar deg også tilpasse stilen til skjemaetikettene dine. Du kan angi tekstfarge så vel som typografi. For å gjøre dette, åpne alternativet etiketter. Angi tekstfargen ved å klikke på fargevelgeren i feltet Tekstfarge.
For å angi typografi, klikk på blyantikonet i feltet Typografi.
- Send inn-knapp
For å tilpasse stilen til send-knappen, åpne blokken Send Button. Herfra kan du angi knappjustering, bredde, bakgrunnsfarge, tekstfarge, kantradius samt typografi.
- Feilmelding
For å tilpasse stilen til feilmeldingen kan du åpne blokken feil. Du kan angi feilmeldingstekstfarge, typografi, valideringsfeilbakgrunnsfarge, valideringsfeiltekstfarge osv. ....
Du kan angi flere andre stilalternativer. Du kan leke med det venstre panelet til du er fornøyd med stilen på skjemaet ditt.
Du kan legge til flere andre elementer på siden din ved å bruke de tilgjengelige widgetene som tilbys av Elementor og Essential Addons. Klikk på knappen når du er ferdig PUBLISH nederst i venstre panel for å publisere siden din.
Integrering av skjemaet på en vanlig side
Etter å ha klikket på knappen PUBLISH, kontaktsiden din er i utgangspunktet publisert. Selve siden drives av Elementor. Hvis du foretrekker å legge til din Kontaktskjema 7 til en vanlig side (en side opprettet med Gutenberg, standard WordPress-editor), kan du installere plugin Elementor -blokker for Gutenberg. Dette pluginet vil konvertere en Elementor-mal til en Gutenberg-blokk.
For å registrere din Kontaktskjema 7 som en Elementor-mal, klikk på pilknappen ved siden av knappen PUBLISER / OPPDATERING på venstre panel og velg Lagre som mal.
Gi malen et navn og klikk på knappen REGISTRERE.
Opprett en ny side (Sider – > Legg til) og gi den et navn som "kontakt oss" "kontakt" eller et annet navn du liker.
Legg til en ny blokk og velg Elementor bibliotek og velg kontaktskjemamalen du nettopp opprettet.
Og nå har du nettopp tilpasset ditt Kontaktskjema 7-skjema.
Skaff deg Elementor Pro nå!!!
konklusjonen
Her! Det er det for denne artikkelen som viser deg hvordan du tilpasser et kontaktskjema 7-skjema med Essential Addons. Hvis du har noen bekymringer om hvordan du kommer deg dit, gi dem beskjed i commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
