So fügen Sie der Elementor-Website ein Schwerkraftformular hinzu

Veröffentlicht: 2022-03-08

Sie können sich eine Website ohne Formulare nicht vorstellen. Die meisten Websites verwenden einzelne oder mehrere Formulare, um ihren unterschiedlichen Zwecken zu dienen. Daher ist es wichtig zu lernen, wie Sie Ihrer Elementor-Site auch Formulare hinzufügen.

Wenn Sie das richtige Werkzeug in der Hand haben, können Sie den gesamten Vorgang in ein paar Minuten erledigen, ohne eine Codezeile zu berühren.

Heute haben wir Ihnen mitgeteilt, wie Sie mit dem kostenlosen Gravity Forms-Widget von Happy Addons Formulare auf der Elementor-Website erstellen/hinzufügen.

Wir haben auch die anderen Formular-Widgets von Happy Addons geteilt, die mit gängigen Formular-Plugins kompatibel sind.

So verwenden Sie das Gravity Forms Widget von Happy Addons, um Formulare für die Elementor-Website zu erstellen

Mit dem Gravity Forms-Widget können Sie ganz einfach verschiedene Formulare erstellen.

Im folgenden Abschnitt zeigen wir Ihnen, wie Sie das Gravity Forms-Widget verwenden und kostenlos Evergreen-Formulare für Ihre Elementor-Website erstellen.

Befolgen Sie diese vier einfachen Schritte –

  1. Installieren und aktivieren Sie die erforderlichen Plugins
  2. Erstellen Sie eine neue Gravitationsform
  3. Füge das Gravity Forms Widget von Happy Addons hinzu
  4. Passen Sie das Formular in Ihrem eigenen Stil an

Lass uns anfangen:

Schritt Eins: Installieren und aktivieren Sie die erforderlichen Plugins

Zunächst müssen wir die erforderlichen Plugins auf unserer Website installieren und aktivieren. Hier haben wir bereits die folgenden Plugins installiert und aktiviert. Sie können die folgenden Links verwenden, um die Plugins herunterzuladen.

  1. Elementar (kostenlos)
  2. Glückliche Add-ons (kostenlos)
  3. Schwerkraftformen (Pro)

Hinweis: Für Ihr Anliegen bietet das Gravity Forms-Plugin keine kostenlose Version an. Sie müssen die Pro-Version kaufen.

Install & Activate Required Plugins

Schritt Zwei: Erstellen Sie ein neues Gravitationsformular

Nach der Installation des Plugins müssen Sie in den Bereich Formulare oder Neue Formulare gehen. Klicken Sie dann auf die Schaltfläche Neu hinzufügen, um ein neues Formular zu erstellen.

Add New Gravity Form

Im folgenden modalen Popup erhalten Sie die Option, das Formular zu erstellen. Hier fügen Sie Ihren Formulartitel und Ihre Formularbeschreibung hinzu. Klicken Sie abschließend auf die Schaltfläche Formular erstellen , um ein neues Formular zu erstellen.

Create a New Gravity Form

Gut gemacht! Sie haben ein neues Formular erstellt. Jetzt müssen Sie dem Formular die erforderlichen Formularfelder hinzufügen. Im Gravity Forms-Plugin können Sie erforderliche Formularfelder einfach per Drag & Drop hinzufügen.

Zuerst müssen Sie den Feldnamen in die Suchleiste eingeben. Ziehen Sie dann das Feld per Drag & Drop in den linken Seitenbereich.

Hier sehen Sie, dass wir in der Suchleiste nach dem Formularfeld Name suchen und es an die richtige Stelle ziehen.

Add Form Fields

Wir haben unseren Formularen außerdem drei weitere Formularfelder wie E-Mail, Website und Nachricht hinzugefügt, um ein vollständiges Formular zu erstellen. Nachdem Sie die wesentlichen Formularfelder hinzugefügt haben, klicken Sie auf die Schaltfläche Aktualisieren , um das Formular zu speichern.

