How to Customize the Look of the Rating Icons

Markdown anzeigen

Möchten Sie das Erscheinungsbild Ihrer Bewertungsfeld-Icons in WPForms verbessern? Während der Formularersteller grundlegende Farb- und Icon-Optionen bietet, können Sie mit CSS anspruchsvollere Stile erzielen.

Diese Anleitung zeigt Ihnen, wie Sie Ihre Bewertungs-Icons für einen einzigartigen Look anpassen, der zu Ihrer Marke passt.

Einrichtung Ihres Formulars

Erstellen Sie zuerst Ihr Formular und fügen Sie ein Bewertungs Feld hinzu. Sie können damit beginnen, Ihre bevorzugten Icons und Farben über den Formularersteller auszuwählen. Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Anleitung zum Erstellen Ihres ersten Formulars.

Details zur Verwendung des Bewertungsfelds finden Sie in unserer umfassenden Anleitung zum Bewertungsfeld.

Benutzerdefinierte Icon-Stile hinzufügen

Um Ihre Bewertungs-Icons anzupassen, fügen Sie dieses CSS zu Ihrer Website hinzu. Wenn Sie nicht sicher sind, wie Sie benutzerdefiniertes CSS hinzufügen, lesen Sie bitte unsere Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website.

Stellen Sie sicher, dass Sie form#wpforms-form-1000 durch Ihre tatsächliche Formular-ID ersetzen. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, lesen Sie unsere Anleitung zum Finden von Formular- und Feld-IDs.

Durch Hinzufügen dieses CSS können Sie jetzt das Aussehen der Bewertungs-Icons an jeden gewünschten Stil anpassen

Benutzerdefinierte Bilder als Bewertungs-Icons verwenden

Wenn Sie lieber Ihre eigenen Bilder anstelle der Standard-Icons verwenden möchten, können Sie dieses alternative CSS verwenden:

/* Style custom image rating icons */
form#wpforms-form-1000 .wpforms-field-rating-item {
    padding-right: 6px;
    background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-size: 50%;
}

/* Style hover and selected states */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
    background-size: 70%;
}

/* Hide default SVG icons */
form#wpforms-form-1000 .wpforms-field-rating svg {
    display: none;
}

Denken Sie daran, die Bild-URL zu aktualisieren, damit sie auf Ihr benutzerdefiniertes Bild verweist. Das Beispiel geht von einer Bildgröße von 150px mal 150px aus.

Häufig gestellte Fragen

F: Funktionieren diese Stile mit Conversational Forms?

A: Ja! Dieses CSS passt das Aussehen der Bewertungs-Icons an, wenn Sie das Addon Conversational Forms, das Addon Forms Pages sowie eine Standard-Einbettung des Formulars in einem beliebigen Beitrag, einer Seite oder einem Widget verwenden.

Und das ist alles, was Sie brauchen, um das Aussehen der Bewertungs Formularfeld-Icons in WPForms anzupassen! Möchten Sie als Nächstes auch das Aussehen des Captcha-Themas für reCAPTCHA anpassen? Schauen Sie sich dazu unser Tutorial zum Ändern des Captcha-Themas bei Google reCAPTCHA an.

So passen Sie das Aussehen der Bewertungs-Icons an

KI-Zusammenfassung