Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie Sie Ihr Formular in einer einzigen Zeile in WordPress anzeigen (einfache Methode)

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie Ihr Formular in einer einzigen Zeile in WordPress anzeigen?

Einzeilige Formulare bieten Ihnen mehr Flexibilität bei der Platzierung von Formularen. Das bedeutet, dass Sie Formulare problemlos in stark frequentierten Bereichen Ihrer Website platzieren und Ihre Konversionen verbessern 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.

How to display your form in a single line in WordPress (easy way)

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 ein und lassen sich leicht in den vorhandenen Inhalt des WordPress-Blogs 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 mobilfähiger zu machen.

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 E-Mail-Marketing-Tools integrieren, sodass Sie Ihre E-Mail-Liste ganz einfach erweitern können.

Weitere Informationen finden Sie in unserem vollständigen Bericht über WPForms.

WPForms

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“.

Select form template

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.

WPForms drag and drop form builder

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.

WPForms form editor panel

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“.

Go to form advanced settings

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.

Add inline CSS class

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.

Hide form labels toggle

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.

Add form placeholder text

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.

Add WPForms block

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.

Select single line form from drop down

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.

Single line form example

Bonus: Verwenden Sie OptinMonster zum Erstellen von Popups und Bannern

Neben der Erstellung von einzeiligen Formularen können Sie auch Opt-in-Popups und Banner auf Ihrer Website erstellen, um E-Mail-Leads zu erfassen.

Um dies zu tun, können Sie OptinMonster verwenden, das beste WordPress Conversion-Optimierungstool 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.

Fill contact form popup

Darüber hinaus können Sie auch attraktive Banner für Ihre Website erstellen, die die Nutzer 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.

Newsletter banner with OptinMonster

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 unsere Anleitung, wie Sie eine kostenlose E-Mail-Domain erhalten, und unsere Expertenauswahl der besten Apps für virtuelle Telefonnummern für Unternehmen mit kostenlosen Optionen.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

3 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.