Das Erstellen von Formularen, die sowohl attraktiv als auch einfach zu benutzen sind, ist für eine gute Benutzererfahrung unerlässlich.
Die Anzeige eines Formulars in einer einzigen Zeile ist besonders effektiv für kompakte Leerzeichen wie Header, Footer oder Seitenleisten und lässt Ihre Website sauber und professionell aussehen.
Das bedeutet, dass Sie Formulare in stark frequentierte Bereiche Ihrer Website einfügen und die Konversionsrate erhöhen können.
Im Laufe der Jahre haben wir mit verschiedenen Platzierungen von Kontaktformularen experimentiert, um unseren Lead-Erfassungsprozess zu optimieren. Diese praktische Erfahrung hat uns gelehrt, dass einfache, einzeilige Felder zu höheren Abschlussraten führen können.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Ihr Formular ganz einfach in einer einzigen Zeile in WordPress anzeigen können.
Warum einzeilige Formulare in WordPress anzeigen?
Einzeilige Formulare bieten Ihnen mehr Flexibilität bei der Wahl des Ortes, an dem Sie Ihre Formulare platzieren möchten. Da diese Art von Formularen nur aus einer einzigen Zeile besteht, nehmen sie nicht viel Platz in Anspruch und lassen sich leicht in Ihre bestehenden Inhalte in einem WordPress-Blog integrieren.
Anmeldeformulare für E-Mail-Newsletter werden zum Beispiel oft in einer einzigen Zeile über oder unter dem Inhalt des Blogposts angezeigt. Diese Art von Formularen eignet sich auch gut für Landing Pages, Kontaktseiten und andere wichtige Seiten auf Ihrer Website.
Sie können nicht nur mehr Abonnenten und Leads generieren, sondern auch jede Art von Formular in ein einzeiliges Formular verwandeln.
So kann es beispielsweise sinnvoll sein, Ihr Kontaktformular in einer einzigen Zeile darzustellen, um Platz auf der WordPress-Website zu sparen und Ihr Formular mobiler zu gestalten.
In diesem Sinne zeigen wir Ihnen, wie Sie ein einzeiliges Formular auf Ihrer WordPress-Website anzeigen können.
Wie man ein einzeiliges Formular in WordPress erstellt
Für dieses Tutorial werden wir das WPForms-Plugin verwenden, um ein einzeiliges Formular zu erstellen, da es eines der besten Lead-Generierungs-Plugins für WordPress ist, das von über 6 Millionen Websites verwendet wird.
Mit dem Drag-and-drop-Builder können Sie jedes WordPress-Formular schnell erstellen. Außerdem lässt es sich mit gängigen Werkzeugen für das E-Mail-Marketing integrieren, sodass Sie Ihre E-Mail-Liste problemlos erweitern können.
Weitere Informationen finden Sie in unserer vollständigen WPForms Bewertung.
Hinweis: WPForms hat auch eine Premium-Version, auf die Sie upgraden können. Wir werden jedoch WPForms Lite für dieses Tutorial verwenden, da Sie damit ein einfaches Kontaktformular erstellen und es mit Constant Contact für die Lead-Generierung verbinden können.
Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.
Nach der Aktivierung besuchen Sie die Seite WPForms “ Add New in Ihrer WordPress-Admin-Seitenleiste und geben Sie Ihrem Formular einen Namen. Dann müssen Sie Ihre Formularvorlage auswählen.
Wir wählen die Vorlage „Opt-In-Formular“. Bewegen Sie einfach den Mauszeiger über die Vorlage und klicken Sie auf die Schaltfläche „Vorlage verwenden“.
Dadurch wird die WPForms Drag-and-Drop-Formularerstellung auf dem Bildschirm gestartet.
Sie werden sehen, dass die von uns gewählte Vorlage automatisch die Felder Name und E-Mail sowie eine Schaltfläche zum Absenden enthält.
Jedes Feld kann bearbeitet werden, indem Sie es anklicken und in der linken Spalte Änderungen vornehmen.
Sie können die Felder auch per Drag & Drop verschieben, um ihre Reihenfolge zu ändern.
Wenn Sie mit der Anpassung der Felder fertig sind, können Sie Ihr Formular in einer einzigen Zeile anzeigen.
Wechseln Sie dazu im Formularersteller auf die Registerkarte Einstellungen “ Allgemein und klicken Sie dann auf das Dropdown-Menü „Erweitert“.
Als Nächstes geben Sie „inline-fields“ in das Feld „Form CSS Class“ ein (ohne Anführungszeichen).
Dadurch wird diese CSS-Klasse auf das Formular angewendet. Da WPForms Styling für die Klasse „inline-fields“ enthält, wird es automatisch Ihr gesamtes Formularlayout ändern und es schön in einer einzigen Zeile anzeigen.
Danach können Sie Ihr Formular noch kleiner machen, indem Sie die Feldbezeichnungen ausblenden.
Klicken Sie dazu einfach auf ein Feld im Formular, um dessen Einstellungen in der linken Spalte zu öffnen.
Wählen Sie anschließend die Menüoption „Erweitert“ und klicken Sie auf den Schalter „Etikett ausblenden“, um die Option zu aktivieren.
Dann müssen Sie dasselbe für alle Formularfeldbeschriftungen tun.
Danach können Sie im gleichen Abschnitt „Erweitert“ Text in das Feld „Platzhalter“ eingeben.
So erfahren Ihre Benutzer, wofür die einzelnen Formularfelder gedacht sind.
Wenn Sie mit der Anpassung Ihres Formulars fertig sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.
Wenn Sie Ihr Formular nutzen, um Leads zu generieren, können Sie Ihr Formular mit Ihrem E-Mail-Marketing-Anbieter verbinden. Weitere Einzelheiten finden Sie in unserem Leitfaden zur Erstellung eines E-Mail-Newsletters.
Hinzufügen Ihres einzeiligen Formulars zu Ihrer WordPress-Website
Jetzt ist es an der Zeit, Ihr einzeiliges Formular zu Ihrer WordPress-Website hinzuzufügen. Sie können es zu einer beliebigen Seite, einem Beitrag oder einem Widget-Bereich hinzufügen.
Wir fügen es zu einer bestehenden Seite hinzu, aber der Prozess ist ähnlich, wenn Sie es zu einem anderen Bereich Ihres WordPress-Blogs hinzufügen.
Öffnen Sie einfach die Seite, auf der Sie das einzeilige Formular wünschen, und klicken Sie auf die Schaltfläche „Block hinzufügen“ (+), um das Blockmenü zu öffnen.
Klicken Sie dann auf den Block „WPForms“, um ihn zu Ihrer Website hinzuzufügen.
Wählen Sie dann das zuvor erstellte einzeilige Formular aus dem Dropdown-Menü im Block selbst.
Sobald Sie Ihr Formular ausgewählt haben, lädt das Plugin eine Vorschau Ihres Formulars im Inhaltseditor. Klicken Sie dann auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihr neues Formular zu aktivieren.
Jetzt können Sie Ihre Website besuchen, um Ihr neues Formular in Aktion zu sehen.
Bonus: Verwenden Sie OptinMonster zum Erstellen von Popups und Bannern
Sie können nicht nur einzeilige Formulare erstellen, sondern auch schwebende Kontaktformulare, Opt-in-Popups und Banner auf Ihrer Website einrichten, um E-Mails zu erfassen.
Zu diesem Zweck können Sie OptinMonster verwenden, das beste WordPress-Tool zur Optimierung der Konvertierung auf dem Markt.
Mit OptinMonster können Sie wunderschöne Optin-Formulare erstellen, die personalisierte und relevante Informationen auf der Grundlage der Interessen Ihrer Nutzer anzeigen und die Erfassung von Leads sehr einfach machen.
Eine ausführliche Anleitung finden Sie in unserem Tutorial zum Erstellen eines Kontaktformular-Popups in WordPress.
Darüber hinaus können Sie auch attraktive Banner für Ihre Website erstellen und die Benutzer auffordern, sich für Ihren Newsletter anzumelden.
Auf diese Weise können Sie Benutzerdaten erfassen, ohne viel Platz auf der Website zu beanspruchen oder die Benutzer zu verärgern.
Weitere Informationen finden Sie in unserem Leitfaden für Einsteiger, wie Sie mit OptinMonster eine E-Mail-Liste erstellen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Ihr Formular in einer einzigen Zeile in WordPress anzeigen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zum Erstellen interaktiver Formulare oder unsere Expertenauswahl der besten Typeform-Alternativen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Arkady
Very helpful article!
Is it possible to move submit button to the left end of line?
Thank you in advance!
WPBeginner Support
For that, you would place the button on the top instead of the bottom of the form
Admin