Gravity Forms Elementor Widget: Tilføj og stil Gravity Forms uden CSS
Gravity Forms er en Pro-widget i Master Addons, der placerer enhver Gravity Form på en Elementor-side og lader dig style den fra panelet. Vælg formularen fra en dropdown, start fra en af 11 designvariationer, og juster derefter etiketter, felter, afkrydsningsfelter, indsend-knappen, flersidede statuslinjer og fejlmeddelelser. Formularen fortsætter med at fungere nøjagtigt, som du byggede den i Gravity Forms.
11 færdige formdesigns
Dropdownen Designvariationer har 11 typografier. Vælg en som udgangspunkt, og skift derefter alt, hvad du kan lide, på fanen Stil. Du kan også skjule titel og beskrivelsessæt i Tyngdekraftsformularer og skrive en brugerdefineret overskrift i Elementor i stedet.
- Skift mellem 11 designvariationer fra én dropdown.
- Vis eller skjul formularens titel, beskrivelse, etiketter og pladsholdere.
- Tilføj en brugerdefineret titel og beskrivelse uden at redigere selve formularen.
Felt-, afkrydsningsfelt- og radioknapstyling
Input og tekstområder får baggrund, tekstfarve, kant, radius, boksskygge og typografi, med en separat Fokustilstand. Indstil bredder og højder for input og tekstområder uafhængigt, plus polstring og tekstindrykning. Radioknapper og afkrydsningsfelter kan have brugerdefinerede størrelser, farver og grænseradius for de normale og kontrollerede tilstande.
- Normal- og fokustilstande for inputfelter.
- Separat bredde og højde for input og tekstområder.
- Brugerdefinerede radio- og afkrydsningsfeltstile, sektionsdelere og produktprisfarver.
Indsend knap, flersidede formularer og meddelelser
Gør indsend-knappen auto, fuld bredde eller en brugerdefineret bredde, og derefter style dens farver, kant, radius, polstring, boks skygge og typografi, med hover farver. Multi-side formularer få styling til sideknapperne og statuslinjen. Fejlmeddelelser, ugyldige felter og takkemeddelelsen har hver deres farveindstillinger, og du kan skjule fejlmeddelelser helt.
- Auto, fuld bredde eller brugerdefineret bredde indsend knap med hover farver.
- Sideknap og statuslinjestyling til flersidede formularer.
- Farver for fejlmeddelelser, ugyldige felter og takkemeddelelsen.
Elementors Shortcode-widget vs Gravity Forms-widgetten
Elementors gratis Shortcode-widget kan også vise en Gravity Form med [gravityform id="1"]. Formen virker, men det ser dog dit tema og Gravity Forms stil det, og ændre det betyder at skrive CSS.
| Shortcode widget | Master Addons Gravity Forms | |
|---|---|---|
| Price | Free | Master Addons Pro |
| Valg af formularen | Skriv formular-id'et i en kortkode | Vælg det fra en dropdown |
| Færdiglavede designs | Ingen | 11 designvariationer |
| Felt- og knapstyling | Brugerdefineret CSS | Fanen Style, med fokus- og svævetilstande |
| Progress bar og fejl styling | Brugerdefineret CSS | Fanen Style |
| Mobiljusteringer | CSS medieforespørgsler | Responsive kontroller til størrelser og mellemrum |
Brug af en anden form plugin? Master Addons har gratis styling widgets til Kontaktformular 7, WPForms, Ninja Forms og weForms.
Sådan tilføjes en Gravity Form til Elementor
Du skal bruge Gravity Forms med mindst én formular oprettet, og Master Addons Pro. Følg derefter disse trin:
- Slå Gravity Forms-widgeten til i Master Addons-dashboardet.
- Åbn din side i Elementor, søg i widgetpanelet for “Gravity Forms” og træk Master Addons-widgetten på plads.
- Vælg din formular i dropdownen Kontaktformular.
- Vælg en af de 11 designvariationer.
- Beslut om formulartitel, beskrivelse, etiketter og pladsholdere skal vises. Slå Brug Ajax til for at indsende formularen uden at genindlæse siden.
- Åbn fanen Stil for at indstille farver, kanter, mellemrum og typografi, og udgiv derefter.
Hvis dropdownen er tom, skal du kontrollere, at Gravity Forms er aktiv, og at du har oprettet en formular.
Ofte stillede spørgsmål til gravitationsformularer
Skal jeg have Gravity Forms plugin installeret?
Ja. De widget stilarter formularer du bygger i Gravity Forms, så det plugin skal installeres og aktiv. Uden det, widget viser en meddelelse beder dig om at aktivere Gravity Forms.
Hvordan tilføjer jeg en Gravity Form til Elementor?
Installer Gravity Forms, og opret din formular. I Elementor skal du trække widgetten Master Addons Gravity Forms over på siden, vælge formularen i dropdownen Kontaktformular, vælge en designvariation og style den i fanen Stil. Den trin-for-trin guide ovenfor dækker hver indstilling.
Kan jeg gøre formularerne responsive på mobile enheder?
Ja. Mange af kontrolelementerne til størrelse, afstand og justering har separate skrivebords-, tablet- og mobilværdier, så du kan ændre polstring, feltbredder og knapbredden for mindre skærme.
Vil betinget logik og Gravity Forms tilføjelser stadig fungere?
Ja. Widgetten udsender din formular gennem Gravity Forms selv, så betinget logik, flersidede formularer og tilføjelser fungerer på den måde, du indstiller dem. Widgetten ændrer kun, hvordan formularen ser ud.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
