KI-Zusammenfassung
Die meisten WordPress-Formulare sind einfacher Text, was für ein einfaches Kontaktformular in Ordnung ist. Aber ein wenig visuelle Aufbereitung kann einen großen Unterschied machen, sei es Ihr Logo oben, ein Produktfoto oder bildbasierte Antwortmöglichkeiten, die leichter zu überblicken sind als einfache Optionen.
Das Hinzufügen eines Bildes zu einem WordPress-Formular ist einfacher als Sie vielleicht erwarten, und Sie müssen keinen Code schreiben. Ich führe Sie Schritt für Schritt durch den gesamten Prozess, von der Installation des Plugins bis zum Einfügen Ihres Bildes und der Veröffentlichung des fertigen Formulars.
Erstellen Sie jetzt Ihr WordPress-Bildformular! 🙂
So fügen Sie ein Bild zu WordPress hinzu
Der Prozess zum Hinzufügen von Bildern zu WordPress variiert je nachdem, wo genau Sie ein Bild einfügen. In diesem Tutorial zeigen wir Ihnen einige der gängigsten Szenarien für das Hochladen von Bildern in WordPress.
Schritt 1: Installieren Sie das WPForms Pro Plugin
WPForms ist das anfängerfreundlichste Formular-Plugin für WordPress mit über 2.100 Formularvorlagen und einem Drag-and-Drop-Builder, sodass Sie mit einer fertigen Vorlage anstelle einer leeren Seite beginnen können.
Was mir an WPForms am besten gefällt, ist das Inhaltsfeld. Es bietet Ihnen einen kleinen visuellen Editor direkt im Formular-Builder, sodass Sie ein Bild hochladen, eine Überschrift hinzufügen oder ein Logo einfügen können, ohne die Seite zu verlassen oder HTML zu berühren.
Das Inhaltsfeld ist eine kostenpflichtige Funktion. Sie benötigen daher eine WPForms Pro-Lizenz, um es nutzen zu können. Diese schaltet auch die vollständige Vorlagenbibliothek sowie Zahlungen, Umfragen und die anderen Add-ons frei, die Sie wahrscheinlich benötigen werden, wenn Ihre Formulare wachsen.
Um zu beginnen, holen Sie sich die WPForms Pro-Lizenz. Sobald Sie sie gekauft haben, installieren und aktivieren Sie das Plugin auf Ihrer Website. Wenn Sie noch nie ein Plugin hinzugefügt haben, führt Sie unser Leitfaden zur Installation von WPForms durch den Prozess.
Upgrade auf WPForms Pro jetzt!
Schritt 2: Erstellen Sie Ihr Formular
Wenn WPForms aktiv ist, ist es an der Zeit, das Formular zu erstellen, das Ihr Bild enthalten wird. Gehen Sie von Ihrem WordPress-Dashboard zu WPForms » Neu hinzufügen, um den Formular-Builder zu öffnen.
Geben Sie auf dem Einrichtungsbildschirm Ihrem Formular einen Namen und wählen Sie eine Vorlage aus, mit der Sie beginnen möchten. Ich werde die Vorlage Einfaches Kontaktformular verwenden. Fahren Sie also mit der Maus darüber und klicken Sie auf Vorlage verwenden.
Die Vorlage wird im Builder mit allen Standardfeldern geladen, die bereits vorhanden sind und von Ihnen angepasst werden können.
Schritt 3: Fügen Sie ein Bild in Ihr Formular ein
Um Ihr Bild hinzuzufügen, verwenden Sie das Feld Inhalt, mit dem Sie Bilder, Überschriften und formatierten Text überall in Ihrem Formular platzieren können. Wenn Sie eine vollständige Übersicht darüber erhalten möchten, was es kann, finden Sie in der Dokumentation zum Inhaltsfeld weitere Informationen.
Suchen Sie das Feld Inhalt im linken Bereich und ziehen Sie es in Ihr Formular. Ich füge oben ein Logo hinzu, also ziehe ich das Feld über die anderen Felder.
Klicken Sie auf das Feld, das Sie gerade hinzugefügt haben, um seine Feldoptionen auf der linken Seite zu öffnen, wo Sie einen kleinen visuellen Editor zum Hinzufügen von Inhalten finden.
Klicken Sie direkt über dem Editor auf die Schaltfläche Medium hinzufügen.
Klicken Sie dann auf Dateien auswählen, um ein Bild von Ihrem Computer hochzuladen, oder wählen Sie eines aus Ihrer Mediathek aus.
Sobald Ihr Bild hochgeladen ist, können Sie Details wie den Alternativtext und den Titel eingeben. Wenn Sie fertig sind, klicken Sie unten auf In Formular einfügen.
Das Bild wird dem Feld hinzugefügt, obwohl es in der Formularvorschau noch nicht sofort angezeigt wird. Klicken Sie unter dem Editor auf die Schaltfläche Vorschau aktualisieren, damit es erscheint.
So sieht das Formular aus, nachdem das Bild platziert und die Vorschau aktualisiert wurde.
Wenn Sie mehr Kontrolle darüber haben möchten, wie Ihr Inhalt aussieht, klicken Sie unten rechts auf die Schaltfläche Editor erweitern.
Von dort aus können Sie die Ausrichtung ändern, eine Aufzählungsliste hinzufügen und Text genauso formatieren wie in einem Beitrag.
Wenn alles richtig aussieht, klicken Sie im oberen rechten Bereich des Builders auf Speichern. Dieses Content-Feld ist dasselbe, das Sie zum Hinzufügen eines Header-Bildes oder Logos verwenden würden, sodass es die meisten visuellen Elemente abdeckt, die ein Formular benötigt.
Schritt 4: Veröffentlichen Sie Ihr Formular
Nachdem Ihr Bild platziert ist, ist der letzte Schritt, das Formular auf Ihre Website zu bringen. WPForms verfügt über einen integrierten Einbettungsassistenten, der dies mit wenigen Klicks erledigt.
Klicken Sie zunächst auf die Schaltfläche Einbetten oben im Formular-Generator.
Ein Fenster wird geöffnet und fragt, wohin das Formular verschoben werden soll. Ich klicke auf Neue Seite erstellen, um es auf einer neuen Seite zu platzieren.
Geben Sie der neuen Seite einen Namen und klicken Sie dann auf Los geht's.
WPForms bringt Sie in den WordPress-Editor, wobei Ihr Formular bereits eingebettet ist. Wenn Sie damit zufrieden sind, klicken Sie auf Veröffentlichen, um es live zu schalten.
Ihr Formular ist jetzt live und Ihr Bild wird genau dort angezeigt, wo Sie es platziert haben.
Weitere Möglichkeiten, Bilder zu Ihren Formularen hinzuzufügen
Das Content-Feld deckt die meisten Situationen ab, aber WPForms bietet Ihnen ein paar andere Möglichkeiten, mit Bildern zu arbeiten. Diese sind optional, also verwenden Sie, was immer zu dem passt, was Sie erstellen.
Bildoptionen zu Formularfeldern hinzufügen
Dies funktioniert mit Feldern wie Multiple Choice, Checkboxes und Multiple Items, und es ist eine kostenlose Funktion, sodass Sie es auch mit WPForms Lite ausprobieren können.
Sie können die vollständige Liste der unterstützten Felder in der Anleitung zu Bildauswahlen einsehen. Um sie zu aktivieren, öffnen Sie die Feldoptionen des Feldes und schalten Sie den Schalter Bildauswahlen verwenden ein.
Anschließend erhalten Sie für jede Auswahl eine Schaltfläche Bild hochladen. Klicken Sie darauf, um dieser Option ein Bild hinzuzufügen.
Wiederholen Sie dies für den Rest Ihrer Auswahlmöglichkeiten, und eine einfache Liste verwandelt sich in eine Reihe visueller Optionen, die Ihre Besucher auswählen können.
Wenn Sie lieber Symbole als eigene Bilder verwenden möchten, schalten Sie stattdessen den Schalter Symbolauswahlen verwenden um und wählen Sie aus der integrierten Symbolbibliothek.
Als konkretes Beispiel erfahren Sie hier, wie Sie ein Bild neben Radio-Buttons in Ihren Formularen hinzufügen.
Bilder mit HTML-Code hinzufügen
Wenn Sie lieber mit Code arbeiten oder ein Bild einfügen möchten, das bereits online gehostet wird, ist das HTML-Feld eine weitere Option. Sie benötigen die URL des Bildes für diese Option.
Wenn Ihr Bild noch nicht online ist, laden Sie es zuerst hoch. Gehen Sie in Ihrem Dashboard zu Medien » Neue Mediendatei hinzufügen.
Klicken Sie auf Dateien auswählen und wählen Sie das Bild von Ihrem Computer aus.
Sobald der Upload abgeschlossen ist, klicken Sie auf URL in die Zwischenablage kopieren, um den Link zu erhalten.
Öffnen Sie nun das Formular, das Sie bearbeiten möchten, oder erstellen Sie ein neues. Um ein vorhandenes Formular zu bearbeiten, gehen Sie zu WPForms » Alle Formulare.
Wählen Sie das gewünschte Formular auf der Seite Formularübersicht aus.
Ziehen Sie im Builder das HTML-Feld in Ihr Formular.
Klicken Sie auf das Feld, um seine Feldoptionen auf der linken Seite zu öffnen.
Sie können eine Beschriftung hinzufügen, um das Feld später leichter identifizieren zu können. Sie wird jedoch nicht im Frontend angezeigt. Um Ihr Bild anzuzeigen, ziehen Sie es in ein Bild-Tag im Code-Feld. Das Format sieht so aus: <img src="[URL Ihrer Bilddatei]">, wobei Ihre eigene URL den Platzhalter ersetzt.
Im Gegensatz zum Inhaltsfeld wird das HTML-Feld im Builder nicht in der Vorschau angezeigt. Um Ihre Arbeit zu überprüfen, klicken Sie oben auf die Schaltfläche Vorschau, um das gesamte Formular anzuzeigen.
Von dort aus veröffentlichen Sie das Formular auf die gleiche Weise, wie ich es Ihnen zuvor gezeigt habe.
FAQs zum Hinzufügen von Bildern zu WordPress-Formularen
Das Hinzufügen von Bildern zu Ihren Formularen wirft einige häufige Fragen auf. Hier sind schnelle Antworten auf die, die ich am häufigsten höre.
Können Sie kostenlos ein Bild zu einem WordPress-Formular hinzufügen?
Ja, teilweise. Bildoptionen für auswählbare Felder funktionieren im kostenlosen WPForms Lite-Plugin. Das Inhaltsfeld, die einfachste Möglichkeit, ein Logo oder ein eigenständiges Bild hinzuzufügen, ist eine kostenpflichtige Funktion, die ab dem Basic-Plan verfügbar ist.
Wie lasse ich Besucher ihre eigenen Bilder auf mein Formular hochladen?
Das ist ein anderes Feld namens Datei-Upload, mit dem Personen Bilder oder Dokumente anhängen können, wenn sie sie absenden. Sie können sehen, wie es funktioniert, auf der Feature-Seite für Datei-Uploads.
Wie füge ich ein Logo zu meinem Formular hinzu?
Verwenden Sie das Inhaltsfeld oben in Ihrem Formular und laden Sie Ihr Logo als Bild hoch. Für eine Anleitung, die sich nur darauf konzentriert, folgen Sie unserer Anleitung, wie Sie ein Kopfzeilenbild oder Logo zu einem WordPress-Formular hinzufügen.
Als Nächstes: Lassen Sie Besucher ihre eigenen Bilder einreichen
Nachdem Sie nun Bilder zu Ihren Formularen hinzufügen können, möchten Sie vielleicht das Gegenteil tun und Ihren Besuchern erlauben, eigene Bilder über ein Formular nach WordPress hochzuladen. Die Einrichtung ist genauso einfach.
Möchten Sie die Darstellung Ihrer Formulare weiter verfeinern? Schauen Sie sich unsere Anleitung zum Styling von WPForms mit dem Block-Editor an, die Ihnen zeigt, wie Sie Ihre Formulare ohne Code gestalten.
Erstellen Sie jetzt Ihr WordPress-Bildformular! 🙂
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.
Hallo.
Wenn ich ein Bild in mein Formular einfügen möchte, passt es sich nicht an die Größe des Formulars an, es ist immer zu groß.
Wie kann ich es „responsiver“ machen?
Danke!
Hallo Guillaume – Entschuldigen Sie die Schwierigkeiten damit! Um Bilder responsiv zu machen, könnten Sie Bildgrößen in % hinzufügen und die Größe anpassen, wie z.B.
Um sicherzustellen, dass wir Ihre Frage so gründlich wie möglich beantworten, könnten Sie sich bitte mit weiteren Details darüber, was Sie tun möchten, an unser Support-Team wenden?
Danke! 🙂
Wie können Benutzer ihr Bild in das Formular hochladen? Von ihrem Computer oder mit einer Webcam?
Hallo Sohaib – Gute Frage! Sie können das Bild zuerst auf Ihrem Computerspeicher speichern (einschließlich der mit einer Webcam aufgenommenen Bilder) und dann die Anweisungen aus Schritt 2 befolgen, indem Sie sich auf diesen Artikel beziehen.
Ich hoffe, das hilft! 🙂
Wie können meine KUNDEN ihre Bilder über ein von mir erstelltes Formular auf meine Website stellen, z. B. um ein Auto oder eine Ausrüstung zu verkaufen?
Hallo Carl! Der einfachste Weg, Ihren Kunden zu ermöglichen, ihre eigenen Anzeigen zu erstellen, wäre über unser Post Submissions Addon, insbesondere mit unserem kürzlich veröffentlichten Rich Text Field Editor :)
Mit diesen beiden kombiniert können Ihre Benutzer ihre Anzeige nach Belieben gestalten, das Formular absenden und es würde direkt auf Ihrer Website hinzugefügt werden (oder zur Genehmigung ausstehen).
Ich hoffe, das klärt die Sache 🙂 Wenn Sie weitere Fragen dazu haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Wenn nicht, zögern Sie nicht, uns Fragen in unseren Support-Foren zu stellen.
Wie kann ich das Widget-Formular-Suchlogo ändern?
Hallo Cory! Entschuldigen Sie, aber ich bin mir nicht sicher, was Sie meinen.
Wenn Sie Zeit haben, wenden Sie sich bitte hier an unser Team, wenn Sie ein aktives Abonnement haben.
Wenn nicht, zögern Sie nicht, sich an unsere Support-Foren zu wenden.
Danke!
Ich habe das Bild mit HTML in mein Formular eingefügt, aber es wird nicht im E-Mail-Formular abgerufen.
Ich habe ein paar Bilder in die Kopfzeile eingefügt, damit ich den Formulareintrag zusammen mit den Logos oben ausdrucken kann, aber ohne Erfolg.
Hallo Aman!
Vielen Dank für Ihre Kontaktaufnahme!
Der Grund, warum wir keine HTML-Felder, Abschnittstrennfelder oder Beschreibungen (die beiden letzteren sind im Wesentlichen HTML-Felder) weitergeben, ist, dass diese Bereiche volles HTML zulassen, was bedeutet, dass sie häufig Dinge enthalten, die E-Mail-Benachrichtigungen unterbrechen oder Zustellungsprobleme verursachen.
Wir haben jedoch einen Filter, mit dem Sie Nicht-Eingabefelder in Ihre E-Mails aufnehmen können. Hier ist unser Tutorial mit allen Details und dem benötigten Code: https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/.
Wir haben auch ein hilfreiches Tutorial mit Details, wie Sie benutzerdefinierten Code wie diesen zu Ihrer Website hinzufügen können: https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ (für eine besonders einfache Option empfehle ich die Option Code Snippets Plugin).
Oder wenn Sie PHP vermeiden möchten, könnten Sie erwägen, den Text Ihrer Benachrichtigungen anzupassen, um den benötigten Text einzufügen. Sie könnten dies tun, indem Sie den Benachrichtigungsinhalt auf eine individuellere Weise mit normalem Text, HTML und Smart Tags erstellen.
Diese Option bietet wahrscheinlich die meiste Kontrolle, da Sie genau auswählen können, welche Details in Ihre Benachrichtigung aufgenommen werden sollen.
Ich entschuldige mich, wenn dies nicht ganz das ist, wonach Sie gesucht haben, aber hoffentlich funktioniert eine dieser Ideen für Sie. Könnten Sie mir bitte mitteilen, ob Sie weitere Fragen haben?
Danke!
Kann ein Benutzer die Kamera seines Geräts verwenden, um ein Bild aufzunehmen und es in einem Schritt hochzuladen, anstatt zuerst ein Bild aufzunehmen, es auf seinem Desktop zu speichern und dann das Bild hochzuladen? Idealerweise möchte ich, dass der Benutzer ein Bild aus einer Bibliothek hochlädt, wenn er ein vorhandenes Bild hat, aber wenn er es bevorzugt, kann er einfach ein Bild von der Kamera aufnehmen und hochladen. Gibt es dafür eine Möglichkeit in WPForms?
Hallo Anil! Das Feld für den Datei-Upload kann, wenn es von einem Mobilgerät aus aufgerufen wird, dem Benutzer die Option bieten, ein Bild direkt von seiner Kamera hochzuladen. Es hängt jedoch davon ab, ob das Mobilgerät des Benutzers so konfiguriert wurde, dass der Browser auf seine Kamera zugreifen kann. Wenn nicht, ist die Option nicht verfügbar.
Ich hoffe, das klärt die Sache 🙂 Wenn Sie weitere Fragen dazu haben, kontaktieren Sie uns bitte, wenn Sie ein aktives Abonnement haben. Wenn nicht, zögern Sie nicht, uns Fragen in unseren Support-Foren zu stellen.
Hallo,
Behandelt WP-Forms Benutzerregistrierungsdaten genauso wie WooCommerce? Wenn ein Benutzer meinen E-Commerce-Shop verlässt und ein Konto registriert, werden seine Daten dupliziert, einmal in WooCommerce, einmal in der WP Forms-Registrierung?
Hallo Ann, unser User Registration Addon bietet keine Schnittstelle zur Verwaltung oder Bearbeitung bestehender Benutzer und konzentriert sich ausschließlich auf den Prozess der Kontoerstellung. Wir unterstützen jedoch keine Integration mit WooCommerce.
Nichtsdestotrotz, um sicherzustellen, dass wir Ihre Frage so gründlich wie möglich beantworten und Verwirrung vermeiden, könnten Sie bitte unser Team kontaktieren?
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte reichen Sie daher ein Support-Ticket ein. Andernfalls bieten wir begrenzten kostenlosen Support im WPForms Lite WordPress.org Support-Forum an.
Danke.
Unterstützt WPForms Gib-Medien? Oder das Einbetten eines Shortcodes von einem 3D-Viewer-Plugin?
Hallo Melissa – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Wie füge ich ein Bild auf der Schaltfläche zum Absenden von wpforms in WordPress hinzu?
Bisher zeigen Sie nur, wie man Icons hinzufügt. Aber ich habe ein benutzerdefiniertes Bild, das ich hinzufügen möchte.
Hallo Aser – Um ein Bild zur Submit-Schaltfläche hinzuzufügen, können Sie folgende CSS verwenden:
.wpforms-submit-container .wpforms-submit { background-image: url('bild_url'); background-size: cover; padding-left: 40px; }Und falls es hilft, hier ist ein detailliertes Tutorial, wie Sie benutzerdefiniertes CSS wie dieses zu Ihrer Website hinzufügen.
Mein Code sieht ungefähr so aus:
.wpforms-submit-container .wpforms-submit { background-image: url(‘https://lhamosplane.world/wp-content/uploads/2023/07/th-1787430678.B.png’); background-size: cover; padding-left: 40px; }
Die URL wird jedoch nicht übernommen, d. h. das Bild wird nicht angezeigt. Ich bin mir nicht sicher, ob Sie verstehen, was ich möchte, aber ich möchte, dass ein .png-Bild neben dem Text „Submit“ innerhalb der Submit-Schaltfläche links sichtbar ist.
Ich habe diesen Code aus Ihrem Tutorial gefunden, der Fantastique-Icons anzeigt und fast das tut, was ich möchte, aber ich kann keine URL für mein Wunschbild hinzufügen.
.wpforms-form button[type=submit]:hover { background-color: #ac2428 !important; }
.wpforms-form button[type=submit]:before { content: ‘\f1d8’; /* Unicode für Icon, Anführungszeichen und Schrägstrich beibehalten */ margin-right: 10px !important; /* Abstand zwischen Icon und Schaltflächentext */ }
Hallo Aser – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, schreiben Sie uns bitte eine Nachricht im Support, damit wir Ihnen helfen können.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserem E-Mail-Support. Bitte senden Sie ein Support-Ticket.
Andernfalls bieten wir eingeschränkten kostenlosen Support im WPForms Lite WordPress.org Supportforum.
Danke 🙂
Wie richte ich ein Bild links von einem Formular aus?
Hallo JM – Wenn Sie ein Bild links und Felder rechts anzeigen möchten, können Sie das Layout-Feld verwenden.
Hallo, ich habe eine Frage, ob ich Ihr Modul kaufen kann, um das benötigte Formular zu erstellen. Die erste Zeile enthält 6 Radio-Buttons, darüber befindet sich ein Bild (also 6 Bilder), die aber keine „Labels“ sind. Wenn man auf ein Bild klickt, öffnet sich ein Popup, das das größere Bild und erklärenden Text anzeigt. Ist das mit WP-Forms möglich? Vielen Dank im Voraus
Hallo Françoise – Wir helfen Ihnen gerne weiter! Wenn Sie Zeit haben, reichen Sie bitte ein Support-Ticket ein, damit wir Ihnen helfen können.