Customizing the Style of Payment Fields

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 zum Stylen von Zahlungsfeldern in WPForms benötigen.

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.

Zahlungsfelder

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.

Zahlungsfelder

Einzelner Artikel

Einzelpostenfeld

Abstand für einzelne Elemente

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

Beschriftung für einzelne Elemente

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

Mehrere Artikel

Mehrere Elemente Feld

Abstand für mehrere Elemente

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

Beschriftung für mehrere Elemente

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

Kontrollkästchen-Elemente

Abstand für Kontrollkästchenelemente

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

Beschriftung für Kontrollkästchenelemente

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

Beschriftungen für Kontrollkästchenelemente

.wpforms-form .wpforms-field.wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Dropdown-Elemente-Feld

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

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

Stripe-Kreditkarte

Stripe-Kreditkartenfeld

Abstand für Stripe-Kreditkarten

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
    padding: 10px 0;
    clear: both;
}

Beschriftung für Stripe-Kreditkarten

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

Unterbeschriftungen für Stripe-Kreditkarten

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

Eingabefeld für Stripe-Kartennummer

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-stripe-credit-card-cardnumber {
    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: 8px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Eingabefeld für Name auf Stripe-Karte

.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card input[type=text] {
    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;
}

Square

Square-Feld

Abstand für Square

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

Beschriftung für Square

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

Unterbeschriftungen für Square

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

Eingabefeld für Square-Kartendetails

.wpforms-form .wpforms-field.wpforms-field-square .sq-card-component {
    position: relative;
    height: inherit;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 2px;
}

Eingabefeld für Name auf Square-Karte

.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-square-cardname {
    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;
}

Authorize.Net

Authorize.Net-Feld

Authorize.Net Abstand

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

Authorize.Net Beschriftung

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

Authorize.Net Unterbeschriftungen

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

Authorize.Net Eingabefeld für Kartennummer

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-cardnumber {
    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;
}

Authorize.Net Monat und Jahr der Karte

.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
    max-width: 100%;
    text-transform: none;
    white-space: nowrap;
}

Authorize.Net Eingabefeld für Sicherheitscode

.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-code .wpforms-field-authorize_net-cardcvc {
    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;
}

Gutschein

Gutscheinfeld

Gutschein Abstand

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

Gutschein Beschriftung

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

Gutschein Eingabefeld

.wpforms-form .wpforms-field.wpforms-field-payment-coupon 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: 120px;
    width: 100%;
    line-height: 1.3;
}

Gutschein anwenden-Schaltfläche

.wpforms-form .wpforms-field-payment-coupon-button {
    font-size: var(--wpforms-label-size-sublabel-font-size, 14px);
    font-weight: 500;
    line-height: 100%;
    background-color: var(--wpforms-label-sublabel-color, rgba(0,0,0,0.5));
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff);
    border: none;
    border-radius: var(--wpforms-button-border-radius, 3px);
    padding: 0 var(--wpforms-button-size-padding-h, 15px);
    white-space: nowrap;
    margin-left: 15px;
    height: var(--wpforms-field-size-input-height);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
    text-decoration: none
}
/* Apply button focus and hover styles */
.wpforms-form .wpforms-field-payment-coupon-button:hover,
.wpforms.form .wpforms-field-payment-coupon-button:active,
.wpforms.form .wpforms-field-payment-coupon-button:focus {
    background-color: var(--wpforms-field-text-color, rgba(0,0,0,0.7));
    border: none;
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff)
}

Gesamt

Gesamtbetragsfeld

Gesamtpolsterung

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

Gesamtbeschriftung

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

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

Möchten Sie als Nächstes noch mehr Anpassungsoptionen? Schauen Sie sich unbedingt unser Tutorial zum Anpassen der Senden-Schaltfläche an.

KI-Zusammenfassung