So passen Sie WordPress-Formulare in Elementor an

Das Anpassen von WordPress-Formularen in Elementor kann die Darstellung und das Gefühl Ihrer Formulare völlig verändern und sie nahtlos in den Rest Ihrer Website integrieren.

Mit WPForms und dem Elementor-Builder erhalten Sie die volle Kontrolle über das Styling, sodass Sie alles von Farben und Schriftarten bis hin zu Abständen und Layout anpassen können.

In diesem Artikel zeige ich Ihnen, wie Sie Ihre bevorzugten WordPress-Formulare in Elementor anpassen können. Außerdem stelle ich einige unserer beliebtesten Formularvorlagen vor, die Sie sich vielleicht zulegen möchten.

WordPress-Formulare in Elementor anpassen! :)

Wie passe ich ein Formular in Elementor an?

Das Anpassen eines Formulars für Ihre Website ist eine großartige Möglichkeit, Ihre spezifische Markenidentität, Personalisierung und Absicht zu präsentieren. Und mit den intuitiven Buildern von WPForms und Elementor ist die Anpassung ein Kinderspiel.

Plugins installieren und aktivieren

Es versteht sich von selbst, dass Sie sowohl WPForms als auch Elementor benötigen, um diese Schritte hier zu befolgen.

Aber wir sagen es trotzdem: Stellen Sie sicher, dass Sie die WPForms- und Elementor-Plugins in Ihrem WordPress-Dashboard installieren und aktivieren.

Eine vollständige Anleitung zur Installation von Plugins auf Ihrer Website finden Sie in diesem praktischen Leitfaden.

Jetzt sind Sie bereit, mit der Anpassung zu beginnen. Wir zeigen Ihnen, wie Sie dies in Elementor tun, beginnend mit den grundlegenden Elementen für grundlegende Kontakte. Dann bauen wir auf diesen Elementen (Wortspiel beabsichtigt) für jedes Formularbeispiel auf, wenn sie etwas komplexer werden.

Möchten Sie noch mehr Inspiration? Sehen Sie sich diesen anderen Ansatz zum Hinzufügen und Anpassen von WordPress-Formularen in Elementor an.

Kontaktformular

Ein Kontaktformular ist eines der notwendigsten Formulare auf Ihrer Website und bleibt unsere beliebteste Formularvorlage.

Um ein Kontaktformular mit Elementor zu erstellen, navigieren Sie zuerst zu Ihrem WordPress-Dashboard. Klicken Sie in der Seitenleiste auf Seiten und dann auf Neu hinzufügen.

Klicken Sie dann auf die blaue Schaltfläche Mit Elementor bearbeiten, um den Elementor-Seitenersteller zu laden, mit dem Sie Ihr Kontaktformular einbetten und verschiedene Seitenelemente anpassen können.

Nun öffnet sich der Elementor-Seitenersteller, wo Sie alle Arten von Blöcken und Elementen per Drag & Drop auf eine Seite ziehen können.

Ziehen Sie den WPForms-Block per Drag & Drop auf die Seite. Jetzt können Sie entweder ein Formular aus einem Dropdown-Menü auswählen oder ein neues Formular hinzufügen.

Klicken wir auf + Neues Formular, um unser Formular in den Block einzufügen.

Der WPForms-Builder wird dann geladen, damit Sie das Formular anpassen können, das Sie in Elementor verwenden möchten.

Benennen Sie zuerst Ihr Formular, indem Sie in das Feld am oberen Bildschirmrand tippen. Wir nennen unseres „Kontaktformular“, damit wir wissen, wo und wie wir es später verwenden können.

Wählen Sie dann eine Vorlage aus der Galerie aus, um Ihr Formular zu erstellen.

Sie können eine leere Formularvorlage verwenden, um Ihr Formular von Grund auf neu zu erstellen, oder Sie können einen Vorsprung erzielen, indem Sie eine bestimmte Vorlage verwenden, die mit allen erforderlichen Feldern vorab erstellt wurde, um Ihnen den Einstieg zu erleichtern.

Für unser Kontaktformular verwenden wir eine Vorlage.

Sie können entweder nach unten auf der Seite scrollen, um Vorlagen zu durchsuchen, oder Sie können nach etwas Bestimmtem suchen. Wenn Sie beispielsweise nach einem „Kontaktformular“ suchen, erhalten Sie alle Arten von Kontaktformularvorlagen, aus denen Sie auswählen können.

