So fügen Sie Bildoptionen in WordPress-Formulare ein (erhöhen Sie die Bindung)

Das Hinzufügen von Bildoptionen zu Ihren WordPress-Formularen ist eine großartige Möglichkeit, die Benutzerbindung zu erhöhen und das Gesamterlebnis zu verbessern.

Anstatt Standard-Textoptionen zu verwenden, ermöglichen Bildauswahlen den Benutzern, auf visuell ansprechendere und fesselndere Weise mit Ihren Formularen zu interagieren. Dies kann besonders nützlich für Umfragen, Quiz, Produktauswahlen und jedes Formular sein, bei dem Sie den Entscheidungsprozess intuitiver gestalten möchten.

Im Laufe der Jahre haben wir zahlreiche Formulare auf WordPress erstellt, was uns wertvolle Einblicke gegeben hat, was Formulare ansprechend macht und was Benutzer dazu veranlasst, sie abzubrechen.

In diesem Artikel zeigen wir Ihnen, wie Sie einfach Bildauswahlen in WordPress-Formularen hinzufügen können, um die Benutzerinteraktion zu erhöhen.

Warum Bildauswahlen in Ihren WordPress-Formularen verwenden?

Bildoptionen sind Fotos, Illustrationen, Grafiken oder Symbole, zwischen denen Ihre Benutzer wählen können, wenn sie ein Formular auf Ihrer WordPress-Website ausfüllen.

Hier ist ein Beispiel für ein Formular, das Bildoptionen anstelle von regulären Textoptionen verwendet. Die erste Option, Erdbeeren, wurde ausgewählt:

Bildoptionen können Ihre Formulare polierter, professioneller und visuell ansprechender gestalten, was den Benutzern helfen kann, schneller zu entscheiden.

Wenn Sie beispielsweise eine Restaurant-Website betreiben, die einen Lieferservice anbietet, dann möchten Sie ein Bestellformular auf Ihrer Website haben. Sie können jetzt Bilder Ihrer verschiedenen Gerichte verwenden, um potenziellen Kunden bei der Auswahl zu helfen, was sie möchten.

Abgesehen davon können Bildauswahlen es einem Publikum mit Leseschwierigkeiten oder jemandem, der Ihre Sprache nicht fließend spricht, erleichtern, Ihr Formular auszufüllen, und so die Benutzererfahrung verbessern.

Nichtsdestotrotz wollen wir sehen, wie man einfach Bildauswahlen in WordPress-Formularen hinzufügt.

So fügen Sie Ihren WordPress-Formularen Bildauswahlen hinzu

Sie können mit WPForms ganz einfach Bildauswahlen zu Ihren WordPress-Formularen hinzufügen, um das Engagement zu steigern.

Es ist das beste WordPress-Formular-Builder-Plugin auf dem Markt und ermöglicht es Ihnen, Formulare einfach mit einem einfachen Drag-and-Drop-Formular-Builder zu erstellen.

Wir verwenden dieses Plugin auf mehreren unserer Websites und erzielen immer ausgezeichnete Ergebnisse, da es super benutzerfreundlich und skalierbar ist. Weitere Informationen zu unseren Erfahrungen finden Sie in unserem WPForms-Testbericht.

Zuerst müssen Sie das WPForms-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung des Plugins gehen Sie auf der Seite WPForms » Formular hinzufügen in Ihrem WordPress-Dashboard, um ein neues Formular zu erstellen.

Dies führt Sie zur Seite „Vorlage auswählen“, auf der Sie mit der Eingabe eines Namens für Ihr Formular beginnen können.

Klicken Sie danach auf die Schaltfläche 'Vorlage verwenden' unter einer vorgefertigten Vorlage Ihrer Wahl. Für dieses Tutorial werden wir die Vorlage 'Einfaches Kontaktformular' verwenden.

Dies startet die WPForms-Formular-Builder-Oberfläche, auf der Sie eine Formularvorschau auf der rechten Seite des Bildschirms und eine Spalte mit Formularfeldern in der linken Ecke sehen.

Sie können jetzt jedes Formularfeld Ihrer Wahl bearbeiten, indem Sie darauf klicken, es nach oben oder unten verschieben oder löschen.

Für detailliertere Anweisungen können Sie sich unser Tutorial zum Thema Erstellen eines Kontaktformulars in WordPress ansehen.

