How to Add Image Choices to WPForms

Markdown anzeigen

Möchten Sie Ihren Formularen Bildoptionen hinzufügen? WPForms erleichtert das Hinzufügen von Bildern zu Ihren Feldern für Multiple Choice, Kontrollkästchen, Mehrfachauswahl und Kontrollkästchenelemente, damit Ihre Benutzer die von Ihnen aufgeführten Optionen oder Elemente sehen können.

Dieses Tutorial zeigt Ihnen, wie Sie vorhandenen oder neuen Feldern in WPForms Bildauswahlen hinzufügen.

Einrichtung von Bildauswahlen
Bilder hinzufügen
Anpassen von Bildoptionen

Möchten Sie eine anpassbare Formularvorlage in der Vorschau anzeigen und verwenden, um Ihren Formularerstellungsprozess zu beschleunigen? Sehen Sie sich unsere Beispiel-Bestellformularvorlage für T-Shirts an.

Einrichtung von Bildauswahlen

Bevor Sie beginnen, müssen Sie sicherstellen, dass WPForms auf Ihrer WordPress-Site installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Dann können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.

Sobald der Formular-Builder geöffnet ist, können Sie Bildauswahlen zu jedem der folgenden Feldtypen hinzufügen:

Mehrfachauswahl
Kontrollkästchen
Mehrere Artikel
Kontrollkästchen-Elemente

Zusätzlich können Sie Bildern zu neuen und bestehenden Feldern dieser Feldtypen hinzufügen.

In unserem Beispiel möchten wir Bilder für Artikeloptionen in einem Bestellformular anzeigen. Dazu fügen wir zunächst ein Feld Mehrere Artikel zu unserem Formular hinzu.

Nachdem wir unser Feld hinzugefügt haben, besteht der nächste Schritt darin, die Feldbezeichnung zu ändern und Text für verfügbare Optionen hinzuzufügen. Da wir ein Feld für mehrere Artikel verwenden, müssen wir auch Preise für jeden Artikel hinzufügen.

Sobald diese grundlegende Einrichtung abgeschlossen ist, wählen wir die Option Bildauswahlen verwenden.

Sobald diese Option aktiviert ist, wird jeder Option eine Schaltfläche Bild hochladen hinzugefügt. Außerdem wird in der Vorschau ein Platzhalterbild für jede Option angezeigt.

Die Platzhalterbilder sollen den Formularerstellungsprozess leiten und werden nur im Vorschaufenster angezeigt. Diese Platzhalterbilder werden nicht angezeigt, wenn das Formular auf Ihrer Website eingebettet ist.

Bilder hinzufügen

Um einem Optionsfeld ein Bild hinzuzufügen, klicken Sie auf die Schaltfläche Bild hochladen.

Auf Schaltfläche „Bild hochladen“ klicken

Wenn Sie versuchen, ein nicht akzeptiertes Bildformat (wie z. B. .svg-Dateien) hochzuladen, müssen Sie zuerst die Unterstützung für diesen Dateityp aktivieren. Lesen Sie unbedingt unseren Leitfaden zum Zulassen zusätzlicher Dateiuploadtypen für weitere Details.

Dies öffnet die WordPress-Mediathek. Von hier aus können Sie eine Datei auswählen, die bereits zu Ihrer Website hinzugefügt wurde, oder ein neues Bild hochladen. Sobald Sie das gewünschte Bild ausgewählt haben, klicken Sie auf die Schaltfläche Bild verwenden.

Für dieses Beispiel haben wir alle Bilder bereits auf eine Größe von 150 x 150 Pixel bearbeitet. Dies wird dazu beitragen, dass unsere Bildoptionen einheitlicher und professioneller aussehen.

Bilder werden beim Hinzufügen zu Ihrem Formular nicht zugeschnitten oder in der Größe geändert. Für beste Ergebnisse empfehlen wir, alle Bildauswahlen gleich groß und 250 x 250 Pixel oder kleiner zu machen.

