Anpassen der Likert-Skala-Feldtabelle

Möchten Sie das Styling des Formularfelds Likert-Skala in WPForms anpassen? Wenn Sie das Styling dieses Felds an die Branding-Farben Ihrer Website anpassen möchten, zeigt Ihnen dieses Tutorial, wie es geht. Wir geben Ihnen das grundlegende CSS-Beispiel, das Sie zum Anpassen des Likert-Skala-Formularfelds benötigen.

Erstellen Ihres Formulars

Wir beginnen mit der Erstellung des Formulars und dem Hinzufügen unserer Formularfelder, einschließlich der Likert-Skala.

Wenn Sie Hilfe beim Erstellen eines Formulars mit dem Likert-Skala-Formularfeld benötigen, lesen Sie bitte die Dokumentation.

Anpassen der Likert-Skala

Als Nächstes müssen Sie dieses CSS auf Ihre Website kopieren.

Wenn Sie nicht sicher sind, wie das geht, lesen Sie bitte dieses Tutorial.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
    background-color: #FFE0B2;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
    border: 1px solid #EF6C00;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

Das obige Styling ändert die Farben der geraden und ungeraden Zeilen sowie die Farbe der ausgewählten Option. Dieses CSS deckt auch die Stile Modern oder Classic der Likert-Skala ab.

Sie müssen die -971 ändern, da dies die Formular-ID für unser Beispiel ist. Sie müssen diese Nummer ändern, um Ihre eigene Formular-ID anzugeben.

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

Und das ist alles! Allein durch die Verwendung von CSS können Sie das Styling der Likert-Skala auf Ihrem Formular anpassen. Möchten Sie auch das Styling des Net Promoter Score-Formularfelds anpassen? Probieren Sie unser Tutorial zur Anpassung des Net Promoter Score-Felds aus.

FAQ

F: Wie entferne ich den Zeilenumbruch bei meinen Optionen?

A: Standardmäßig fügt WPForms einen Zeilenumbruch zum Text über CSS hinzu. Sie können diesen durch Hinzufügen von zusätzlichem CSS entfernen.

Denken Sie daran, die -971 zu ändern, damit sie Ihrer Formular-ID entspricht.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic th, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
    word-break: auto-phrase;
}