Als Nächstes müssen Sie das Feld Mehrfachauswahl aus der linken Spalte in die Formularvorschau ziehen, um Bildauswahlen für Kunden zu erstellen.

Wir werden es direkt über dem Feld 'Kommentar oder Nachricht' platzieren.

Hinweis: Bildauswahlen funktionieren auch mit dem Feld Kontrollkästchen. Verwenden Sie dies, wenn Ihr Benutzer mehr als eine Option auswählen können soll.

Klicken Sie danach auf das Feld Mehrfachauswahl, um es zu bearbeiten. Dies öffnet die Feldoptionen auf der linken Seite Ihres Bildschirms.

Sie werden nun feststellen, dass dieses Feld standardmäßig das Hinzufügen von Textoptionen ermöglicht.

Sie können dies jedoch einfach ändern, indem Sie den Schalter 'Bildoptionen verwenden' umlegen.

Sobald Sie dies tun, erscheint unter jeder Multiple-Choice-Option eine Schaltfläche 'Bild hochladen'.

Als Nächstes können Sie eingeben, was Sie für die Feldtextbeschriftung wünschen, und dann auf die Schaltfläche „Bild hochladen“ klicken.

Sie können jetzt ein Bild von Ihrem Computer hochladen oder eines aus der WordPress-Mediathek auswählen.

Wir empfehlen die Verwendung von .jpg- oder .png-Bildern, die nicht größer als 250px mal 250px sind.

Beachten Sie, dass Ihre Bilder in Ihrem Formular am besten aussehen, wenn sie alle die gleiche Größe haben.

Wichtig: WPForms passt Ihre Bilder nicht an. Sie müssen sicherstellen, dass sie die gewünschte Größe haben, bevor Sie sie hochladen. Alternativ können Sie Ihre Bilder in WordPress bearbeiten, bevor Sie sie zu Ihrem Formular hinzufügen.

Wenn Sie mehr als 3 Optionen zur Auswahl haben, klicken Sie einfach auf die Schaltfläche (+), um eine neue Option hinzuzufügen. Sie können auch die Schaltfläche (-) verwenden, um eine Option zu entfernen.

Ändern, wie Ihre Bildauswahlen in Ihrem Formular angezeigt werden

WPForms macht es einfach, das Layout und andere Einstellungen für Ihr Bildauswahlfeld zu ändern.

Gehen Sie dazu im linken Menü zum Reiter „Erweitert“.

Sie können nun den Schalter 'Optionen zufällig anordnen' umlegen, wenn Sie Ihre Bildoptionen zufällig und nicht in einer bestimmten Reihenfolge anzeigen möchten.

Dies ist nützlich, wenn Sie eine Umfrage erstellen und eine Verzerrung der Ergebnisse durch die erste Wahl eliminieren möchten.

Wenn Sie möchten, können Sie auch ändern, wie Ihre Auswahl angeordnet wird, indem Sie das Dropdown-Menü 'Auswahl-Layout' verwenden.

Die Standardeinstellung ist 'Inline', wobei Ihre Optionen nebeneinander angezeigt werden, bis sie in eine neue Zeile umbrechen.

Sie können Ihre Auswahl auch in mehreren Spalten anzeigen lassen. Wenn Sie eine vertikale Liste wünschen, wählen Sie einfach 'Eine Spalte' aus dem Dropdown-Menü.

Es gibt hier auch die Option, das 'Label ausblenden' für Ihre Bildoptionen zu wählen. Das bedeutet, dass unter den Bildern kein Text steht. In einigen Fällen kann dies sinnvoll sein.

Zum Beispiel könnten Sie Leute bitten, abzustimmen, welches neue Logo-Design sie am besten finden.

Stellen Sie sicher, dass Sie nach Möglichkeit eine relevante und hilfreiche Beschriftung eingeben. Diese wird als Alt-Text für Ihre Bilder angezeigt und macht Ihre Website für sehbehinderte Benutzer zugänglicher.

Sobald Sie dies getan haben, wechseln Sie in der linken Spalte zurück zur Registerkarte „Allgemein“ und scrollen Sie nach unten zum Abschnitt „Bildauswahl-Stil“.

Von hier aus können Sie im Dropdown-Menü auswählen, wie Sie Ihre Bilder gestalten möchten.

