Gravity Forms Elementor Widget: Gravity Forms ohne CSS hinzufügen und gestalten
Gravity Forms ist ein Pro-Widget in Master Addons, das jedes Gravity Form auf einer Elementor-Seite platziert und Sie es aus dem Panel stylen lässt Wählen Sie das Formular aus einem Dropdown, beginnen Sie mit einer von 11 Designvarianten und passen Sie dann Beschriftungen, Felder, Kontrollkästchen, den Senden-Button, mehrseitige Fortschrittsbalken und Fehlermeldungen an Das Formular funktioniert weiterhin genau so, wie Sie es in Gravity Forms erstellt haben.
11 fertige Formdesigns
Der Design Variations Dropdown hat 11 Stile Wählen Sie einen als Ausgangspunkt, dann ändern Sie alles, was Ihnen gefällt im Register Stil Sie können den Titel und die Beschreibung auch in Gravity Forms setzen und schreiben Sie stattdessen eine benutzerdefinierte Überschrift in Elementor.
- Wechseln Sie zwischen 11 Designvarianten von einem Dropdown.
- Formulartitel, Beschreibung, Beschriftungen und Platzhalter ein - oder ausblenden.
- Fügen Sie einen benutzerdefinierten Titel und eine Beschreibung hinzu, ohne das Formular selbst zu bearbeiten.
Design von Feld, Checkbox und Optionsfeld
Eingaben und Textbereiche erhalten Hintergrund, Textfarbe, Umrandung, Radius, Kastenschatten und Typografie, mit separatem Fokuszustand Breiten und Höhen für Eingaben und Textbereiche unabhängig einstellen, dazu kommt noch eine Auffüllung und Texteinrückung, Radiobuttons und Checkboxen können für den Normal - und den angekreuzten Zustand benutzerdefinierte Größen, Farben und Umrandungsradius haben.
- Normal - und Fokuszustände für Eingabefelder.
- Breite und Höhe für Eingaben und Textbereiche trennen.
- Benutzerdefinierte Radio - und Checkbox-Stile, Sektionsteiler und Produktpreisfarben.
Senden Sie Schaltfläche, mehrseitige Formulare und Nachrichten
Machen Sie die Übermittlungsschaltfläche automatisch, in voller Breite oder einer benutzerdefinierten Breite, dann stilisieren Sie ihre Farben, Umrandung, Radius, Auffüllung, Box-Schatten und Typografie, mit Hover-Farben Mehrseitige Formulare erhalten Styling für die Seitenschaltflächen und die Fortschrittsleiste Fehlermeldungen, ungültige Felder und die Dankesnachricht haben jeweils ihre eigenen Farbeinstellungen, und Sie können Fehlermeldungen vollständig ausblenden.
- Automatische, vollständige oder benutzerdefinierte Breite senden Schaltfläche mit Hover-Farben.
- Seitenschaltfläche und Fortschrittsbalken-Styling für mehrseitige Formulare.
- Farben für Fehlermeldungen, ungültige Felder und die Dankesmeldung.
Das Shortcode-Widget von Elementor vs. das Gravity Forms-Widget
Das kostenlose Shortcode-Widget von Elementor kann auch ein Gravity Form mit anzeigen [gravityform id="1"]. Die Form funktioniert, aber sie sieht aus, wie Ihr Thema und Gravity Forms sie stilisieren, und das zu ändern bedeutet, CSS zu schreiben.
| Shortcode-widget | Master Addons Gravity Forms | |
|---|---|---|
| Preis | Kostenlos | Master Addons Pro |
| Auswahl des Formulars | Geben Sie die Formular-ID in einen Shortcode ein | Wählen Sie es aus einem Dropdown |
| Fertigkonstruktionen | Keine | 11 Designvarianten |
| Feld - und Knopfstyling | Benutzerdefiniertes CSS | Style-Tab, mit Fokus - und Hover-Zuständen |
| Fortschrittsleiste und Fehlerstyling | Benutzerdefiniertes CSS | Style-tab |
| Mobile Anpassungen | CSS-Medienabfragen | Responsive Kontrollen für Größen und Abstände |
Verwenden eines Plugins für andere Formulare? Master Addons verfügt über kostenlose Styling-Widgets für Kontaktformular 7, WPForms, Ninja-Formulare und weForms.
So fügen Sie Elementor ein Schwerkraftformular hinzu
Sie benötigen Gravity Forms mit mindestens einem erstellten Formular und Master Addons Pro. Befolgen Sie dann diese Schritte:
- Schalten Sie das Gravity Forms-Widget im Master Addons-Dashboard ein.
- Öffnen Sie Ihre Seite in Elementor, durchsuchen Sie das Widget-Panel nach “Gravity Forms” und ziehen Sie das Master Addons Widget an Ort und Stelle.
- Wählen Sie Ihr Formular im Dropdown des Kontaktformulars.
- Wählen Sie eine der 11 Designvariationen.
- Entscheiden Sie, ob der Formulartitel, die Beschreibung, die Beschriftungen und die Platzhalter angezeigt werden sollen Schalten Sie Ajax ein, um das Formular abzusenden, ohne die Seite neu zu laden.
- Öffnen Sie die Registerkarte Stil, um Farben, Ränder, Abstände und Typografie festzulegen, und veröffentlichen Sie sie dann.
Wenn der Dropdown leer ist, überprüfen Sie, ob Gravity Forms aktiv ist und dass Sie ein Formular erstellt haben.
Häufig gestellte Fragen zu Schwerkraftformularen
Brauche ich das Gravity Forms Plugin installiert?
Ja. Die Widget-Styles-Formulare, die Sie in Gravity Forms erstellen, sodass das Plugin installiert und aktiv sein muss. Ohne sie zeigt das Widget einen Hinweis an, in dem Sie aufgefordert werden, Gravity Forms zu aktivieren.
Wie füge ich Elementor ein Gravity-Formular hinzu?
Installieren Sie Gravity Forms und erstellen Sie Ihr Formular Ziehen Sie in Elementor das Widget Master Addons Gravity Forms auf die Seite, wählen Sie das Formular im Dropdown des Kontaktformulars, wählen Sie eine Designvariation aus und stylen Sie es im Tab Stil Die Schritt-für-Schritt-Anleitung oben Jede Einstellung abdeckt.
Kann ich die Formulare auf Mobilgeräten responsive gestalten?
Ja. Viele der Größen, Abstands - und Ausrichtungssteuerungen haben separate Desktop, Tablet - und mobile Werte, sodass Sie Polsterung, Feldbreiten und die Tastenbreite für kleinere Bildschirme ändern können.
Funktionieren bedingte Logik- und Gravity Forms-Add-ons noch?
Ja. Das Widget gibt dein Formular über Gravity Forms selbst aus, so funktionieren bedingte Logik, mehrseitige Formulare und Add-ons so, wie du sie eingerichtet hast Das Widget ändert nur, wie das Formular aussieht.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
