KI-Zusammenfassung
Haben Sie sich jemals gefragt, ob Sie Benutzern erlauben könnten, in Ihrem WordPress-Formular ein Bild anstelle von nur Text auszuwählen?
Seien wir ehrlich. Wir alle fühlen uns natürlich zu interaktiven und visuellen Elementen hingezogen. Ein reines Textformular ist funktional in Ordnung, aber ein Formular mit auswählbaren Bildern bedeutet eine VIEL bessere Benutzererfahrung.
Und wissen Sie was? Das Hinzufügen von Bildern zu Radio-Buttons in einem WordPress-Formular ist tatsächlich ziemlich einfach, wie ich Ihnen in diesem Artikel zeigen werde.
So fügen Sie neben Radio-Buttons in WordPress-Formularen ein Bild hinzu
WPForms macht es super einfach, Ihren Multiple-Choice-Radio-Buttons oder Ihren Checkbox-Feldern Bilder oder Icons hinzuzufügen. Hier sind die Schritte, die Sie befolgen müssen:
Wenn Sie schriftliche Anweisungen bevorzugen, lesen Sie weiter unten.
Schritt 1: Erstellen Sie ein einfaches WordPress-Formular
Das erste, was Sie tun müssen, ist das WPForms-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in dieser Schritt-für-Schritt-Anleitung zur Installation eines Plugins in WordPress.
Nachdem Sie WPForms erfolgreich auf Ihrer Website installiert haben, können Sie mit der Erstellung Ihres Formulars beginnen, indem Sie Ihr WordPress-Dashboard öffnen und zu WPForms » Neu hinzufügen navigieren.
Danach können Sie Ihrem Formular einen Namen geben und eine Vorlage auswählen. Für dieses Beispiel verwende ich die Vorlage „Einfaches Kontaktformular“, eine der über 2.100 WordPress-Formularvorlagen.
Sobald Sie eine Vorlage ausgewählt haben, wird sie im Formular-Builder geladen.
Sie können auch unser Tutorial zum Erstellen eines einfachen Kontaktformulars als Beispiel für den Einstieg ansehen.
Schritt 2: Passen Sie Ihr WordPress-Formular an
Die Vorlage „Einfaches Kontaktformular“ enthält die folgenden Standard-Formularfelder:
- Name
- Kommentar oder Nachricht
In unserem Beispiel fügen wir unserem einfachen Kontaktformular ein Multiple-Choice-Formularfeld hinzu und ändern die Beschriftung und die Auswahlmöglichkeiten, um zu fragen, warum der Benutzer uns kontaktiert.
Sie können Ihrer Formular zusätzliche Felder hinzufügen, indem Sie sie vom linken Bedienfeld in das rechte Bedienfeld ziehen.
Klicken Sie dann auf das Feld, um Änderungen vorzunehmen. Sie können auch auf ein Formularfeld klicken und es ziehen, um die Reihenfolge der Felder in Ihrem Kontaktformular zu ändern.
Sie können Bilder neben den Formularfeldern Multiple Choice und Multiple Items (Radio-Buttons) sowie den Formularfeldern Checkboxes und Checkbox Items hinzufügen.
Jetzt ist es an der Zeit, die Bilder neben jedem Radio-Button hinzuzufügen.
Schritt 3: Fügen Sie Bilder zu Radio-Buttons hinzu
Um Ihrem Formular-Radio-Button ein Bild hinzuzufügen, öffnen Sie die Feldoptionen für Ihr Multiple-Choice-Feld und aktivieren Sie dann den Schalter Bildauswahl verwenden.
Nachdem Sie „Bildauswahl“ aktiviert haben, können Sie für jede Auswahl in Ihrem Feld ein Bild hochladen.
Um ein Bild hinzuzufügen, klicken Sie auf die Schaltfläche Bild hochladen. Dies öffnet Ihre WordPress-Mediathek, damit Sie ein neues Bild in WordPress hochladen oder aus Ihren vorhandenen auswählen können.
Symbole zu Radio-Buttons hinzufügen
Abhängig von Ihrem Formular kann es sinnvoller sein, Symbol-Auswahlen anstelle von Bild-Auswahlen zu verwenden. Sie können diese Option genauso einfach aktivieren wie die Bild-Auswahlen, indem Sie im Bedienfeld „Feldoptionen“ die Option Symbol-Auswahlen verwenden auswählen.
WPForms verwendet eine umfangreiche Bibliothek mit vorgefertigten Symbolen, sodass Sie diese nicht hochladen müssen. Sie können einfach das benötigte Symbol aus den verfügbaren Optionen auswählen.
Weitere Details finden Sie in unserem Leitfaden zur Verwendung von Symbol-Auswahlen in WPForms.
Schritt 4: Passen Sie Ihre Bildauswahl an
WPForms macht die Anpassung Ihrer Bildauswahlen dank der integrierten Anpassungsoptionen super einfach. Wählen Sie zuerst Ihren bevorzugten Bildauswahl-Stil.
Der moderne Stil zeigt ausgewählte Bilder in einem schattierten Feld an und fügt eine grüne Markierung in der Mitte hinzu. Der klassische Stil zeigt ausgewählte Bilder mit einem dicken, grauen Rand an.
Die Option „Keine“ fügt keine spezielle Formatierung hinzu; stattdessen sehen Sie traditionelle Radio-Buttons neben jedem Bild, aus denen die Website-Besucher auswählen können. Anschließend können Sie weitere Optionen anzeigen, indem Sie auf die Registerkarte Erweitert klicken.
Wichtig ist, dass Sie Ihr bevorzugtes Auswahl-Layout auswählen. Sie können zwischen 1, 2 oder 3 Spalten wählen.
Sie haben auch die Möglichkeit, „Inline“ zu wählen, wodurch so viele Optionen wie möglich in jede Zeile platziert werden, bevor eine neue hinzugefügt wird. Inline ist das Standard-Auswahl-Layout für alle WordPress-Formulare, die Bildauswahlen anzeigen.
Sie können auch die Option Auswahlen zufällig anordnen wählen, wenn Sie die Reihenfolge der Bildauswahlen jedes Mal zufällig ändern möchten, wenn ein neuer Benutzer Ihre Website besucht.
Schritt 5: Aktivieren Sie die Umfrageberichterstattung
Wenn Sie sehen möchten, wie viele Personen jede angebotene Bildauswahl wählen, können Sie die Umfrageberichterstattung für Ihre Formulare aktivieren, indem Sie das Addon Umfragen und Abstimmungen installieren und aktivieren.
Gehen Sie dazu zu WPForms » Addons und suchen Sie das mit der Bezeichnung Umfragen und Abstimmungen Addon. Klicken Sie auf Addon installieren und dann auf Aktivieren.
WPForms ermöglicht es Ihnen, Umfrageergebnisse für die folgenden Formularfelder zu sammeln:
- Einzeiliger Text
- Absatztext
- Dropdown
- Kontrollkästchen
- Mehrfachauswahl
- Bewertung
- Likert-Skala
- Net Promoter Score (NPS)
Um die Umfrageberichterstattung für alle kompatiblen Felder in einem Formular zu aktivieren, gehen Sie im Formular-Generator zu Einstellungen » Umfragen und Abstimmungen und wählen Sie die Option Umfrageberichterstattung aktivieren.
Wenn Sie nur Daten für ein bestimmtes Feld sammeln möchten, öffnen Sie dessen Bedienfeld „Feldoptionen“ und klicken Sie auf die Registerkarte Erweitert. Schalten Sie dann Umfrageberichterstattung aktivieren ein.
Sobald die Leute anfangen, Ihr Formular auszufüllen, komplett mit Bildern neben den Radio-Buttons, können Sie im WordPress-Dashboard Umfrageberichte generieren, um die Ergebnisse zu sehen.
Um einen Umfragebericht zu erstellen, gehen Sie zu WPForms » Alle Formulare und fahren Sie mit der Maus über Ihr Formular, um die Optionen anzuzeigen. Klicken Sie dann auf Umfrageergebnisse.
Mit WPForms werden Ihre Daten automatisch in übersichtliche Berichte generiert, die für das menschliche Gehirn leicht verständlich sind.
Bilder neben Radio-Buttons hinzufügen – FAQs
Ich habe einige häufig gestellte Fragen zusammengestellt, die unser Team in letzter Zeit bezüglich Radio-Buttons und Bildern erhalten hat. Lesen Sie diese, wenn Sie weitere Fragen zu diesem Thema haben.
Warum sollte ich Bilder neben Radio-Buttons in WordPress-Formularen hinzufügen?
Bilder sind hervorragende visuelle Hilfsmittel in WordPress-Formularen; sie fallen viel leichter auf und ziehen sofort die Blicke des Besuchers auf sich.
Daher sind Formulare mit visuellen Elementen einfacher auszufüllen, da sie weniger Zeit zum Lesen und Verstehen benötigen, was zu höherem Nutzerengagement und einer verbesserten Gesamterfahrung führt.
Benötige ich Programmierkenntnisse, um meinem Formular Bilder hinzuzufügen?
Wenn Sie ein benutzerfreundliches Plugin wie WPForms verwenden, benötigen Sie keine einzige Zeile Code, um Ihrem Formular Bilder hinzuzufügen.
Das Hinzufügen von Bildern zu Ihrem Formular mit WPForms ist genauso einfach wie das Hochladen von Bildern in Ihre WordPress-Mediathek. Jeder kann das tun!
Verlangsamt das Hinzufügen von Bildern meine Website?
Obwohl das Hinzufügen von Bildern die Ladezeit von Seiten beeinflusst, hängt vieles von Ihrer spezifischen Website ab. Wenn Sie darauf achten, wie viele Bilder Sie hinzufügen und sicherstellen, dass sie alle optimiert sind, hat dies keine negativen Auswirkungen auf Ihre Seitenladezeit.
Kann ich das Aussehen der Radio-Buttons und Bilder anpassen?
Ja, Sie können das Aussehen von Radio-Buttons und Bildern in WPForms anpassen. Sie können zum Beispiel aus verschiedenen Feldlayouts wählen, wie z. B. Inline-, 1-Spalten-, 2-Spalten- und 3-Spalten-Anordnungen.
Außerdem bietet WPForms die Wahl zwischen modernen und klassischen Stilen für Radio-Button-Optionen, die Bilder in leicht unterschiedlichen Stilen anzeigen.
Beeinträchtigen Bilder neben Radio-Buttons die Barrierefreiheit?
Bilder, die Radio-Buttons begleiten, können die Barrierefreiheit beeinträchtigen, wenn Sie einige Überlegungen wie den Farbkontrast zwischen Ihrem Hintergrund und den Bildern ignorieren.
Ich empfehle, beschreibende Alt-Texte zu Ihren Bildern hinzuzufügen und eine grundlegende visuelle Prüfung durchzuführen, um sicherzustellen, dass die Bilder sofort sichtbar sind und einen hohen Kontrast aufweisen.
Wenn es Ihnen Mühe bereitet, das Bild klar zu sehen, ist dies ein Zeichen dafür, dass Sie mehr kontrastierende Farben benötigen, um eine ideale Barrierefreiheit zu gewährleisten.
Als Nächstes: Verdienen Sie mehr Geld online
Und da haben Sie es! Sie wissen jetzt, wie Sie ein Bild neben Radio-Buttons in WordPress-Formularen hinzufügen.
Wenn Sie daran interessiert sind, online Geld zu verdienen, können Sie sich unser Tutorial ansehen, wie Sie ein einfaches Bestellformular in WordPress erstellen und Bilder neben jedem Artikel hinzufügen, den Sie zum Verkauf anbieten.
Erstellen Sie jetzt Ihr WordPress-Formular
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.
Das Radio-Button-Bild wird in Zahlungsfeldern nicht angezeigt... es funktioniert gut in "Standardfeldern", aber nicht in Zahlungsfeldern.
Haben Sie eine Idee, warum?
Hallo Raju,
Das tut uns leid! Ja, dies wird derzeit absichtlich verhindert, da unsere Zahlungs-Integrationen diese Labels anders handhaben (HTML würde Probleme verursachen, wenn diese Daten an Stripe oder PayPal gesendet werden). Dies ist zwar auf dem Radar unseres Teams, und unsere Entwickler arbeiten an einer Lösung. Ich habe keine ETA dafür, aber wir hoffen, es bald zu beheben!
Falls es hilft, können Bilder mit etwas benutzerdefiniertem CSS immer noch zu jeder Artikeloption hinzugefügt werden. Dies erfordert einige formularspezifische CSS-Stile, aber wenn Sie bereit wären, sich mit unserem Support-Team in Verbindung zu setzen, können wir Ihnen helfen, dies zu erreichen 🙂
Ist „Bildauswahl für WPForms“ eine grundlegende Formularfunktion?
Meine Website enthält mehrere Galerien mit unveränderlichen Bildern für einen Benutzer. Es gibt zwischen 5 und 30 Bilder auf einem Formular und 50 Formulare (Galerien). Ich möchte, dass der Benutzer ein Bild auf einem Formular auswählt und dann zum nächsten Formular wechselt; ein Bild auswählt und so weiter. Jede Bildauswahl entspricht einem Absatz mit Text, den ich dem Benutzer in einem Bericht zur Verfügung stellen möchte. Kann dies mit WPForms gemacht werden? Mit nur geringfügigen Code-Ergänzungen?
Hallo Richard,
Ich entschuldige mich, aber ich bin mir nicht sicher, ob ich genau verstehe, was Sie tun möchten. Wenn Sie Zeit haben, wenden Sie sich bitte an unseren Support und geben Sie einige zusätzliche Details an?
Danke! 🙂
Dies ist eine großartige Funktion, aber sowohl der moderne als auch der klassische Stil sind sehr schlecht gestaltet. Im klassischen Stil ist der graue Rahmen sehr schwer zu erkennen und im modernen Stil befindet sich das Häkchen auf dem Bild und ist oft schwer zu erkennen. Es zeigt ein schwarzes Häkchen-Symbol auf vielen Telefonen, was es noch schwieriger macht, es zu erkennen, und das Fettdrucken des Textes verschiebt manchmal Felder, wenn sie sich auf Mobilgeräten befinden...
Halten Sie es einfach und machen Sie einen fetten, FARBIGEN Rahmen, der die Feldbreite nicht verändert
Hallo Martin – Danke für das Feedback und die Vorschläge! Ich habe es in unserem Tracker vermerkt, damit das Entwicklungsteam es bei der Arbeit an unserer Roadmap für zukünftige Updates berücksichtigen kann. In der Zwischenzeit können Sie sich gerne an unser Support-Team wenden, um Hilfe zu erhalten, und sie können Ihnen mit benutzerdefiniertem CSS-Code helfen, es so aussehen zu lassen, wie Sie es benötigen.
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 🙂
Hallo,
Ich habe die Bildauswahl zusammen mit Kontrollkästchen verwendet. Es funktioniert gut im Desktop- und Tablet-Modus, aber nicht auf Mobilgeräten. Der gesamte Kontrollkästchen-Bereich mit allen Bildern und Kontrollkästchen verschwindet ab der Breakpoint-Breite von 600 Pixeln nach unten. Ich habe benutzerdefiniertes CSS, ich dachte, es könnte mein CSS sein, das irgendwie die Probleme verursacht hat, und habe es entfernt, aber ohne Erfolg.
Ich benutze die kostenlose Version von WPFrom.
Irgendeine Idee?
Hallo Daniel,
In diesem Fall empfehle ich Ihnen, die CSS-Klasse für Mobilgeräte zu verwenden, wie in diesem Leitfaden gezeigt.
Ich hoffe, das hilft! 🙂