Details zu grundlegenden Bildbearbeitungsoptionen, die in die WordPress-Mediathek integriert sind, einschließlich Skalierung und Zuschneiden, finden Sie im Tutorial von WPBeginner.

So werden unsere Bildauswahlen unseren Benutzern angezeigt:

Ein Beispiel für ein Feld mit Bildauswahlen

Wenn Sie ein saubereres Erscheinungsbild bevorzugen, indem Sie die Beschriftungen unter den Bildauswahlen ausblenden, bietet unsere Entwicklerdokumentation einen schnellen CSS-Snippet, um genau das zu tun.

Anpassen von Bildoptionen

WPForms enthält auch mehrere integrierte Optionen zur Anpassung Ihrer Bildauswahlen. Um diese Optionen anzuzeigen, öffnen Sie den Tab Erweitert innerhalb der Feldoptionen.

Zusätzlich zu allen anderen verfügbaren Anpassungsoptionen für das von Ihnen verwendete Feld werden zwei Optionen hinzugefügt, wenn die Option Bildauswahlen verwenden ausgewählt ist: Bildauswahlstil und Auswahl-Layout.

Bildauswahlstil

Es stehen drei Optionen für die Bildauswahl zur Verfügung: Modern, Klassisch und Keine.

Wir werden jede dieser Optionen unten besprechen:

Moderner Stil

Die Option Modern zeigt alle ausgewählten Optionen in einem schattierten Feld an und fügt außerdem eine grüne und weiße Markierung in der Mitte der ausgewählten Option hinzu.

Klassischer Stil

Die Option Klassisch fügt einfach einen dicken, dunkelgrauen Rahmen um alle ausgewählten Optionen hinzu.

Keine

Wenn Sie keine spezielle Formatierung hinzufügen möchten, wählen Sie die Option Keine. Diese Option zeigt normale Kontrollkästchen oder Optionsfelder neben dem Text für jede Option an.

Möchten Sie Leerzeichen um Bildauswahlen in Ihren Formularen entfernen? Schauen Sie in unsere Entwicklerdokumentation für einen CSS-Snippet, der das Erscheinungsbild Ihrer Bildauswahlen optimiert.

Auswahl-Layout

Für jedes Feld, in dem Bildauswahlen zulässig sind, haben Sie mehrere Layout-Optionen. Dies bestimmt, wie viele Spalten zur Anzeige der Auswahlen in diesem Feld verwendet werden.

Die Optionen für das Auswahl-Layout umfassen Eine Spalte, Zwei Spalten, Drei Spalten und Inline.

Standardmäßig ist die Option Inline ausgewählt, wenn die Option „Bildauswahlen hinzufügen“ aktiviert ist. Dadurch werden automatisch so viele Auswahlen wie möglich in jede Zeile platziert.

In den meisten Fällen empfehlen wir, das Standard-Layout Inline für Bildauswahlfelder beizubehalten. Dadurch passt sich das Layout automatisch an verschiedene Bildschirmgrößen an.

Das ist alles! Sie können jetzt Bilder zu allen Feldern für Mehrfachauswahl, Kontrollkästchen, Mehrere Elemente und Kontrollkästchen-Elemente in Ihren Formularen hinzufügen. Wenn Sie ein Feld für mehrere Elemente verwendet und Zahlungen akzeptieren möchten, vergessen Sie nicht, eine Integration mit Stripe, PayPal, Authorize.Net oder Square einzurichten.

Möchten Sie als Nächstes Ihre Formulare testen, bevor Sie sie auf Ihrer Website einfügen? Schauen Sie sich unbedingt unsere Checkliste vor dem Start für alle unsere Tipps und Empfehlungen an, bevor Sie ein Formular starten.

Bildoptionen hinzufügen

KI-Zusammenfassung

Blumenbestellformular-Demo!