Authorize.netのクレジットカードフィールドをカスタマイズする方法

概要

Authorize.netフィールドをカスタマイズしますか？ このフィールドの外観を簡単に変更できます。たとえば、クレジットカードフィールドを1行に表示するようにスタイル設定します。これを行うには、各フィールドをインラインで表示するために、少量のCSSを使用する必要があります。

セットアップ

まず、フォームを作成し、フォームにAuthorize.netフィールドを追加する必要があります。

Authorize.netフォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

カード番号、有効期限、セキュリティコードフィールドにはデフォルトのスタイルがあり、カード番号は1行に、残りは次の行に表示されます。

Authorize.netフィールドをカスタマイズするためのCSSを追加する

それでは、3つのフィールドすべてを1行に表示できるようにCSSを追加しましょう。

サイトに CSS を追加する方法については、こちらのチュートリアルをご覧ください。

.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;
}

このCSSにより、Authorize.netフィールドをカスタマイズし、すべてのフィールドを1行に表示できるようになりました。

これで、Authorize.netフォームフィールドをカスタマイズするために必要なすべてが揃いました。Authorize.net支払いとともに住所も送信しますか？ Authorize.net支払いへの住所送信方法のチュートリアルをご覧ください。

よくある質問

Q: モバイルデバイスでこれを単一行に戻すにはどうすればよいですか？

A: 小さい画面の場合、すべてのフィールドを行に積み重ねたいので、この記事で説明したCSSに対抗するために、モバイルデバイスではこのCSSも追加することをお勧めします。

@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;
}
}