Wir verwenden die Simple Contact Form-Vorlage, um unser Formular zu erstellen.

Dies ist eine unserer beliebtesten Formularvorlagen. Wir empfehlen Ihnen daher, sie ebenfalls zu nutzen, um von ihren Vorteilen zu profitieren!

Und wie immer ist diese Formularvorlage einfach mit zusätzlichen Feldern und Einstellungen anzupassen. Klicken und halten Sie einfach das gewünschte Feld und ziehen Sie es auf Ihr Formular. Klicken Sie dann einfach auf das Feld, um es zu bearbeiten.

Mit der Simple Contact Form-Vorlage erfasst Ihr Formular den Namen Ihres Benutzers, damit Sie jegliche Korrespondenz mit ihm personalisieren können, und leitet Ihnen auch eine Nachricht oder einen Kommentar von ihm weiter.

Ein zusätzliches Anpassungselement, das Sie bei Ihrem Formular berücksichtigen sollten, ist die Bestätigungsnachricht, die Ihre Benutzer erhalten, wenn sie ihr Formular absenden. Navigieren Sie zum Abschnitt Einstellungen des Formular-Builders und klicken Sie auf die Registerkarte Bestätigungen.

Hier können Sie die Nachricht bearbeiten, die auf dem Bildschirm angezeigt wird, nachdem Ihr Formularbenutzer auf „Senden“ geklickt hat.

Auf unserer Simple Contact Form-Vorlage lautet die Bestätigungsnachricht: „Vielen Dank für Ihre Kontaktaufnahme! Wir werden uns in Kürze bei Ihnen melden.“

Als Hinweis: Alle Formularvorlagen, die wir in unserer Galerie anbieten, werden mit einer relevanten Bestätigungsnachricht für Ihre Benutzer geliefert. Wir empfehlen Ihnen jedoch, diese Nachricht nach Belieben zu bearbeiten!

Wenn Sie mit den Anpassungen des Formulars fertig sind, klicken Sie oben auf die Schaltfläche Speichern. Sie können den Formular-Builder schließen, indem Sie auf das X in der rechten Ecke des Formular-Builder-Fensters klicken.

Nun kehren wir zum Elementor Page Builder zurück.

Mit unserer Contact Form-Vorlage, die auf der Seite eingebettet ist, können wir nun die Formularstile anpassen.

Klicken Sie auf die Registerkarte Stil, um alle Menüoptionen zu öffnen. Wir können die Gestaltung der Felder, Beschriftungen, Schaltflächen und mehr bearbeiten.

Oder nutzen Sie einfach eines der vielen hier angebotenen Designs, bei denen Hintergrundbild, Farben und andere Stile bereits für Sie vordefiniert sind.

Dies ist eine einfache Möglichkeit, ein zusammenhängendes und individuelles Aussehen zu erzielen, ohne viel Aufwand für die Gestaltung zu betreiben!

Bei unserem Formular haben wir die Einstellungen für den Feldstil verwendet, um den Randradius und die Farbe mit nur wenigen Klicks zu erhöhen.

Sie können sehen, wie nur ein paar schnelle Anpassungen einen erheblichen Einfluss auf die Gestaltung dieser Formularseite haben.

Welche Arten von Stilen werden Sie sich einfallen lassen?

Vergessen Sie nicht, Ihre Formularseite zu veröffentlichen, wenn Sie mit der Anpassung der Formularstile fertig sind.

Klicken Sie einfach auf die Schaltfläche Veröffentlichen in der unteren Symbolleiste.

Nun werden wir auf diesen Schritten aufbauen, um weitere Formularseiten mit Elementor anzupassen.

Erstellen Sie Ihr Kontaktformular in Elementor! 🙂

Newsletter-Anmeldeformular

Ein weiterer gängiger Formular-Typ, den Sie möglicherweise auf Ihrer Website haben möchten, ist ein Newsletter-Anmeldeformular.

Um dieses Formular in Elementor anzupassen, beginnen Sie mit den ersten Schritten von oben: Hinzufügen und Bearbeiten einer neuen Seite mit Elementor, Verwenden des WPForms-Blocks zum Hinzufügen eines neuen Formulars und Auswählen einer Vorlage für das Formular.