Der Standardstil ist Modern, wobei ein Häkchen für das ausgewählte Bild angezeigt wird.

Sie können jedoch stattdessen den klassischen Stil wählen, der so aussieht, wenn eine Option ausgewählt ist:

Alternativ können Sie auch 'Keine' für den Stil wählen.

In diesem Fall sind Ihre Bilder einfach normale Bilder ohne Rahmen oder andere Stile. Die Beschriftungen werden mit Optionsfeldern angezeigt.

Sobald Sie mit Ihrem Formular zufrieden sind, klicken Sie einfach oben auf dem Bildschirm auf die Schaltfläche „Speichern“.

Hinzufügen Ihres Formulars zu Ihrer Website

Sie können Ihr Formular mit nur wenigen Klicks zu jedem Beitrag oder jeder Seite auf Ihrer Website hinzufügen. Wir werden eine neue Seite für unsere erstellen.

Besuchen Sie zuerst den Bildschirm Seiten » Neu hinzufügen in der WordPress-Admin-Seitenleiste und klicken Sie oben links auf die Schaltfläche 'Block hinzufügen' (+).

Dies öffnet das Blockmenü, aus dem Sie den WPForms-Block finden und zur Seite hinzufügen müssen.

Wählen Sie danach das Formular, das Sie gerade erstellt haben, aus dem Dropdown-Menü im Block selbst aus.

Klicken Sie abschließend auf die Schaltfläche 'Veröffentlichen' oder 'Aktualisieren', um Ihre Formulareinstellungen zu speichern.

Besuchen Sie nun Ihre Website, um die Bildauswahl in Ihrem WordPress-Formular anzuzeigen.

Wenn Sie weitere Änderungen an Ihrem Formular vornehmen möchten, können Sie dies ganz einfach tun, indem Sie im WordPress-Dashboard zur Seite WPForms » Alle Formulare navigieren.

Sobald Sie dort sind, klicken Sie auf Ihr Formular, um es im Formular-Builder zu öffnen.

Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie einfach auf die Schaltfläche 'Speichern', um Ihre Änderungen zu speichern. Ihr Formular wird auch automatisch auf Ihrer Seite aktualisiert.

Bonus: Bilder mit Ihren WordPress-Formularen akzeptieren

Abgesehen davon, dass Sie Bildauswahlen anbieten, können Sie mit einem WordPress-Formular auch Bilder von verschiedenen Benutzern akzeptieren.

Dies kann nützlich sein, wenn Sie ein Fotograf sind, der jemanden einstellen möchte, oder wenn Sie einen Fotowettbewerb veranstalten.

Abgesehen davon kann die Annahme von benutzergenerierten Inhalten sogar dazu beitragen, die Benutzerbindung auf Ihrer Website zu erhöhen.

Sie können mit WPForms ganz einfach ein Dateiupload-Formular in WordPress erstellen, da es das beste Dateiupload-Plugin auf dem Markt ist.

Es wird mit einer vorgefertigten Vorlage für Dateiupload-Formulare geliefert, mit der Sie jede Art von Dokument akzeptieren können, einschließlich JPEG, PNG, GIF, PDF, PPT und mehr.

Um Bilder zu akzeptieren, müssen Sie einfach auf das Feld 'Dateiupload' klicken, um dessen Einstellungen in der linken Spalte zu öffnen. Danach müssen Sie unter der Option 'Zulässige Dateierweiterungen' die Dateitypen eingeben, die Sie akzeptieren möchten.

Wenn Sie zufrieden sind, vergessen Sie nicht, auf die Schaltfläche 'Speichern' zu klicken, um Ihre Einstellungen zu speichern.

Sie können das Formular dann mit dem benutzerfreundlichen WPForms-Block auf Ihrer Website einfügen. Detailliertere Anweisungen finden Sie in unserem Tutorial zum Erstellen eines Datei-Upload-Formulars in WordPress.

Video-Tutorial

Wenn Sie visuelle Anleitungen bevorzugen, können Sie sich unser Video-Tutorial ansehen.

WPBeginner abonnieren

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Bildauswahlen in WordPress-Formularen hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden für Anfänger zum Thema Erstellen einer interaktiven Umfrage auf Ihrer WordPress-Website und unseren Vergleich der besten WordPress-Rechner-Plugins sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.