Schritt drei: Fügen Sie das Gravity Forms Widget von Happy Addons hinzu

Es ist an der Zeit, das Formular auf Ihrer Elementor-Website anzuzeigen.

Suchen Sie zuerst das Gravity Forms -Widget von Happy Addons aus dem linken Seitenleistenmenü und ziehen Sie es dann per Drag & Drop an die geeignete Stelle Ihrer Website.

Add Happy Addons' Gravity Forms Widget

Zweitens wählen Sie den Formularnamen aus der Dropdown-Liste aus. Hier haben wir das Beispielformular ausgewählt, das Sie zuvor erstellt haben.

Sie können hier im Inhaltsbereich auch den Formulartitel anzeigen und die Ajax -Übermittlung aktivieren.

Select Created Gravity Form

Hinweis: Wenn Sie eine Änderung am Bedienfeld des Elementor-Editors vornehmen, müssen Sie auf die Schaltfläche Übernehmen klicken, um die Änderungen auf der Frontend-Seite zu aktualisieren.

Schritt vier: Passen Sie das Formular in Ihrem eigenen Stil an

Im Abschnitt Stil erhalten Sie die wesentlichen Stiloptionen für eine bessere Anpassung des Formulars.

Hier sind sie.

  • Formularfelder
  • Beschriftung der Formularfelder
  • Senden-Schaltfläche
  • Brechen
  • Liste
Style Options of Gravity Form

In diesem Blog verwenden wir die ersten drei Einstellungen für Formularfelder, Formularfeldbeschriftung und Senden-Schaltfläche , die häufig zum Entwerfen des Formulars verwendet werden.

Formularfelder

Im Bereich Stil -> Formularfelder finden Sie viele Stiloptionen , um den Standardstil von Formularfeldern zu ändern. Dies sind die Optionen „Große Feldbreite“, „Feldabstand“, „Padding“, „Rahmenradius“, „Typografie“, „Feldtextfarbe“, „Feldplatzhalterfarbe“, „Rahmentyp“, „Rahmenschatten“ und „ Hintergrundfarbe “, mit denen Sie die Felder anpassen können.

Lst's erhöhen die Formularfelder Padding .

Style Form Fields Padding

Sie können die Feldtextfarbe auf Ihre eigene Weise ändern.

Style Form Field Text Color

Beschriftung der Formularfelder

Sie können auch den Rand, die Beschriftungsauffüllung, den Rand der Unterbeschriftung, die Beschriftungstypografie, die Typografie der Unterbeschriftung, die Textfarbe der Beschriftung, die Textfarbe der Unterbeschriftung und die erforderliche Beschriftungsfarbe des Beschriftungsstils für Formularfelder zurücksetzen .

Hier haben wir die standardmäßig erforderliche Etikettenfarbe geändert und die rote Farbe festgelegt.

Style Settings of Form Fileds Label

Senden-Schaltfläche

Im Bereich Style-> Submit Button erhalten Sie die möglichen Gestaltungsoptionen wie Button Full Width, Button Width, Margin, Padding, Typography, Border Type, Border Radius, Box Shadow, Text Color und Background Color , um das Senden zu gestalten Taste.

Aktivieren Sie die volle Breite der Schaltfläche und legen Sie die Schaltflächenbreite fest

Wenn Sie eine Senden-Schaltfläche in voller Breite benötigen, können Sie diese erstellen, indem Sie die Schaltfläche Volle Breite aktivieren. Dann können Sie die Schaltflächenbreite auf Ihre eigene Weise einstellen.

Style Submit Button Width

Legen Sie Rand, Polsterung und Broder-Radius fest

Wir haben auch den Rand, die Polsterung und den Breiterradius des Senden-Buttons definiert.

Style Button Other Settings

Ändern Sie die Hover-Farbe der Schaltfläche

Um die Schaltfläche besser sichtbar zu machen, haben wir die Hover-Farbe der Senden-Schaltfläche geändert.

Style Button Hover Color

Letzte Vorschau auf das Gravity Forms Widget von Happy Addons