Da dieses Formular von Ihren Website-Besuchern zum Abonnieren Ihrer Newsletter verwendet wird, benötigen Sie eine Vorlage mit Feldern zur Erfassung von Namen und E-Mail-Adressen.

Wir verwenden also die Newsletter-Anmeldeformular-Vorlage.

Anschließend können Sie den Formular-Builder verwenden, um zusätzliche Felder hinzuzufügen, wie z. B. eine Checkbox für Nutzungsbedingungen, ein benutzerdefiniertes CAPTCHA zur Verhinderung von Spam-Anmeldungen und sogar Geolokalisierungsfunktionen.

Die Bestätigungsnachricht wird dank der Vorlage wieder für Sie erledigt.

Wie immer ermutigen wir Sie, jede Nachricht zu schreiben, die Ihre neuen Abonnenten erhalten sollen. In der Zwischenzeit heißt es: „Danke für die Anmeldung zum Newsletter! Wir werden uns bald bei Ihnen melden.“

Vergessen Sie nicht, Ihr Newsletter-Anmeldeformular zu speichern, wenn Sie damit fertig sind, bevor Sie es verlassen.

Dann können wir im Elementor erneut das Styling des Formulars anpassen. Ändern wir diesmal die Feldstile, Labelstile und Schaltflächenstile.

Wir werden hier die Feldstile wie beim Kontaktformular oben anpassen: Erhöhen Sie den Radius der Umrandung auf 10 Pixel und ändern Sie die Farbe in Schwarz.

Konzentrieren wir uns nun auch auf die Labelstile. Um die Labels im Formular hervorzuheben, erhöhen Sie ihre Größe. Wählen wir auch eine ansprechende Farbe für Fehlermeldungen. Sie sehen diese Farbe für die Sternchen bei den Feldlabels.

Richten Sie dann Ihre Aufmerksamkeit auf die Schaltfläche zum Absenden.

Wie Sie auf unserem Formular sehen können, haben wir die Schaltflächenstile verwendet, um die Größe der Schaltfläche sowie die Farben des Hintergrunds und der Umrandung an den Rest unseres Stylings anzupassen.

Und um eine perfekte Farbabstimmung zu erzielen, haben wir einfach die pinke Farbe, die wir mit der Farbauswahl bei den Labelstilen gewählt haben, kopiert und in die Hintergrundfarbe bei den Schaltflächenstilen eingefügt.

Als Nächstes werden wir mit all den Styling-Optionen für Formulare in Elementor noch kreativer.

Erstellen Sie ein Newsletter-Formular in Elementor! :)

Formular zur Camp-Anmeldung

Registrierungsformulare gehören zu unseren gefragtesten Vorlagen, wobei Formularvorlagen für Camp-Registrierungen kürzlich am gefragtesten waren.

Wir werden die meisten der hier bereits behandelten Schritte überspringen und uns direkt der Auswahl einer Formularvorlage von WPForms widmen.

Greifen Sie für dieses Formular in der Auswahl unserer Galerie zur Vorlage für das Pfadfinder-Camp-Registrierungsformular.

Wir werden uns nicht zu sehr mit der Bearbeitung der Formularfelder oder der Bestätigungsnachricht befassen, obwohl Sie die Vorlage natürlich an die Bedürfnisse Ihrer Organisation anpassen können.

Dann werden wir im Elementor-Seitenersteller in den Erweiterten Einstellungen arbeiten.

Dieser Einstellungsbereich ermöglicht uns viele Styling-Optionen für den WPForms-Block, einschließlich des Hochladens eines Bildes für einen benutzerdefinierten Hintergrund.

Klicken Sie unter den erweiterten Einstellungen auf die Registerkarte Hintergrund, um Ihren Hintergrund zu erstellen. und stellen Sie sicher, dass der Hintergrundtyp auf Klassisch eingestellt ist.

Dann können Sie ein Bild hochladen, das als Hintergrund für den WPForms-Block dient.

Obwohl die Bildgröße, Position und andere Elemente des Hintergrunds einige Konfigurationen erfordern, ist diese Anpassungsfunktion die Mühe wert.

