KI-Zusammenfassung
Möchten Sie, dass Ihre Formularfelder in einer einzigen Zeile angezeigt werden? Ein einzeiliges Formularlayout kann Ihnen helfen, es an wichtigen Stellen Ihrer Website (wie im oberen Bereich Ihrer Homepage) zu platzieren, um maximale Sichtbarkeit zu erzielen.
In diesem Tutorial zeigen wir Ihnen, wie Sie Ihr Formular in einer einzigen Zeile anzeigen.
Hinweis: Wenn Sie eine einfache Drag-and-Drop-Option zur Anpassung des Formularlayouts bevorzugen, empfehlen wir die Verwendung des Layout-Felds. Die in diesem Tutorial behandelte Klasse inline-fields wird jedoch weiterhin unterstützt und empfohlen, wenn Sie den Senden-Button in derselben Zeile wie Ihre Formularfelder ausrichten möchten.
In unserem Beispiel erstellen wir ein Formular mit drei Formularfeldern: Name, Telefon und E-Mail.
Um die Formularfelder in einer einzigen Zeile anzuzeigen, navigieren Sie im Formular-Generator zu Einstellungen » Allgemein und fügen Sie die CSS-Klasse inline-fields in das Feld Formular-CSS-Klasse ein.
Hinweis: Bitte beachten Sie, dass die Verwendung der Klasse inline-fields in WPForms manchmal mit den Stilen Ihres WordPress-Themes in Konflikt geraten kann. Infolgedessen entspricht das Erscheinungsbild möglicherweise nicht Ihren Erwartungen.
Um die Höhe Ihres Formulars zu reduzieren, öffnen Sie den Abschnitt Erweitert jedes Feldes und wählen Sie die Option Label ausblenden.
Als Nächstes richten wir einen Platzhaltertext ein, um den Benutzern Anleitungen zu geben. In unserem Beispiel fügen wir E-Mail als Platzhaltertext für unser E-Mail-Feld hinzu.
Hinweis: Wenn Sie das Erscheinungsbild des Senden-Buttons an den Stil Ihres Formulars anpassen möchten, können Sie unseren Leitfaden zur Anpassung des Senden-Buttons befolgen.
So wird das Formular im Frontend der Website aussehen:
Hinweis: Wenn Sie nach einem weiteren Beispiel oder einer fertigen Vorlage für ein einzeiliges Formular suchen, sehen Sie sich unsere Vorlage für ein einzeiliges Newsletter-Anmeldeformular an.
Das ist alles! Jetzt können Sie Formulare erstellen, die in einer einzigen Zeile angezeigt werden.
Möchten Sie als Nächstes eine Kopie der von Ihren Benutzern über Ihre Formulare übermittelten Informationen erhalten? Lesen Sie unbedingt unser Tutorial zum Einrichten von Formularbenachrichtigungen für weitere Details.