Das endgültige Erscheinungsbild unserer Elementor Gravity-Form ähnelt dem folgenden Bild.

Gravity Form Final Preview

Sie können sich auch das Video ansehen.

Laden Sie jetzt Happy Addons herunter!

6 weitere Happy Addons Formular-Widgets, die Sie verwenden können

Wie das Gravity Forms-Widget bietet Happy Addons 6 weitere Formular-Widgets. Sie können sie auch verwenden, um Formulare in Ihre Elementor-Website zu integrieren.

Lassen Sie uns nacheinander über diese Widgets sprechen.

1. Kontaktformular 7

Contact Form 7 ist eines der bekanntesten Formular-Plugins für WordPress, das die meisten Benutzer verwenden. Aus diesem Grund erlauben Happy Addons seinen Benutzern, Formulare mit dem kostenlosen Widget Contact Form 7 hinzuzufügen.

Mit diesem Widget können Sie ganz einfach verschiedene Arten von Formularen zu Ihrer Elementor-Website hinzufügen und anpassen.

Sehen Sie sich die Dokumentation an.

2. Ninja-Formulare

Jetzt können Sie auch Ihr bevorzugtes Ninja Forms-Plugin verwenden. Mit dem Ninja Forms-Widget von Happy Addons können Sie Ihre erforderlichen Formulare in Ihre Elementor-Site einfügen.

Lesen Sie die Schritt-für-Schritt-Dokumentation von Ninja Forms.

3. weForms

Mit dem neuen und einzigartigen weForms-Widget von Happy Addons können Sie vorgefertigte Formulare auf organisiertere Weise zu Ihrer Website hinzufügen.

Werfen Sie einen kurzen Blick in diese Dokumentation und erfahren Sie, wie dieses Widget funktioniert.

4. Caldera-Formulare

Probieren Sie das kostenlose Widget Happy Addons Caldera Forms aus, um Ihrer Elementor-Site beeindruckende Formulare hinzuzufügen. Werfen wir einen Blick in die Bedienungsanleitung.

5. WPForms

Möchten Sie mit dem beliebten WPForms-Plugin Formulare zu Ihrer Website hinzufügen? In Happy Addons können Sie die vorgefertigten Formulare mit dem WPForms-Widget einfach hinzufügen und anpassen. Für weitere Details haben wir hier eine Kurzanleitung für Sie.

Fließende Formen

Zu guter Letzt. Sie können auch das Happy Addons Fluent Forms-Widget verwenden, um Formulare in Ihre Website zu integrieren. Folgen Sie der vollständigen Dokumentation von Fluent Forms.

Entdecken Sie Happy Addons Alle Widgets!

Sind Sie bereit, das Gravity Forms Widget von Happy Addons zu verwenden?

Mit den Formular-Widgets von Happy Addons können Sie Ihren Formulardesignprozess vereinfachen. Wir hoffen, dass Sie alle oben genannten Schritte befolgt und den Prozess der Formularintegration gelernt haben.

Jetzt ist es an der Zeit, Gravity Form zur Elementor-Website hinzuzufügen.

Bist du bereit zu gehen?

Wenn Sie noch Fragen zu diesem Blog oder zu Elementor Gravity-Formularen haben, können Sie Ihre Stimme im Kommentarfeld unten erheben.

Schauen Sie sich einige andere wichtige Tutorials an…

  • So personalisieren Sie Ihr Formulardesign in Elementor mit KOSTENLOSEN Happy Form Widgets!
  • Der ultimative Leitfaden zum Erstellen eines Elementor-Kontaktformulars
  • Die 7 besten WordPress Form Builder im Vergleich (Vor- und Nachteile)
  • Kontaktformular 7: Funktionsüberprüfung und Leistungsprüfung (im Vergleich zu WPForms)
  • Ehrliche WPForms-Rezension für Vermarkter

Vergessen Sie nicht, sich für unseren Newsletter anzumelden. Es ist auch völlig KOSTENLOS !