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)

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.

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

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

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.

Fill contact form popup

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.

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

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 .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

2 KommentareEine Antwort hinterlassen

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

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.