Anpassen des Authorize.net-Platzhalters

Einleitung

Möchten Sie den Authorize.net-Platzhalter anpassen, den Sie im Feld Kreditkartennummer sehen? Mit CSS können Sie nicht nur das Nummernfeld, sondern auch das Feld Sicherheitscode einfach gestalten. In diesem Tutorial zeigen wir Ihnen das benötigte CSS, um diese beiden Felder zu gestalten.

Standardmäßig wird das Feld, in das Sie Ihre Kreditkarte eingeben, mit einigen Standardstilen formatiert.

Erstellung des Formulars

Zuerst erstellen wir ein einfaches Spendenformular und fügen das Authorize.net-Kreditkartenfeld hinzu. Wenn Sie Hilfe beim Erstellen dieser Art von Formular benötigen, lesen Sie bitte diese Dokumentation.

Sobald Sie das Authorize.net-Formularfeld hinzugefügt haben, navigieren Sie zu den Feldoptionen und klicken Sie auf die Registerkarte Erweitert. Von dort aus können Sie Ihren Platzhaltertext hinzufügen.

Hinzufügen des CSS

Jetzt ist es an der Zeit, das CSS zu Ihrer Website hinzuzufügen.

Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, sehen Sie sich dieses Tutorial an.

input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 19+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* IE 10+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 18- */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}

Der CSS-Klassenname input.wpforms-field-authorize_net-cardnumber formatiert nur das Feld Kartennummer, während der CSS-Klassenname input.wpforms-field-authorize_net-cardcvc nur das Feld Sicherheitscode formatiert.

Und das ist alles, was Sie benötigen, um die Authorize.net-Platzhalterfelder anzupassen. Möchten Sie auch eine Rechnungsnummer senden? Sehen Sie sich diesen Artikel an: So senden Sie eine Rechnungsnummer über Authorize.net-Zahlungen.