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

Möchten Sie ein Bild in Ihre Formularüberschrift einfügen? Vielleicht ist es Ihr Logo, ein Banner, das zu Ihrer Website passt, oder ein Foto, das den Besuchern zeigt, worum es in dem Formular geht.

Was auch immer Sie sich vorstellen, ein einfacher Block mit grauen Feldern tut Ihrer Marke keinen Gefallen. Ich habe so viele schöne Websites mit Formularen gesehen, die aussahen, als wären sie von jemand anderem ausgeliehen worden.

Die Lösung ist das Inhaltsfeld in WPForms. Es ermöglicht Ihnen, Bilder, Logos und Text direkt in Ihre Formulare einzufügen, ganz ohne Code.

In diesem Beitrag führe ich Sie Schritt für Schritt durch den gesamten Prozess des Einfügens eines Formularüberschriftenbildes in WordPress.

Fügen Sie jetzt ein Headerbild zu Ihrem Formular hinzu

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

Ein benutzerdefiniertes Formularüberschriftenbild ist eine der schnellsten Möglichkeiten, Ihr Formular so aussehen zu lassen, als würde es tatsächlich zu Ihrer Website gehören. Anstelle eines generischen Feldesatzes sehen die Besucher zuerst Ihr Branding, was Vertrauen aufbaut, bevor sie auch nur einen Buchstaben tippen.

Es setzt auch Erwartungen. Ein Kopfzeilenbild oder Logo gibt den Menschen eine klare Vorstellung davon, wen sie kontaktieren und warum, und es verbindet Ihr Formular mit dem Farbschema und dem Design-Thema Ihrer gesamten Website.

Ihre Kopfzeile kann das Thema des Formulars widerspiegeln oder einfach Ihr Geschäftslogo sein. Und wenn Sie auf jedem Formular, das Sie erstellen, den gleichen gebrandeten Look wünschen, können Sie gebrandete Formularvorlagen erstellen, damit jedes neue Formular bereits mit Ihrer Kopfzeile beginnt.

Logos gibt es auch in allen Größen. Wenn Sie sich fragen, wie groß Ihres sein sollte, lesen Sie unseren Leitfaden zur besten Logo-Größe für Websites.

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

In dieser Schritt-für-Schritt-Anleitung zeige ich Ihnen, wie Sie ein Header-Bild oder Logo zu Ihren WordPress-Formularen hinzufügen, ohne eine einzige Zeile Code anfassen zu müssen. Dieses Tutorial ist perfekt für Anfänger, und Sie benötigen weder benutzerdefiniertes CSS, noch einen Page Builder oder den WordPress Customizer.

Schritt 1: Installieren Sie das WPForms Basic Plugin

WPForms ist der einfachste Weg, um gebrandete Formulare in WordPress zu erstellen. Sie erhalten einen Drag-and-Drop-Builder plus über 2.100 Vorlagen, mit denen Sie beginnen können, sodass Sie nie auf ein leeres Formular starren und sich fragen, wo Sie anfangen sollen.

Was mir an WPForms für diese spezielle Aufgabe am besten gefällt, ist, dass das Inhaltsfeld genauso funktioniert wie der WordPress-Editor, den Sie bereits kennen. Das Hinzufügen Ihres Logos zu einem Formular fühlt sich genauso an wie das Hinzufügen eines Bildes zu einem Blogbeitrag, bis hin zur Schaltfläche Medien hinzufügen.

Sie benötigen eine Lizenz, um das Inhaltsfeld verwenden zu können, da es nicht in Lite enthalten ist. Die gute Nachricht ist, dass es ab Basic, der ersten kostenpflichtigen Stufe, freigeschaltet wird, sodass Sie keinen teureren Plan benötigen, nur um Ihre Formulare zu branden.

Um loszulegen, kaufen Sie die Basic-Lizenz. Installieren Sie dann WPForms auf Ihrer Website. Wenn Sie Hilfe benötigen, folgen Sie dieser Anleitung, wie Sie ein Plugin zu WordPress hinzufügen.

Jetzt Basic-Lizenz von WPForms holen!

Schritt 2: Wählen Sie die Vorlage „Einfaches Kontaktformular“

Sobald Sie das Plugin auf Ihrer Website eingerichtet haben, gehen Sie in Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen.

Von hier aus finden Sie eine riesige Bibliothek von Formularvorlagen zur Auswahl.

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 die Vorlage Einfaches Kontaktformular.

Dies bringt uns direkt zum Drag-and-Drop-Formular-Builder, wo wir die Vorlage anpassen werden.

Schritt 3: Das Inhaltsfeld hinzufügen

Jetzt, da wir uns im Formular-Builder befinden, finden Sie das Feld Inhalt auf der Registerkarte Felder.

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

Wir ziehen das Inhaltsfeld an den oberen Rand des Formulars, damit die hochgeladene Mediendatei als Kopfzeilenbereich dient.

Wenn das Feld im Vorschaufenster platziert ist, klicken Sie darauf, um seine Feldoptionen zu öffnen. Hier fügen Sie Ihre Medien hinzu und bearbeiten den Text im linken Bereich des Editors.

Sie können Ihre Inhalte visuell bearbeiten oder zum Texteditor wechseln, um in HTML zu arbeiten. Eine vollständige Übersicht über alles, was dieses Feld leisten kann, finden Sie in unserem vollständigen Leitfaden zur Verwendung des Inhaltsfelds.

Großartig! Jetzt sind wir bereit, unser Bild hochzuladen und dem Formular etwas Text hinzuzufügen.

Schritt 4: Ihr Firmenlogo oder Bild hochladen