Mit unserem obigen Beispiel möchten wir wahrscheinlich die Textfarben, Abstände, Ausrichtung und andere Elemente des Formulars bearbeiten, bevor wir es veröffentlichen.

Erstellen Sie ein Registrierungsformular in Elementor! :)

Kundenbestellformular

Wir können keinen Artikel über Formularvorlagen schreiben, ohne unsere Bestellformularvorlagen zu erwähnen.

Wir überspringen erneut die Schritte, die wir bereits behandelt haben, und widmen uns direkt den Anpassungen. Für unser Formular hier verwenden wir unsere beliebteste Bestellformularvorlage: die Kundenbestellformularvorlage.

Nun gehen wir zurück zu den Erweiterten Einstellungen des WPForms-Blocks. Wir besuchen auch die Registerkarte Hintergrund erneut, aber diesmal ist der Hintergrundtyp Verlauf.

Mit den Verlaufseinstellungen können Sie beliebige Farbkombinationen mischen und anpassen, die dann als Verlauf über den Hintergrund Ihres Bestellformulars angewendet werden.

Das Endergebnis ist atemberaubend und die Anpassungsmöglichkeiten sind endlos.

Dies ist nur ein kleiner Einblick in all die Anpassungs- und Styling-Optionen, die Sie mit WPForms und Elementor haben. Schauen Sie sich also unbedingt unsere zusätzlichen Elementor-Tutorials und Artikel an.

Erstellen Sie ein Bestellformular in Elementor! :)

FAQs zum Anpassen von WordPress-Formularen in Elementor

Das Anpassen von Formularen in Elementor ist ein beliebtes Thema für unsere Leser. Hier sind Antworten auf einige häufig gestellte Fragen dazu:

Benötige ich Elementor für WordPress?

Sie müssen nicht unbedingt das Elementor-Plugin für Ihre WordPress-Website installieren, aber es ist unglaublich nützlich.

Elementor ist ein Page-Builder-Plugin, das eine Drag-and-Drop-Oberfläche bietet und sich somit ideal für Personen ohne starke Programmierkenntnisse oder Designexpertise eignet. Es bietet umfangreiche Anpassungsmöglichkeiten, mit denen Sie Ihre gewünschten Website-Layouts und Designs erstellen können.

Ob Sie es für Ihre WordPress-Website benötigen, hängt also von Ihren spezifischen Anforderungen und Vorlieben ab. Wenn Sie mit HTML, CSS vertraut sind und über gute Designkenntnisse verfügen, benötigen Sie Elementor möglicherweise nicht.

Elementor ist sowohl in einer kostenlosen als auch in einer Premium-Version erhältlich, sodass Sie immer mit der kostenlosen Version beginnen und bei Bedarf upgraden können, was es an Ihre Bedürfnisse anpassbar macht.

Wie passe ich ein Formular in WordPress an?

Um ein Formular in WordPress anzupassen, können Sie WPForms mit Elementor verwenden. Erstellen Sie zuerst Ihr Formular in WPForms, öffnen Sie dann den Elementor-Editor, fügen Sie das WPForms-Widget hinzu und wählen Sie das von Ihnen erstellte Formular aus. Von dort aus verwenden Sie die Design-Tools von Elementor, um Farben, Schriftarten und Layout zu ändern, damit sie zum Stil Ihrer Website passen.

Wie greife ich auf Elementor-Formulare zu?

Um auf Elementor-Formulare zuzugreifen, fügen Sie das WPForms-Widget im Elementor-Editor hinzu. Öffnen Sie eine Seite in Elementor, ziehen Sie das WPForms-Widget auf die Seite und wählen Sie das Formular aus, das Sie anzeigen möchten. Auf diese Weise können Sie das Erscheinungsbild des Formulars direkt in Elementor anpassen.

Verbinden Sie als Nächstes Elementor-Formulare mit Google Tabellen

Glückwunsch! Sie sind auf dem besten Weg, großartige Formulare in Elementor zu erstellen. Elementor kann zwar Ihre Formulareingaben in Ihrem WordPress-Dashboard speichern, aber es gibt Zeiten, in denen Sie eine Kopie Ihrer Formulareingaben und Leads in einer Google-Tabelle führen möchten. Versuchen Sie, diese Formulare mit Google Tabellen zu verbinden. 

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin.  WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.