Haben Sie sich schon einmal gefragt, ob Sie Ihren Nutzern erlauben könnten, in Ihrem WordPress-Formular ein Bild statt nur Text auszuwählen?
Machen wir uns nichts vor. Wir alle fühlen uns von Natur aus zu interaktiven und visuellen Elementen hingezogen. Ein reines Textformular ist funktional in Ordnung, aber ein Formular mit auswählbaren Bildern führt zu einer viel besseren Benutzererfahrung.
Und wissen Sie was? Es ist das Hinzufügen von Bildern zu Radio-Buttons in einem WordPress-Formular ist eigentlich ziemlich einfach zu tun, wie ich Ihnen in diesem Artikel zeigen werde.
Mit WPForms Lite können Sie Ihrem Radiofeld Bilder hinzufügen, und zwar völlig kostenlos. Aber wenn Sie zusätzliche Funktionen freischalten möchten, um Ihre Formulare interaktiver zu gestalten, ist ein Upgrade auf WPForms Pro ist es wert!
Hinzufügen eines Bildes neben den Radio-Buttons in WordPress-Formularen
WPForms macht es super einfach, Bilder oder Symbole, um Ihre Multiple-Choice-Radio-Buttons oder Ihre Checkboxen Felder hinzufügen. Hier sind die Schritte, die Sie befolgen müssen:
Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie unten weiter.
In diesem Artikel
Schritt 1: Erstellen eines einfachen WordPress-Formulars
Als Erstes müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in dieser Schritt-für-Schritt-Anleitung für die Installation eines Plugins in WordPress.
Nachdem Sie WPForms erfolgreich auf Ihrer Website installiert haben, können Sie Ihr Formular erstellen, indem Sie Ihr WordPress-Dashboard öffnen und zu WPForms " Add New navigieren.
Danach können Sie damit beginnen, Ihrem Formular einen Namen zu geben und dann eine Vorlage auszuwählen. Für dieses Beispiel verwende ich die Vorlage "Einfaches Kontaktformular", eine der über 2.000 verfügbaren WordPress-Formularvorlagen.
Sobald Sie eine Vorlage auswählen, wird sie im Formularersteller geladen.
Sie können auch unser Tutorial zur Erstellung eines einfachen Kontaktformulars als Beispiel für den Einstieg nutzen.
Schritt 2: Passen Sie Ihr WordPress-Formular an
Die Vorlage "Einfaches Kontaktformular" wird mit den folgenden Standardformularfeldern geliefert:
- Name
- Kommentar oder Nachricht
In unserem Beispiel fügen wir ein Multiple-Choice-Formularfeld zu unserem einfachen Kontaktformular hinzu und ändern die Beschriftung und die Auswahlmöglichkeiten, um zu fragen, warum der Benutzer uns kontaktiert.
Sie können Ihrem Formular weitere Felder hinzufügen, indem Sie sie aus dem linken Bereich in den rechten Bereich 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 neu anzuordnen.
Sie können Bilder neben den Formularfeldern Multiple Choice und Multiple Items, bei denen es sich um Optionsfelder handelt, sowie neben den Formularfeldern Checkboxes und Checkbox Items hinzufügen.
Der Unterschied zwischen einer Optionsschaltfläche und einem Kontrollkästchen besteht darin, dass bei Optionsschaltflächen nur eine Option ausgewählt werden kann, während bei einer Liste von Kontrollkästchen mehrere Optionen ausgewählt werden können.
Jetzt müssen Sie die Bilder neben den einzelnen Optionsfeldern hinzufügen.
Schritt 3: Bilder zu Radio-Buttons hinzufügen
Um den Optionsfeldern Ihres Formulars ein Bild hinzuzufügen, öffnen Sie die Feldoptionen für das Feld "Mehrfachauswahl" und aktivieren Sie die Option " Bildauswahl verwenden".
Nachdem Sie die 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. Dadurch wird Ihre WordPress-Mediathek geöffnet, so dass Sie ein neues Bild in WordPress hochladen oder aus Ihren vorhandenen Bildern auswählen können.
Hinweis: Die Bilder werden nicht beschnitten oder in der Größe verändert, wenn Sie sie zu Ihrem Formular hinzufügen. Um optimale Ergebnisse zu erzielen, empfehlen wir, alle Bilder in der gleichen Größe und in einer Größe von 250×250 Pixeln oder kleiner auszuwählen.
Auswahlmöglichkeiten für Symbole zu Optionsschaltflächen hinzufügen
Je nach Formular kann es sinnvoller sein, die Auswahl von Symbolen als die Auswahl von Bildern zu verwenden. Sie können diese Option auf die gleiche Weise wie die Bildauswahl aktivieren, indem Sie im Feld Optionen die Option Symbolauswahl verwenden auswählen.
WPForms verwendet eine umfangreiche Bibliothek mit vorgefertigten Symbolen, so dass Sie diese nicht hochladen müssen. Sie können einfach das Symbol, das Sie benötigen, aus den verfügbaren Optionen auswählen.
Weitere Einzelheiten finden Sie in unserem Leitfaden zur Verwendung von Symbolen in WPForms.
Schritt 4: Passen Sie Ihre Bildauswahl an
WPForms macht die Anpassung Ihrer Bildauswahl super einfach dank der eingebauten Anpassungsoptionen.
Wählen Sie zunächst Ihren bevorzugten Bildauswahlstil.
Der Stil Modern zeigt die ausgewählten Bilder in einem schattierten Rahmen an und fügt in der Mitte ein grünes Häkchen hinzu.
Im klassischen Stil werden die ausgewählten Bilder mit einem dicken, grauen Rahmen angezeigt. Die Option Keine fügt kein spezielles Styling hinzu. Stattdessen sehen Sie neben jedem Bild herkömmliche Optionsfelder, aus denen die Besucher der Website wählen können.
Klicken Sie dann auf die Registerkarte Erweitert, um weitere Optionen anzuzeigen.
Wichtig ist, dass Sie Ihr bevorzugtes Layout auswählen. Sie können zwischen 1, 2 oder 3 Spalten wählen.
Sie können auch die Option "Inline" wählen, die so viele Optionen wie möglich in jeder Zeile platziert, bevor eine weitere hinzugefügt wird. Inline ist das Standard-Auswahl-Layout für alle WordPress-Formulare, die Bildauswahlen anzeigen.
Sie können auch die Option Zufällige Auswahl wählen, wenn Sie die Reihenfolge der Bildauswahl bei jedem neuen Besuch Ihrer Website zufällig festlegen möchten.
Schritt 5: Aktivieren der Umfrageberichterstattung
Wenn Sie sehen möchten, wie viele Personen sich für die von Ihnen angebotenen Bilder entscheiden, können Sie die Umfrageberichterstattung für Ihre Formulare aktivieren, indem Sie das Addon "Surveys and Polls" installieren und aktivieren.
Um dies zu tun, gehen Sie zu WPForms " Addons und finden Sie die eine beschriftet Umfragen und Umfragen Addon.
Klicken Sie auf Addon installieren und dann auf Aktivieren.
Mit WPForms können Sie Umfrageergebnisse für die folgenden Formularfelder sammeln:
- Einzeiliger Text
- Absatz Text
- Auswahlliste
- Kontrollkästchen
- Multiple Choice
- Bewertung
- Likert-Skala
- Net Promoter Score (NPS)
Um Umfrageberichte für alle kompatiblen Felder in einem Formular zu aktivieren, gehen Sie im Formularersteller zu Einstellungen " Umfragen und Abstimmungen und wählen Sie die Option Umfrageberichte aktivieren.
Wenn Sie nur Daten für ein bestimmtes Feld erfassen möchten, öffnen Sie dessen Feldoptionen und klicken Sie auf die Registerkarte Erweitert . Aktivieren Sie dann die Option Umfrageberichte aktivieren.
Sobald die Nutzer Ihr Formular ausfüllen, das mit Bildern neben den Optionsfeldern versehen ist, können Sie im WordPress-Dashboard Umfrageberichte erstellen, um die Ergebnisse zu sehen.
Um einen Umfragebericht zu erstellen, gehen Sie zu WPForms " Alle Formulare und bewegen Sie den Mauszeiger über Ihr Formular, um die Optionen anzuzeigen. Klicken Sie dann auf Umfrageergebnisse.
Sobald Sie darauf klicken, werden die Ergebnisse Ihres Formulars angezeigt:
Hinzufügen von Bildern neben Radiofeldern - FAQs
Ich habe ein paar häufige Fragen zusammengestellt, die unser Team in letzter Zeit zu Funkfeldern und Bildern erhalten hat. Lesen Sie diese, wenn Sie weitere Fragen zu diesem Thema haben.
Warum sollte ich Bilder neben Optionsfeldern in WordPress-Formularen hinzufügen?
Bilder wirken Wunder als visuelle Hilfsmittel in WordPress-Formularen; sie sind viel leichter zu erkennen und ziehen sofort die Blicke der Besucher auf sich. Infolgedessen sind Formulare mit visuellen Elementen leichter auszufüllen, da weniger Zeit zum Lesen und Verstehen benötigt wird, was zu einer höheren Benutzeraktivität und einem besseren Gesamterlebnis führt.
Brauche ich Programmierkenntnisse, um meinem Formular Bilder hinzuzufügen?
Wenn Sie ein benutzerfreundliches Plugin wie WPForms verwenden, brauchen Sie keine einzige Zeile Code, um Bilder zu Ihren Formularen hinzuzufügen. Das Hinzufügen von Bildern zu Ihrem Formular mit WPForms ist genau wie das Hochladen von Bildern in Ihre WordPress Media Gallery. Jeder kann es tun!
Wird das Hinzufügen von Bildern meine Website verlangsamen?
Das Hinzufügen von Bildern wirkt sich zwar auf die Ladegeschwindigkeit der Seite aus, doch hängt dies in hohem Maße von Ihrer Website ab. Wenn Sie darauf achten, wie viele Bilder Sie hinzufügen, und sicherstellen, dass sie alle optimiert sind, wird es keine negativen Auswirkungen auf die Geschwindigkeit Ihrer Seite geben.
Kann ich das Aussehen der Optionsfelder und Bilder anpassen?
Ja, Sie können das Aussehen von Optionsfeldern und Bildern in WPForms anpassen. Zum Beispiel können Sie aus verschiedenen Feldlayouts wie Inline, 1-spaltig, 2-spaltig und 3-spaltig wählen.
Außerdem gibt WPForms auch können Sie zwischen Modern und Classic Stile für Radio-Feld Entscheidungen, die Bilder in leicht unterschiedlichen Stilen anzuzeigen.
Haben Bilder neben Optionsfeldern Auswirkungen auf die Zugänglichkeit?
Bilder zu Optionsschaltflächen können die Zugänglichkeit beeinträchtigen, wenn Sie einige Überlegungen wie den Farbkontrast zwischen Hintergrund und Bildern außer Acht lassen.
Ich empfehle Ihnen, Ihre Bilder mit beschreibenden Alt-Texten zu versehen und einen einfachen Sehtest durchzuführen, um sicherzustellen, dass die Bilder sofort sichtbar sind und einen hohen Kontrast aufweisen. Wenn Sie sich anstrengen müssen, um das Bild deutlich zu sehen, ist das ein Zeichen dafür, dass Sie kontrastreichere Farben brauchen, um eine optimale Zugänglichkeit zu gewährleisten.
Weiter, Mehr Geld online verdienen
Und da haben Sie es! Sie wissen jetzt, wie Sie ein Bild neben den Optionsfeldern in WordPress-Formularen hinzufügen können.
Wenn Sie daran interessiert sind, online Geld zu verdienen, können Sie in unserem Tutorial nachlesen, wie Sie ein einfaches Bestellformular in WordPress erstellen und Bilder neben jedem Artikel, den Sie zum Verkauf anbieten, hinzufügen.
Erstellen Sie jetzt Ihr WordPress-Formular
Also, worauf warten Sie noch? Starten Sie noch heute mit dem leistungsstärksten WordPress-Formular-Plugin.
Und vergessen Sie nicht: Wenn Ihnen dieser Artikel gefällt, dann folgen Sie uns bitte auf Facebook und Twitter.
Das Radiobild wird in den Zahlungsfeldern nicht angezeigt ... es funktioniert in den "Standardfeldern", aber nicht in den Zahlungsfeldern.
Haben Sie eine Idee, warum?
Hallo Raju,
Das tut uns leid! Ja, dies wird derzeit absichtlich verhindert, weil unsere Zahlungsintegrationen diese Etiketten behandeln (HTML verursacht Probleme, wenn diese Daten an Stripe oder PayPal gesendet werden). Unser Team hat dies jedoch im Blick, und unsere Entwickler arbeiten an einer Lösung für dieses Problem. Ich weiß nicht, wann das sein wird, aber wir hoffen, dass wir das Problem bald lösen können!
Falls es hilft, können Bilder zu jeder Artikeloption mit etwas benutzerdefiniertem CSS hinzugefügt werden. Dies erfordert ein formularspezifisches CSS-Styling, aber wenn Sie bereit sind, sich mit unserem Support-Team in Verbindung zu setzen, können wir Ihnen dabei helfen, dies zu erreichen 🙂
Ist "Image Choices to 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 in 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 geht, ein Bild auswählt und so weiter. Jede Bildauswahl entspricht einem Textabschnitt, den ich dem Benutzer in einem Bericht zur Verfügung stellen möchte. Kann dies mit WPForms getan werden? Mit nur geringfügigen Code Ergänzungen?
Hallo Richard,
Ich bitte um Entschuldigung, aber ich bin mir nicht sicher, ob ich genau verstehe, was Sie tun möchten. Würden Sie sich bitte bei Gelegenheit mit einigen zusätzlichen Details an unseren Support wenden?
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 sehen und im modernen Stil ist das Häkchen auf dem Bild und oft schwer zu sehen, es zeigt ein schwarzes Häkchen-Symbol auf vielen Handys, was es noch schwieriger zu sehen macht, und das Fettmachen des Textes verschiebt die Felder manchmal, wenn sie auf dem Handy sind...
Halten Sie es einfach und machen Sie einen fetten, FARBIGEN Rahmen, der die Breite der Felder nicht verändert.
Hallo Martin - Danke für das Feedback und die Vorschläge! Ich habe es in unserem Tracker vermerkt, damit das Entwicklerteam es bei der Arbeit an unserer Roadmap für künftige Updates berücksichtigen kann. Wenn Sie möchten, können Sie sich in der Zwischenzeit an unser Support-Team wenden, um Hilfe zu erhalten, und sie können Sie mit einem benutzerdefinierten CSS-Code unterstützen, damit es so aussieht, wie Sie es brauchen.
Wenn Sie eine WPForms-Lizenz haben, haben Sie Zugang zu unserer E-Mail-Support, so senden Sie bitte ein Support-Ticket. Andernfalls bieten wir begrenzte kostenlose Unterstützung in der WPForms Lite WordPress.org Support-Forum.
Danke 🙂 .
Hallo,
Ich habe die Bildauswahl zusammen mit Kontrollkästchen verwendet. Es funktioniert gut auf Desktop und Tablet-Modus, aber nicht auf mobile. Der gesamte Checkbox-Abschnitt mit allen Bildern und Checkboxen verschwindet vom Haltepunkt 600px nach unten. Ich habe einige benutzerdefinierte CSS, ich dachte, es könnte meine CSS sein, die irgendwie die Probleme verursacht und entfernt sie, aber kein Glück.
Ich verwende 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 dieser Anleitung gezeigt
Ich hoffe, das hilft 🙂 .