So passen Sie das Kreditkartenfeld von Authorize.net an

Übersicht

Möchten Sie das Feld Authorize.net anpassen? Sie können das Aussehen dieses Feldes ganz einfach ändern. Wir werden zum Beispiel das Feld für Kreditkarten so gestalten, dass es in einer einzigen Zeile angezeigt wird. Dazu benötigen wir ein wenig CSS, damit jedes Feld inline angezeigt wird.

Einrichtung

Sie müssen zuerst ein Formular erstellen und das Feld Authorize.net zu Ihrem Formular hinzufügen.

Wenn Sie Hilfe beim Erstellen eines Authorize.net-Formulars benötigen, lesen Sie bitte diese Dokumentation.

Die Felder Kartennummer, Ablaufdatum und Sicherheitscode haben eine Standardformatierung, bei der die Kartennummer in einer Zeile und die restlichen Felder in der nächsten Zeile angezeigt werden.

Hinzufügen des CSS zur Anpassung des Authorize.net-Feldes

Nun ist es an der Zeit, das CSS hinzuzufügen, damit wir alle drei Felder in einer Zeile anzeigen können.

Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

.wpforms-field-authorize_net .wpforms-field-row {
    float: left !important;
    width: 45% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 3%;
}

.wpforms-field-authorize_net-expiration {
    width: 50% !important;
    float: left !important;
    max-width: 50% !important;
}

.wpforms-field-authorize_net-expiration div {
    max-width: 40% !important;
    float: left !important;
    width: 40% !important;
}

.wpforms-field-authorize_net-expiration span {
    float: left !important;
    display: inline-block;
    width: 8% !important;
    max-width: 8% !important;
    margin: 0 5% 0 5% !important;
}

.wpforms-field-authorize_net-code {
    float: right !important;
    max-width: 45% !important;
}

Mit diesem CSS haben wir nun das Feld Authorize.net so angepasst, dass alle Felder in einer einzigen Zeile angezeigt werden.

Und das ist alles, was Sie benötigen, um das Formularfeld Authorize.net anzupassen. Möchten Sie auch die Adresse mit der Authorize.net-Zahlung senden? Sehen Sie sich unser Tutorial So senden Sie eine Adresse über Authorize.net-Zahlungen an.

FAQ

F: Wie kann ich dies auf mobilen Geräten wieder auf einzelne Zeilen zurücksetzen?

A: Für kleinere Bildschirme möchten Sie, dass alle Ihre Felder in Zeilen gestapelt sind. Um das in diesem Artikel erwähnte CSS zu konterkarieren, möchten Sie für mobile Geräte möglicherweise auch dieses CSS hinzufügen.

@media (max-width: 600px) {
.wpforms-field-authorize_net .wpforms-field-row {
    float: none !important;
    width: 100% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 0;
}
}