So fügen Sie ein Formular-Headerbild oder -Logo in WordPress hinzu

Möchten Sie lernen, wie Sie ein Formular-Headerbild oder -Logo in WordPress hinzufügen?

Das Hinzufügen eines Bildes ist eine großartige Möglichkeit, Ihr Formular zu personalisieren, den Benutzern einen Eindruck davon zu vermitteln, worum es in dem Formular geht, oder ein Logo für Ihr Unternehmen hervorzuheben.

Glücklicherweise ist es mit WPForms ganz einfach. Das Inhaltsfeld in WPForms vereinfacht den Prozess des direkten Hochladens von Text und Medien, wie Bildern oder Logos, in Ihre Formulare.

In diesem Beitrag führen wir Sie durch den Prozess der Verwendung des Inhaltsfelds, um ein Formular-Headerbild in WordPress hinzuzufügen.

Fügen Sie jetzt ein Headerbild zu Ihrem Formular hinzu

Warum sollte ich ein Headerbild zu einem Formular hinzufügen?

Die Personalisierung Ihres Formulars mit einem benutzerdefinierten Headerbild ist eine einfache Möglichkeit, Ihre WordPress-Website mit einem konsistenten, zusammenhängenden Design zu ergänzen. Da unser Drag-and-Drop-Formular-Builder die Anpassung von Formularen zum Kinderspiel macht, können Sie Ihre Bilder in einer Vielzahl von Stilen verwenden.

Darüber hinaus gibt ein Bild Ihren Website-Benutzern eine klare Vorstellung davon, was sie von Ihrer Website und Ihrem Formular erwarten können. Bilder helfen auch dabei, visuelles Interesse an Ihren Formularen zu wecken und sie mit dem Farbschema und dem Design-Thema Ihrer Website zu verbinden.

Ihr Headerbild kann das Thema des Inhalts in Ihrem Formular widerspiegeln, oder es kann ein Bild sein, das Ihr Unternehmen oder Ihre Organisation repräsentiert, wie z. B. ein Logo.

So fügen Sie ein Formular-Headerbild oder -Logo in WordPress hinzu

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen , wie Sie den Header in WordPress-Formularen bearbeiten, ohne Code zu verwenden. Dieses Tutorial ist perfekt für Anfänger und erfordert weder benutzerdefiniertes CSS, noch einen Page Builder oder den WordPress Customizer.

Folgen Sie einfach diesem Inhaltsverzeichnis für alle Schritte, die wir Ihnen zeigen werden:

1. Installieren Sie das WPForms-Plugin

Zuerst müssen Sie das WPForms-Plugin installieren. Sehen Sie sich alle WPForms-Lizenzen hier an oder laden Sie das Plugin von Ihrem WordPress-Dashboard herunter.

Um die Upload-Funktionalität des Inhaltsfelds zum Hinzufügen eines Formular-Headerbildes nutzen zu können, benötigen Sie eine aufgerüstete Lizenz wie Pro, Plus oder Elite.

Hier ist ein hilfreiches Tutorial, wie man ein WordPress-Plugin installiert.

2. Wählen Sie die Vorlage für einfache Kontaktformulare

Sobald das Plugin auf Ihrer Website eingerichtet ist, navigieren Sie zu WPForms in Ihrem WordPress-Dashboard und klicken Sie auf Neu hinzufügen.

Von hier aus finden Sie eine große Auswahl an Vorlagen, aus denen Sie Ihr Formular erstellen können.

Aber zuerst benennen wir das Formular. Für dieses Tutorial nennen wir unser Formular „Kontaktieren Sie uns“, das am oberen Rand des Formulars angezeigt wird.

Jetzt wählen wir das einfache Kontaktformular aus.

Dies führt uns zu einer neuen Seite, auf der wir den einfach zu bedienenden Formular-Builder verwenden, um diese Vorlage anzupassen.

3. Fügen Sie das Inhaltsfeld hinzu

Jetzt, da wir uns im Formular-Builder befinden, fügen wir das Inhaltsfeld aus den Auswahlen im Tab Felder hinzu.

Klicken Sie einfach auf Inhalt und ziehen Sie das Feld per Drag-and-Drop dorthin, wo Sie es in Ihrem Formular haben möchten.

Wir ziehen das Inhaltsfeld an den Anfang der Seite, sodass die hochgeladene Mediendatei als Kopfzeilenbereich für unser Formular dient.

Wenn das Inhaltsfeld im Vorschau-Bereich platziert ist, klicken wir darauf, um auf seine Feldoptionen zuzugreifen, unsere Mediendatei hinzuzufügen und den Text mit dem einfachen Editor im linken Bereich zu bearbeiten.

Sie können Ihre Inhalte visuell bearbeiten oder den Texteditor verwenden, um sie mit HTML zu bearbeiten.