Klicken Sie als Nächstes auf Medien hinzufügen, um Ihr 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.

Ein paar schnelle Tipps, bevor Sie hochladen. Für Logos verwenden Sie ein PNG mit transparentem Hintergrund, damit Ihr Logo nicht in einer weißen Box sitzt, und eine Breite von etwa 200 Pixeln ist ein guter Ausgangspunkt. Für Banner-Header-Bilder wählen Sie etwas, das mindestens so breit ist wie Ihr Formular, etwa 700 bis 800 Pixel für die meisten WordPress-Inhaltsbereiche, damit es in voller Größe scharf bleibt.

Haben Sie noch kein Logo? Diese KI-Logo-Generatoren können Ihnen in wenigen Minuten ein solides Logo erstellen.

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 echter Formular-Header fungiert, haben wir zum Tab Erweitert gewechselt und die Feldgröße auf Groß gesetzt.

Dann, zurück im Tab Allgemein, haben wir sichergestellt, dass das Bild im Feld zentriert ist, indem wir die Formatierungsoptionen im Texteditor verwendet haben.

Wir können auch den Text im Feld bearbeiten. Hier haben wir eine kurze Willkommensnachricht für Besucher geschrieben, plus eine freundliche Aufforderung, das Kontaktformular auszufüllen.

Wie die Medien darüber können Sie den Text im 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 Feldes Name auf Groß geändert, um sie an die Breite unseres Header-Bildes darüber anzupassen.

Es gibt viele Möglichkeiten, die Felder in Ihrem Formular fein abzustimmen, 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.

Unser Header sieht großartig aus, also bringen wir dieses Formular auf eine Seite.

Schritt 5: Das Formular speichern und einbetten

Drücken Sie die Schaltfläche Speichern in der oberen rechten Ecke des Formular-Builders, um Ihre Änderungen zu übernehmen.

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

Klicken Sie nun auf die Schaltfläche Einbetten oben, um dieses Formular zu einer Seite auf Ihrer WordPress-Website hinzuzufügen.

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

Sie können eine vorhandene Seite auswählen oder eine neue erstellen. Für dieses Tutorial erstellen wir eine neue Seite, also 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 nun das Formular auf einer neu erstellten Seite für unsere WordPress-Website sehen. Von hier aus können wir die Seite in der Vorschau anzeigen, als Entwurf speichern oder veröffentlichen.

Eine weitere Empfehlung. In den Blockeinstellungen auf der rechten Seite des Editors, blenden Sie den Formular-Titel aus, damit er nicht mit Ihrem neuen Header-Bild konkurriert.

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 jetzt ein Formular mit einem benutzerdefinierten Header-Bild oder Logo, und das Ganze hat Sie wahrscheinlich weniger als zehn Minuten gekostet.

FAQs zum Hinzufügen eines Formular-Header-Bildes in WordPress

Das Hinzufügen eines Header-Bildes oder Logos zu Ihren WordPress-Formularen wirft tendenziell die gleichen Fragen auf. Hier sind schnelle Antworten auf die, die wir am häufigsten hören.

Warum finde ich das Inhaltsfeld in WPForms nicht?

Das Inhaltsfeld ist in WPForms Basic und höher verfügbar, daher erscheint es nicht in der Feldliste, wenn Sie die kostenlose Lite-Version verwenden. Rüsten Sie auf eine kostenpflichtige Lizenz auf, und das Feld wird im Formular-Builder angezeigt.

Welche Größe sollte ein Formularüberschriftenbild haben?

Für ein Logo eignen sich etwa 200 Pixel Breite mit einem transparenten PNG-Hintergrund gut. Für eine Banner-ähnliche Kopfzeile passen Sie die Breite Ihres Formulars an, die in einem Standard-WordPress-Inhaltsbereich normalerweise 700 bis 800 Pixel beträgt. Wenn Sie nahe an der Anzeigegröße beginnen, bleibt Ihr Bild gestochen scharf.

Kann ich irgendwo anders Bilder in mein Formular einfügen?

Auf jeden Fall. Das Feld „Inhalt“ kann überall in Ihrem Formular platziert werden, und Sie können auch mehrere davon verwenden. Wenn Sie Bilder neben Ihren Fragen oder an anderen kreativen Stellen wünschen, erfahren Sie hier, wie Sie Bilder in Ihren WordPress-Formularen überall hinzufügen.

Kann ich mein Formular so gestalten, dass es zum Branding meiner Website passt?

Ja. Wenn Sie Ihr Formular mit dem WPForms-Block einbetten, können Sie Farben, Hintergründe und Feldstile direkt im Block-Editor ändern, ohne CSS schreiben zu müssen. Unser Leitfaden zum Gestalten Ihrer Formulare erklärt jede Option.

Kann ich den Header meiner Website anstelle des Formular-Headers ändern?

Dieses Tutorial behandelt den Header-Bereich eines Formulars. Wenn Sie den Header Ihrer gesamten Website aktualisieren möchten, wird dies von Ihrem Theme gesteuert, und wir behandeln es in unserem Leitfaden, wie Sie den Header Ihrer Website in WordPress bearbeiten.

Als Nächstes: Kontaktformular-Spam in WordPress stoppen

Mit einem attraktiven neuen Header für Ihr Formular werden Sie viel mehr Besucher dazu einladen, es auszufüllen. Sie möchten jedoch nicht, dass die Hälfte dieser Einträge Schrott ist.

Um Spammer von Ihrem glänzenden neuen Formular fernzuhalten, lesen Sie unseren Leitfaden, wie Sie Spam-Einreichungen in Ihren WordPress-Formularen verhindern.

Erstellen Sie jetzt Ihr gebrandetes Formular

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