Anpassen des Stils von Fancy-Feldern

Markdown anzeigen

Möchten Sie einzelne Felder in Ihren Formularen gestalten, ohne andere Formularfelder zu beeinträchtigen? Mit dem richtigen CSS-Selektor können Sie die Stile jeder Formularkomponente ändern, um sie an Ihre Bedürfnisse anzupassen.

Dieses Tutorial bietet eine Liste von Selektoren, die Sie benötigen, um schicke Felder in WPForms zu gestalten.

Hinweis: Die Schritte in diesem Tutorial sind fortgeschritten und erfordern einige CSS-Kenntnisse. Wenn Sie lieber keinen Code verwenden möchten, finden Sie in unserer Anleitung zum Gestalten von WPForms im Block-Editor.

Verwendung der unten stehenden Code-Schnipsel

Nachfolgend finden Sie eine Liste der CSS-Selektoren, die Sie benötigen, um bestimmte schicke Felder mit Ihrem CSS-Code anzusprechen.

Wir haben auch die Standardstile aufgenommen, die WPForms automatisch auf diese Selektoren anwendet. Um Teile Ihres Formulars anzupassen, können Sie einen CSS-Schnipsel aus diesem Tutorial auf Ihre Website kopieren und ihn dann nach Bedarf bearbeiten.

Hinweis: Sie wissen nicht, wie Sie CSS zu Ihrer Website hinzufügen? Sehen Sie sich das Tutorial von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website an.

Schicke Felder

Hinweis: Um mehr über die Verwendung des unten stehenden Codes zu erfahren, lesen Sie unbedingt unser Tutorial zur Anpassung des Stils von Standardfeldern und anderen Formularelementen.

Schicke Felder

Telefon

Telefonfeld

Telefon-Abstand

.wpforms-form .wpforms-field.wpforms-field-phone {
    padding: 10px 0;
    clear: both;
}

Telefon-Label

.wpforms-form .wpforms-field.wpforms-field-phone .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Telefon-Eingabefeld

.wpforms-form .wpforms-field.wpforms-field-phone input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

.wpforms-form .wpforms-field.wpforms-field-phone .iti__country-list {
    position: absolute;
    z-index: 2;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
    background-color: white !important;
    border: 1px solid #CCC;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;  
}

Adresse (US oder International)

Adressfeld

Adress-Abstand

.wpforms-form .wpforms-field.wpforms-field-address {
    padding: 10px 0;
    clear: both;
}

Adress-Label

.wpforms-form .wpforms-field.wpforms-field-address .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Adress-Eingabefelder

.wpforms-form .wpforms-field.wpforms-field-address input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-state {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

.wpforms-form .wpforms-field.wpforms-field-address select.wpforms-field-address-country {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Datum/Uhrzeit

Datums-/Zeitfeld

Datum/Uhrzeit-Abstand

.wpforms-form .wpforms-field.wpforms-field-date-time {
    padding: 10px 0;
    clear: both;
}

Datum/Uhrzeit-Label

.wpforms-form .wpforms-field.wpforms-field-date-time .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Datum/Uhrzeit-Eingabefeld

.wpforms-form .wpforms-field.wpforms-field-date-time input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Datum/Uhrzeit-Datumsauswahl: Ganzer Kalender

Datums-Auswahlkalender

.flatpickr-calendar {
    background: transparent;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 293.75px;
    box-sizing: border-box;
    -webkit-transition: top .1s cubic-bezier(0,1,.5,1);
    transition: top .1s cubic-bezier(0,1,.5,1);
    z-index: 9999999999;
    background: #fff;
    box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,.08);
}

Datum/Uhrzeit-Datumsauswahl: Aktuelles Datum im Kalender

.flatpickr-day.today {
    border-color: #959ea9;
}

Datum/Uhrzeit-Datumsauswahl: Tage des vergangenen und nächsten Monats im Kalender

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(57,57,57,.3);
    background: transparent;
    border-color: transparent;
    cursor: default;
}

Datum/Uhrzeit: Zeitauswahl

Zeit-Auswahl

.ui-timepicker-wrapper {
    overflow-y: auto;
    height: 142px;
    width: 6.5em;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    outline: none;
    z-index: 10001;
    margin: 0;
}

Datei-Upload

Datei-Upload-Feld

Datei-Upload-Abstand

.wpforms-form .wpforms-field.wpforms-field-file-upload {
    padding: 10px 0;
    clear: both;
}

Dateiupload-Beschriftung

.wpforms-form .wpforms-field.wpforms-field-file-upload .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Website/URL

Website-URL-Feld

Website/URL-Abstand

.wpforms-form .wpforms-field.wpforms-field-url {
    padding: 10px 0;
    clear: both;
}

Website/URL-Beschriftung

.wpforms-form .wpforms-field.wpforms-field-url .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Website/URL-Eingabefeld

.wpforms-form .wpforms-field.wpforms-field-url input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Passwort

Passwortfeld

Passwort-Abstand

.wpforms-form .wpforms-field.wpforms-field-password {
    padding: 10px 0;
    clear: both;
}

Passwort-Beschriftung

.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Passwort-Unterbeschriftungen

.wpforms-form .wpforms-field.wpforms-field-password .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Passwort-Eingabefeld

.wpforms-form .wpforms-field.wpforms-field-password input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Wiederholer

