Anpassen des Net Promoter Score-Felds

Möchten Sie das Aussehen des Formularfelds Net Promoter Score anpassen? Mit ein wenig CSS können Sie das Erscheinungsbild dieses Formularfelds auf Ihrer Website einfach ändern. In diesem Tutorial zeigen wir Ihnen, wie Sie mit CSS das Styling dieses Felds ändern können.

Hinzufügen des Formularfelds

Zuerst müssen Sie ein Formular und Ihre Felder sowie das Feld Net Promoter Score zu Ihrem Formular hinzufügen und dann die gewünschten Optionen für dieses Feld konfigurieren.

Wenn Sie hierbei Hilfe benötigen, lesen Sie bitte die Dokumentation.

Anpassen des Net Promoter Score

Als Nächstes müssen Sie dieses CSS auf Ihre Website kopieren. Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}

Das obige CSS wird nur auf das Formular mit der ID 548 angewendet. Bevor Sie dieses CSS speichern, müssen Sie diese Formular-ID an Ihre Formular-ID anpassen.

Wenn Sie Hilfe beim Auffinden Ihrer Formular-ID benötigen, lesen Sie bitte dieses Tutorial.

Und das ist alles! Sie haben erfolgreich CSS verwendet, um das Formularfeld Net Promoter Score anzupassen. Möchten Sie das Styling der Symbole für das Formularfeld Bewertungen anpassen? Werfen Sie einen Blick auf unseren Artikel So passen Sie das Aussehen der Bewertungssymbole an.

FAQ

F: Wie kann ich den angezeigten Text (Überhaupt nicht wahrscheinlich) ändern?

A: Sie können diesen angezeigten Text auch mit CSS ändern.

form#wpforms-form-548 span.not-likely:before {
    content: "Not at all satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.extremely-likely:before {
    content: "Completely satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
    font-size: 0;
}