So erstellen Sie ein responsives Kontaktformular mit mehreren Spalten

Das Erstellen eines responsiven Kontaktformulars mit mehreren Spalten klingt einfach, aber wenn man anfängt, damit zu arbeiten, können die Dinge schnell kompliziert werden.

Sie fragen sich vielleicht: „Kann ich dieses Formular wirklich auf allen Geräten gut aussehen lassen, ohne das Design zu zerstören?“ Das ist eine berechtigte Sorge, besonders wenn Sie mit Formularen zu kämpfen hatten, die auf Mobilgeräten nicht ganz passen oder sich klobig anfühlen.

Die gute Nachricht ist, dass Sie mit WPForms ein responsives Kontaktformular mit mehreren Spalten einrichten können. Befolgen Sie die Schritte in dieser Anleitung, um loszulegen!

Erstellen Sie jetzt Ihr Mehrspaltenformular! 🙂

So erstellen Sie ein Mehrspaltenformular in WPForms

Das Erstellen eines Mehrspaltenformulars in WPForms ist unglaublich einfach. Stellen Sie vor Beginn sicher, dass Sie eine WPForms Pro-Lizenz haben, da Sie mit diesem Plan das Layout-Feld zusammen mit unzähligen nützlichen Funktionen erhalten.

Sobald Sie die Lizenz erworben und WPForms auf Ihrer Website installiert haben, folgen Sie einfach den nachstehenden Schritten, um Spaltenlayouts in Ihrem Formular zu erstellen.

Schritt 1. Neues Formular erstellen

Beginnen wir mit der Erstellung eines neuen Formulars mit einem Spaltenlayout. Öffnen Sie dazu Ihr WordPress-Dashboard und gehen Sie zu WPForms » Neu hinzufügen.

Dadurch wird die WPForms-Formular-Builder-Oberfläche geöffnet. Sie können einen Namen eingeben, den Sie Ihrem Formular geben möchten, und eine Vorlage auswählen.

Für dieses Beispiel erstellen wir ein Formular von Grund auf neu. So können wir zuerst ein Mehrspaltenformularlayout auswählen und dann nach Belieben verschiedene Felder jeder Spalte zuweisen.

WPForms bietet jedoch mehrere fertige Vorlagen, die mehrere Spalten verwenden, wie z. B. die Vorlage für Kontaktformulare mit mehreren Spalten.

Um ein Formular von Grund auf neu zu erstellen, bewegen Sie den Mauszeiger über Leeres Formular (dies sollte der erste Eintrag in der Vorlagenliste sein) und drücken Sie Leeres Formular erstellen.

WPForms lädt nun ein leeres Formular, das Sie mit einfachen Drag-and-Drop-Steuerelementen erstellen können.

Fügen wir nun einige Felder zu diesem Formular hinzu und ordnen sie in einem Mehrspaltenlayout an.

Schritt 2. Felder zum Spaltenlayout hinzufügen

Um einen Bereich Ihres Formulars in mehrere Spalten aufzuteilen, müssen Sie lediglich das Layout-Feld hinzufügen.

Suchen Sie einfach im Abschnitt „Fancy Fields“ im linken Bereich und ziehen Sie das Feld Layout per Drag & Drop in das Formular auf Ihrer rechten Seite.

Nun fügen wir das Feld Name, E-Mail und Telefon in die linke Spalte und ein Feld Adresse in die rechte Spalte ein.

Der einfachste Weg, dies zu tun, besteht darin, auf eine Spalte zu klicken, um sie zu aktivieren, und dann auf die Felder zu klicken, die wir zu dieser Spalte hinzufügen möchten.

Beginnen wir damit, zuerst Felder der linken Spalte zuzuweisen. Wir klicken auf die linke Spalte, um sie als aktiv zu setzen (wie durch den Pfeil nach oben angezeigt).

Nun klicken wir auf die Felder Name, E-Mail und Telefon, damit sie nacheinander direkt in die aktive Spalte eingefügt werden.

Als Nächstes wiederholen wir den gleichen Vorgang für die Spalte auf der rechten Seite und fügen ihr das Feld Adresse hinzu.

Großartig! Dieses 2-Spalten-Formular sieht jetzt gut aus.

Aber was, wenn Sie unterschiedliche Breiten für die beiden Spalten wünschen? Oder vielleicht sogar mehr als 2 Spalten?

WPForms macht all das möglich, wie wir im nächsten Schritt zeigen.

Lesen Sie auch: Einspaltige Formulare: Beispiele und Inspiration

Schritt 3. Das Formularlayout anpassen

Standardmäßig erstellt das Layoutfeld 2 gleich große Spalten in Ihrem Formular. Sie können jedoch aus 8 verschiedenen Layouts wählen und bis zu 4 Spalten in einem einzigen Formular hinzufügen.

Um eine Layoutvorlage auszuwählen, klicken Sie einfach auf das Feld Layout, nachdem es zu Ihrem Formular hinzugefügt wurde.

Danach wählen Sie einfach ein Layout aus, das am besten zu Ihnen passt. Wenn Sie zum Beispiel eine schmale Spalte links, aber eine breitere Spalte rechts wünschen, können Sie die 3. Layoutoption wählen.

Wenn Sie 4 Spalten in Ihrem Formular haben möchten, wählen Sie einfach die entsprechende Layoutoption aus dem linken Bereich und ziehen Sie die Felder per Drag & Drop in die entsprechenden Spalten.

Wir empfehlen, mit verschiedenen Layouts zu experimentieren und Ihr Formular im Frontend in der Vorschau anzuzeigen, um zu überprüfen, ob alles in Ordnung ist. Unser Leitfaden zur Gestaltung von Formularlayouts gibt Ihnen einen guten Start.

