KI-Zusammenfassung
Möchten Sie Ihren Formularen Icon-Optionen hinzufügen? Die Verwendung von Icons in Feldern für Multiple Choice, Checkboxen, Multiple Items und Checkbox Items ist eine einfache Möglichkeit, die visuelle Attraktivität und Benutzerfreundlichkeit Ihres Formulars zu verbessern.
Dieses Tutorial zeigt Ihnen, wie Sie vorhandenen oder neuen Feldern in WPForms Icon-Auswahlen hinzufügen.
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.
Einrichtung Ihres Formulars
Sobald Sie den Formular-Builder geöffnet haben, können Sie Icon-Auswahlen zu jedem der folgenden Feldtypen hinzufügen:
- Mehrfachauswahl
- Kontrollkästchen
- Mehrere Artikel
- Kontrollkästchen-Elemente
Für unser Beispiel erstellen wir ein einfaches Kontaktformular, das es Benutzern ermöglicht, ihre bevorzugte Kontaktmethode auszuwählen, einschließlich Anruf, Textnachricht oder E-Mail.
Um zu beginnen, fügen wir unserem Formular ein Multiple Choice-Feld hinzu, indem wir darauf klicken oder es in den Formular-Vorschau-Bereich ziehen und ablegen.
Als Nächstes ändern wir die Bezeichnungen unserer Auswahlmöglichkeiten in Folgende: Anruf, Textnachricht und E-Mail.
Hinweis: Möchten Sie Ihrem Formular eine lange Liste von Auswahlmöglichkeiten hinzufügen? Lesen Sie unsere Anleitung zum Massenimport von Auswahlmöglichkeiten, um zu erfahren, wie Sie mehrere Icon-Auswahlen auf einmal zu Ihrem Formular hinzufügen, anstatt jede Auswahl einzeln zu erstellen.
Icon-Auswahlen aktivieren
Sobald diese grundlegende Einrichtung abgeschlossen ist, aktivieren wir die Icon-Auswahlen, indem wir die Option Icon-Auswahlen verwenden aktivieren.
Wenn Sie Icon-Auswahlen zum ersten Mal einrichten, sehen Sie eine Überlagerung mit einer Nachricht, die Sie auffordert, eine Icon-Bibliothek herunterzuladen. Der Download der Icon-Bibliothek ist ein erforderlicher Schritt, der Ihnen Zugriff auf über 2.000 Icons für Ihre Formulare gewährt.
Um mit dem Download fortzufahren, klicken Sie auf die Schaltfläche Weiter.
Hinweis: WPForms verwendet die neueste Version der Font Awesome Icon-Bibliothek für Icon-Auswahlen.
Als Nächstes sehen Sie eine weitere Überlagerung, die Sie darüber informiert, dass der Download läuft. Um Unterbrechungen während der Installation zu vermeiden, stellen Sie sicher, dass Sie das Browserfenster nicht schließen oder neu laden.
Sobald die Icon-Bibliothek erfolgreich installiert wurde, klicken Sie auf die Schaltfläche OK, um Ihr Formular zu speichern und den Formular-Builder neu zu laden.
Icons auswählen
Nachdem wir nun Icon-Auswahlen aktiviert haben, werden Standard-Icons zu unserem Formular hinzugefügt. Wir wählen neue Icons aus, um die Standard-Icons zu ersetzen, indem wir auf jedes Icon auf der linken Seite des Formular-Builders klicken.
Als Nächstes erscheint das Icon-Auswahl-Modal. Hier können Sie nach dem perfekten Icon für Ihr Formular suchen oder stöbern.
Wir suchen nach einem Telefon-Icon, indem wir „phone“ in die Suchleiste eingeben.
Die Suchergebnisse zeigen alle Icons an, die „phone“ im Icon-Namen enthalten. Wir klicken auf das phone-Icon, um es als unsere erste Icon-Auswahl auszuwählen.
Nachdem Sie ein Symbol aus dem Symbol-Auswähler ausgewählt haben, wird es im Formular-Generator angezeigt.
Wählen Sie nun weitere Icons für die verbleibenden Auswahlmöglichkeiten in Ihrem Formular aus, indem Sie diesen Vorgang wiederholen.
Icon-Auswahlen anpassen
Sobald Sie die Symbole ausgewählt haben, die Sie in Ihrem Formular verwenden möchten, ist es an der Zeit, deren Aussehen anzupassen. WPForms erleichtert die Anpassung von Symbolfarbe, -größe und -stil direkt im Formular-Generator. Wir werden jede dieser Optionen unten behandeln.
Hinweis: Anpassungen werden auf alle Symboloptionen innerhalb desselben Formularfelds angewendet.
Icon-Farbe
Standardmäßig ist die Symbolfarbe auf Blau eingestellt. Sie können Ihre bevorzugte Symbolfarbe einfach auswählen, indem Sie auf die Option Symbolfarbe klicken und das Farbauswahlwerkzeug verwenden.
Die ausgewählte Farbe wird auf alle Symboloptionen für das jeweilige Feld angewendet.
Hinweis: Wenn Sie Symboloptionen mit dem Conversational Forms Addon verwenden, beachten Sie, dass das Farbschema, das Sie für Ihr Konversationsformular auswählen, die Symbolfarbe überschreibt.
Icon-Größe
Es gibt 3 Größenoptionen für Symboloptionen, einschließlich Klein, Mittel und Groß. Um die Größe zu ändern, klicken Sie auf das Dropdown-Menü Symbolgröße und wählen Sie Ihre bevorzugte Größe aus.
Hier sehen Sie, wie die Größenoptionen im Frontend verglichen werden:
Die ausgewählte Größe wird auf alle Symboloptionen für das jeweilige Feld angewendet.
Stil der Symboloption
Es gibt 4 Optionen für die Gestaltung von Symboloptionen, einschließlich Standard, Modern, Klassisch und Keine. Um den Symbolstil zu ändern, klicken Sie auf das Dropdown-Menü Stil der Symboloption und wählen Sie Ihren bevorzugten Stil aus.
Der ausgewählte Stil der Symboloption wird auf alle Symboloptionen für das jeweilige Feld angewendet.
Wir werden unten auf jede der verfügbaren Stiloptionen eingehen:
Standard
Der Standard-Stil fügt einen abgerundeten Rahmen hinzu, enthält ein sichtbares Kontrollkästchen oder ein Optionsfeld, hat einen farbigen Hintergrund und Rahmen, wenn er ausgewählt ist, und zeigt das Beschriftungsfeld außerhalb des Rahmens an.
Modern
Der Moderne-Stil fügt einen abgerundeten Rahmen hinzu, zeigt das Beschriftungsfeld innerhalb des Rahmens an und hat einen Schatten und einen farbigen Rahmen, wenn er ausgewählt ist.
Klassisch
Der Klassische-Stil fügt einen quadratischen und farbigen Rahmen hinzu, wenn er ausgewählt ist. Das Beschriftungsfeld wird innerhalb des Rahmens der ausgewählten Option angezeigt.
Keine
Wenn Sie keine spezielle Formatierung wünschen, wählen Sie die Option Keine. Diese Option zeigt ein Kontrollkästchen oder ein Optionsfeld in einer einzigen Zeile unter dem Symbol an.
Auswahl eines Layouts für die Auswahlmöglichkeiten
Um ein Layout für die Anzeige von Symboloptionen in Ihrem Formular auszuwählen, öffnen Sie den Tab Erweitert im Bereich Feldoptionen.
Sie können zwischen den folgenden 4 Layout-Optionen für die Anzeige der Optionen wählen: Eine Spalte, Zwei Spalten, Drei Spalten und Inline. Das von Ihnen gewählte Layout bestimmt die Anzahl der Spalten, die zur Anzeige der Optionen verwendet werden.
Klicken Sie auf das Dropdown-Menü Layout der Optionen und wählen Sie Ihr bevorzugtes Layout aus.
So wird das Formular im Frontend der Website aussehen:
Häufig gestellte Fragen
Unten finden Sie einige der am häufigsten gestellten Fragen zur Verwendung von Symboloptionen.
Warum werden die Symbole in meinem Formular nicht angezeigt?
Wenn die Symbolauswahl, die Sie Ihrem Formular hinzugefügt haben, nicht angezeigt wird, gibt es wahrscheinlich ein Problem mit dem Ordner, der die Symbolbibliothek enthält. Um dieses Problem zu beheben, öffnen Sie einfach Ihr Formular im Formular-Generator und folgen Sie den Anweisungen zur Neuinstallation der Symbolbibliothek.
Warum werden Symbole nicht in Einträgen, E-Mail-Benachrichtigungen, gedruckten Einträgen usw. angezeigt?
Symbole werden verwendet, um das Erscheinungsbild eines Formulars zu verbessern und Benutzern visuelle Hinweise zu geben, damit sie das Formular schneller ausfüllen können. Sie sollten jedoch nicht als Ersatz für Beschriftungen oder Beschreibungen verwendet werden, da die Interpretation der Bedeutung eines Symbols variieren kann. Nur der Wert eines ausgewählten Symbols wird in Einträgen und E-Mail-Benachrichtigungen aufgenommen, um die über Ihr Formular übermittelten Informationen effektiv zu kommunizieren.
Das ist alles! Jetzt wissen Sie, wie Sie Symbolauswahlen zu Ihrem Formular hinzufügen.
Möchten Sie als Nächstes zusätzliche Inhalte zu Ihren Formularen hinzufügen? Schauen Sie sich unbedingt unseren Leitfaden zur Verwendung des Inhaltsfelds an, um zu erfahren, wie Sie Überschriften, Listen, Medien und mehr zu Ihren Formularen hinzufügen.