Wiederholungsfeld

Schaltflächen zum Hinzufügen und Entfernen von Blöcken

Block-Schaltflächen

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
}

Schaltfläche zum Hinzufügen von Blöcken

Schaltfläche hinzufügen

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-add {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none;
}

Schaltfläche zum Entfernen von Blöcken

Schaltfläche entfernen

.wpforms-form .wpforms-field-repeater .wpforms-field-repeater-display-blocks-buttons.wpforms-field-repeater-button-remove {
    background: none;
    border: none;
    border-radius: 4px;
    min-height: 33px;
    max-width: 33%;
    padding: 6px 12px;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
    transition: opacity 0.2s ease;
    outline: none; 
}

Schaltflächen zum Hinzufügen und Entfernen von Zeilen

.wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons {
    position: absolute;
    right: 10px;
    left: unset;
    padding: 0;
    display: none;
    gap: 8px;
}

Seitenumbruch

Nächste Schaltfläche

Nächste-Schaltfläche

.wpforms-form .wpforms-page-button.wpforms-page-next {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}

Zurück-Schaltfläche

Vorherige Schaltfläche

.wpforms-form .wpforms-page-button.wpforms-page-prev {
    background-color: #eee;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 10px 15px;
}

Abschnittstrenner

Abschnittstrennungsfeld

Abstand für Abschnittstrenner

.wpforms-form .wpforms-field.wpforms-field-divider {
    padding: 10px 0;
    clear: both;
}

Titel des Abschnittstrenners

.wpforms-form .wpforms-field.wpforms-field-divider h3 {
    font-size: 24px;
}

Beschreibung des Abschnittstrenners

.wpforms-form .wpforms-field.wpforms-field-divider .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Vorschau der Eingabe

Eintrags-Vorschau

Abstand für Eintragsvorschau

.wpforms-form .wpforms-field.wpforms-field-entry-preview {
    padding: 10px 0;
    clear: both;
}

Hinweis zur Eintragsvorschau

Hinweis zur Eintrags-Vorschau

.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-notice {
    box-sizing: border-box;
    padding: 15px;
    background: #fef8ee;
    border: 1px solid #f0b849;
    display: block;
    width: 100%;
    word-break: break-word;
}

Tabelle für Eintragsvorschau

Vorschautabelle der Einträge

.wpforms-form .wpforms-field.wpforms-field-entry-preview .wpforms-entry-preview-basic {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
}

HTML

HTML-Abstand

.wpforms-form .wpforms-field.wpforms-field-html {
    padding: 10px 0;
    clear: both;
}

Inhalt

Inhaltseingabefeld

.wpforms-form .wpforms-field.wpforms-field-content {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 20px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Bewertung

Bewertungsfeld-Sterne

Bewertungsabstand

.wpforms-form .wpforms-field.wpforms-field-rating {
    padding: 10px 0;
    clear: both;
}

Bewertungsbeschriftung

.wpforms-form .wpforms-field.wpforms-field-rating .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Abstand für Bewertungselemente

.wpforms-form .wpforms-field-rating-item {
    padding-right: 6px;
}

Benutzerdefinierte Captcha

Captcha-Feld

Abstand für benutzerdefiniertes Captcha

.wpforms-form .wpforms-field.wpforms-field-captcha {
    padding: 10px 0;
    clear: both;
}

Beschriftung für benutzerdefiniertes Captcha

.wpforms-form .wpforms-field.wpforms-field-captcha .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Rich Text

Rich-Text-Feld

Abstand für Rich-Text-Editor

.wpforms-form .wpforms-field.wpforms-field-richtext {
    padding: 10px 0;
    clear: both;
}

Beschriftung für Rich-Text-Editor

.wpforms-form .wpforms-field.wpforms-field-richtext .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Unterschrift

Signaturfeld

Abstand für Unterschrift

.wpforms-form .wpforms-field.wpforms-field-signature {
    padding: 10px 0;
    clear: both;
}

Beschriftung für Unterschrift

.wpforms-form .wpforms-field.wpforms-field-signature .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Likert-Skala

Likert-Skalen-Feld

Abstand für Likert-Skala

.wpforms-form .wpforms-field.wpforms-field-likert_scale {
    padding: 10px 0;
    clear: both;
}

Likert-Skala-Beschriftung

.wpforms-form .wpforms-field.wpforms-field-likert_scale .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Net Promoter Score

Net Promoter Score-Feld

Net Promoter Score Auffüllung

.wpforms-form .wpforms-field.wpforms-field-net_promoter_score {
    padding: 10px 0;
    clear: both;
}

Net Promoter Score Beschriftung

.wpforms-form .wpforms-field.wpforms-field-net_promoter_score .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Net Promoter Score Tabelle

.wpforms-form .wpforms-field.wpforms-field-net_promoter_score table {
    width: 100%;
    line-height: 1.4;
    border-collapse: initial;
}

Das ist alles! Jetzt wissen Sie, wie Sie diese Selektoren verwenden, um benutzerdefiniertes CSS auf schicke Felder in Ihren Formularen anzuwenden.

Möchten Sie als Nächstes Designvorlagen anwenden, um das Gesamtdesign Ihres Formulars zu ändern? Unser Tutorial zur Verwendung von Formular-Designs behandelt alle Schritte im Detail.

KI-Zusammenfassung