Manchmal passt das gewählte Formularlayout möglicherweise nicht gut zum Seitenlayout und führt zu Ausrichtungsproblemen. Aber wenn Sie Ihr Formular-Testing gut durchführen und alles vor der Veröffentlichung überprüfen, sollte dies kein Problem sein.

Schritt 4. Benachrichtigung und Bestätigung Ihres Formulars konfigurieren

Die Konfiguration von Benachrichtigungen stellt sicher, dass Sie immer über neue Formulareinträge informiert werden. Gehen Sie im Formular-Builder zu Einstellungen und dann zu Benachrichtigungen.

Bearbeiten Sie von hier aus die Standard-Benachrichtigungseinstellungen, wie z. B. die Betreffzeile, oder ändern Sie bei Bedarf die Empfänger-E-Mails.

Sie können nun Bestätigungen im Menü Einstellungen auswählen, um Antworten für erfolgreiche Formularübermittlungen einzurichten.

Wählen Sie die Bestätigungstyp, der am besten zu Ihrer Website passt – eine Nachricht, eine Seitenanzeige oder eine Weiterleitung.

Denken Sie daran, Ihre Änderungen zu speichern, um Ihr Formular und seine Einstellungen auf dem neuesten Stand zu halten. Sie sind nun bereit, das Formular auf Ihrer WordPress-Website zu veröffentlichen!

Schritt 5. Veröffentlichen Sie Ihr Mehrspaltenformular

Nun ist es an der Zeit, zum letzten Schritt der Veröffentlichung überzugehen. Um den Einbettungsprozess zu starten, klicken Sie auf die Schaltfläche Einbetten neben Speichern.

Nachdem Sie auf die Schaltfläche Einbetten geklickt haben, sehen Sie ein Modal, das Sie fragt, ob Sie Ihr Formular in eine vorhandene Seite einbetten oder eine neue erstellen möchten. Wir wählen die Option Neue Seite erstellen , aber die Schritte sind in beiden Fällen sehr ähnlich.

Geben Sie Ihrer Seite einen Namen und klicken Sie auf Los geht's.

Sie finden das Formular in dieser neuen Seite eingebettet. Nehmen Sie hier mit dem WordPress-Editor Änderungen vor, und wenn Sie zufrieden sind, klicken Sie auf Veröffentlichen.

Hier sehen Sie, wie ein veröffentlichtes Mehrspalten-Formular im Frontend aussieht:

Und das ist alles! Sie können jetzt ganz einfach mehrspaltige Formulare in WPForms ohne Code erstellen. Vergessen Sie nicht: Sie können Ihre Formulare auch ganz einfach im Block-Editor gestalten.

FAQs zum Erstellen eines mehrspaltigen Formulars in WordPress

Was ist der Vorteil eines mehrspaltigen Formularlayouts?

Mehrspaltige Formulare können aus Sicht der Benutzerfreundlichkeit sehr vorteilhaft sein. Ein häufiges Szenario, in dem mehrspaltige Formulare nützlich sind, ist, wenn ein Formular lang genug ist, um einen vertikalen Scroll zu haben.

In diesem Szenario können Sie die Länge des Formulars verkürzen und es kompakter gestalten, indem Sie Ihre Felder in zwei oder mehr Spalten anordnen.

Ebenso kann ein langes Formular, wenn es in eine Seitenleiste eingebettet wird, besser passen und den vertikalen Scroll reduzieren, wenn Sie ein Spaltenlayout verwenden.

Es gibt keinen Einheitsansatz für effektives Formulardesign, weshalb es so wichtig ist, verschiedene Layoutoptionen für verschiedene Szenarien zur Verfügung zu haben.

Wie erstelle ich ein mehrspaltiges Formular?

Um ein mehrspaltiges Formular in WordPress zu erstellen, können Sie WPForms und seinen Drag-and-Drop-Builder verwenden. Sobald Ihr Formular eingerichtet ist, können Sie Felder einfach in mehrere Spalten aufteilen, indem Sie das Layout-Feld verwenden.

WPForms stellt automatisch sicher, dass das Formular responsiv ist, sodass es sich auf kleineren Bildschirmen anpasst und eine reibungslose Benutzererfahrung bietet.

Wie teile ich Daten in mehrere Spalten auf?

Mit WPForms ist das Aufteilen von Daten in mehrere Spalten unkompliziert.

Wählen Sie beim Erstellen Ihres Formulars einfach die Formularfelder aus, die Sie nebeneinander anzeigen möchten, und verwenden Sie die Drag-and-Drop-Funktionalität, um sie einem Layout-Feld hinzuzufügen.

WPForms kümmert sich um den Rest und stellt sicher, dass Ihre Spalten auf allen Geräten korrekt angezeigt werden.

Nutzen Sie als Nächstes den Net Promoter Score für Umfragen

Wenn Sie die Kundenzufriedenheit messen möchten, ist das beste Umfrageinstrument dafür der Net Promoter Score (NPS). WPForms macht es sehr einfach, Umfrageformulare mit der Net Promoter Scale zu erstellen, wie wir in diesem Leitfaden erklären.

Wenn Sie Probleme damit haben, dass Benutzer ihre E-Mail-Adressen nicht korrekt eingeben, erfahren Sie hier, wie Sie ein Bestätigungs-E-Mail-Feld hinzufügen, um dies zu verhindern. Außerdem finden Sie unseren Leitfaden zu den Top-Umfragefragen „Wie sind Sie auf uns aufmerksam geworden?“ möglicherweise interessant.

Und wenn Sie sich nicht sicher sind, welches Spam-Schutz-Tool Sie für Ihre Formulare verwenden sollen, sehen Sie sich unseren Vergleich von Akismet vs. reCAPTCHA an.

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.