Großartig! Jetzt sind wir bereit, unser Bild hochzuladen und Text in das Formular einzugeben.

4. Laden Sie Ihr Firmenlogo/Bild hoch

Als Nächstes klicken wir auf Medien hinzufügen, um unser Bild in das Inhaltsfeld hochzuladen.

Sie können ein neues Bild hochladen oder eines aus Ihrer Mediathek auswählen. JPG- und PNG-Dateien werden akzeptiert.

Mit unserem benutzerdefinierten Logo an Ort und Stelle können wir dann Anpassungsoptionen wie Bildgröße, Ausrichtung und andere Details bearbeiten.

Um sicherzustellen, dass unser Bild als Formular-Kopfzeile dient, sind wir zum Tab Erweitert gegangen und haben die Feldgröße auf Groß gesetzt.

Dann, zurück im Tab Allgemein, haben wir sichergestellt, dass das Bild mit den Formatierungsoptionen im Textfeld zentriert ist.

Wir haben auch die Möglichkeit, den Text im Feld zu bearbeiten. Wir haben den Text hier zu einer kurzen Nachricht für Besucher und einer Aufforderung zum Ausfüllen des Kontaktformulars bearbeitet.

Wie die Mediendatei darüber können Sie den Text mit dem Inhaltsfeld frei formatieren. Klicken Sie unter dem Textfeld auf Editor erweitern, um noch mehr Bearbeitungsoptionen zu erhalten.

Für unser Logo hier haben wir den Text mit dem Rest des Bildes zentriert.

Sie möchten vielleicht auch die anderen Felder im Formular anpassen.

Zum Beispiel haben wir die Größe des Namensfeldes auf Groß erhöht, um die Breite unseres Kopfbildes darüber anzupassen.

Es gibt viele Möglichkeiten, die Details der Felder im Formular nach Belieben anzupassen, und Sie können Ihre Änderungen währenddessen in der Vorschau anzeigen.

Klicken Sie unbedingt auf Vorschau aktualisieren, um die Anpassungen am Inhaltsfeld zu sehen.

Ausgezeichnet! Wir sind jetzt bereit, das Formular auf jeder beliebigen Seite einzubetten!

5. Speichern & Formular einbetten

Drücken Sie die Schaltfläche Speichern in der oberen rechten Ecke des Formulars, um die Änderungen in der Seitenvorschau zu sehen.

Unabhängig davon, ob Sie die Seitenvorschau überprüfen oder nicht, müssen Sie auf Speichern klicken, bevor Sie fortfahren.

Nun klicken wir auf die Schaltfläche Einbetten oben, um dieses Formular auf einer neuen Seite unserer WordPress-Website hinzuzufügen.

Nachdem wir auf Einbetten geklickt haben, wählen wir aus, wo das neue Formular platziert werden soll.

Wir haben die Option, eine vorhandene Seite auszuwählen oder eine neue Seite zu erstellen. Für dieses Tutorial erstellen wir eine neue Seite, daher klicken wir auf Neue Seite erstellen.

Danach werden wir aufgefordert, der neuen Seite einen Namen zu geben.

Wir nennen unsere Seite „Kontaktieren Sie uns“, da dies der Name ist, den wir diesem Formular gegeben haben, als wir die Vorlage ausgewählt haben.

Wir können das Formular jetzt auf einer neu erstellten Seite für unsere WordPress-Website sehen. Von hier aus können wir die Seite in der Vorschau anzeigen, die Seite als Entwurf speichern oder sie veröffentlichen.

Wir empfehlen, die Blockeinstellungen auf der rechten Seite des Editors zu konfigurieren, um den Formulartitel auszublenden, falls Sie dies noch nicht getan haben. Sie möchten nicht, dass er vom Kopfzeilenbild Ihres Formulars ablenkt.

Stellen Sie einfach sicher, dass der Schalter Titel anzeigen ausgeschaltet ist.

Wenn Sie bereit sind, klicken Sie auf Veröffentlichen, um diese Seite auf Ihrer Website live zu schalten.

Fantastisch! Sie haben nun erfolgreich eine Formular-Kopfzeile mit einem Bild oder Logo zu Ihrer WordPress-Website hinzugefügt.

Fügen Sie jetzt ein Headerbild zu Ihrem Formular hinzu

Als Nächstes: Stoppen Sie Spam in Kontaktformularen in WordPress.

Mit einer attraktiven neuen Form, die mit Ihrem gewählten Kopfzeilenbild angepasst wurde, werden Sie viele Website-Besucher einladen, Ihr Formular auszufüllen.

Aber Sie möchten keinen Spam mit Ihrem neuen Formular sammeln.

Um Spammer daran zu hindern, Ihre Formulare auszufüllen, lesen Sie diesen Artikel darüber, wie Sie Spam-Einreichungen in Ihren WordPress-Formularen verhindern.

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-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.