Vil du tilpasse en kontaktformular 7-formular med Elementors Essential Addons-plugin?

Kontaktformular 7 er en af WordPress plugins af de mest populære formbyggere. Det er helt gratis, og du kan bruge det til at oprette en Kontaktformular på dit WordPress-websted.

Du kan også oprette mange typer formularer, såsom en reservationsformular eller en filoverførselsformular. Det tilbyder 14 typer felter, som du kan bruge, mens du opretter en formular.

Se også: Sådan bruger du Elementor-widgets/skabeloner som Gutenberg-blokke

Et af de almindelige problemer med kontaktformular 7 plugin er dets tilpasningsproces. Kontaktformular 7 bruger din standardstil WordPress tema aktiv. Du kan bruge en anden stil, men CSS-færdigheder vil være påkrævet. Hvis du ikke har nogen CSS-færdigheder, kan du bruge modulet Væsentlige tilføjelser at style din form.

Essential Addons er en Elementor-tilføjelse, der forbedrer processen med at tilpasse dine Kontaktformular 7-formularer med Elementor. Elementor og Essential Addons er freemium plugins. Du kan bruge de gratis versioner af begge til at style dine kontaktformular 7-formularer.

Sådan styles en kontaktformular 7-formular med essentielle tilføjelser

Før du begynder at style dine formularer, skal du sørge for, at du har installeret Elementor et Væsentlige tilføjelser. Når den er installeret og aktiveret, skal du oprette en ny side (Sider – > Tilføj) og rediger den med Elementor.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin

Inden du starter tilpasningsprocessen, skal du indstille sidelayoutet ved at klikke på tandhjulsikonet i nederste venstre hjørne. Indstil layoutet fra rullemenuen.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin

Tilføj en ny sektion ved at klikke på plusikonet i redigeringsfeltet og trække widgetten EA-kontaktformular 7 fra venstre panel i editoren.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin

Gå til venstre panel og vælg den formular, hvis stil du vil tilpasse.

Når du har valgt en formular, skal du navigere til fanen stil. Som du kan se, kan du indstille flere stylingmuligheder. Her er de almindelige stylingmuligheder, du kan indstille.

  • Formbredde, justering og baggrund

Under blokken FormContainer, klik på farvevælgeren i sektionen Baggrundstype og indstil den ønskede farve til formularens baggrund. Du kan bruge enten en ensfarvet eller en gradientfarve som baggrund.

Læs også: Elementor: Sådan importeres eller eksporteres skabeloner

For at indstille formularjusteringen skal du blot vælge din foretrukne justeringsindstilling i sektionen Formularjustering.

For at indstille bredden på formularen skal du angive værdien for formularens maksimale bredde i feltet Form Max Bredde.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin
  • Baggrundsfelt, kantbredde og radius

For at definere baggrunden for felterne, bredden og radius af grænsen, kan du åbne sektionen Input og tekstarea. Klik på feltfarvevælgeren Baggrundsfarve for at indstille baggrunden.

Du kan også indstille baggrundsfarven for felter i fejlretningstilstand ved at klikke på fanen FOKUS.

For at definere felternes bredde kan du definere værdien i felterne Inputbredde. I dette afsnit kan du også indstille bredden af ​​tekstboksfeltet i Tekstområdets bredde.

For at indstille grænseradius skal du blot redigere feltet Grænseradius og indstil den grænseværdi, du foretrækker. Du kan også indstille typografien (skrifttypefamilie, skriftstørrelse, skrifttype) ved at klikke på blyantikonet i feltet Typographie.

  • Etiketter

Essential Addons giver dig også mulighed for at tilpasse stilen på dine formularetiketter. Du kan indstille tekstfarven såvel som typografien. For at gøre dette skal du åbne indstillingen Etiketter. Indstil tekstfarven ved at klikke på farvevælgeren i feltet Tekstfarve.

For at indstille typografien skal du klikke på blyantikonet i feltet Typografi.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin
  • Indsend knap

For at tilpasse stilen på indsend-knappen skal du åbne blokken Indsend Button. Herfra kan du indstille knapjustering, bredde, baggrundsfarve, tekstfarve, kantradius samt typografi.

  • Fejl besked

For at tilpasse stilen på fejlmeddelelsen kan du åbne blokken fejl. Du kan indstille fejlmeddelelsens tekstfarve, typografi, valideringsfejls baggrundsfarve, valideringsfejls tekstfarve osv...

Du kan indstille flere andre stilindstillinger. Du kan lege med det venstre panel, indtil du er tilfreds med stilen i din form.

Du kan tilføje flere andre elementer til din side ved hjælp af de tilgængelige widgets, der tilbydes af Elementor og Essential Addons. Når du er færdig, skal du klikke på knappen PUBLISH nederst i venstre panel for at offentliggøre din side.

Integrering af formularen på en almindelig side

Efter at have klikket på knappen PUBLISH, din kontaktside er som udgangspunkt blevet offentliggjort. Selve siden er drevet af Elementor. Hvis du foretrækker at tilføje din Kontaktformular 7 til en almindelig side (en side oprettet med Gutenberg, standard WordPress-editor), kan du installere pluginnet Elementor Blokke til Gutenberg. Dette plugin vil konvertere en Elementor-skabelon til en Gutenberg-blok.

For at registrere din Kontaktformular 7 som en Elementor-skabelon skal du klikke på pileknappen ved siden af ​​knappen UDGIVELSE / OPDATERING på venstre panel og vælg Gem som skabelon.

Giv din skabelon et navn, og klik på knappen INDREGISTRER.

Opret en ny side (Sider – > Tilføj) og giv den et navn som "kontakt os" "kontakt" eller et hvilket som helst andet navn, du kan lide.

Tilføj en ny blok og vælg Elementor bibliotek og vælg den kontaktformularskabelon, du lige har oprettet.

tilpas en kontaktformular 7-formular med Elementors Essential Addons-plugin

Og nu har du netop tilpasset din kontaktformular 7-formular.

Få Elementor Pro nu!!!

Konklusion

Her ! Det er det for denne artikel, der viser dig, hvordan du tilpasser en kontaktformular 7-formular med Essential Addons. Hvis du er i tvivl om, hvordan du kommer dertil, så lad dem vide det i kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...