Authorize.netプレースホルダーをカスタマイズする方法

はじめに

クレジットカード番号フィールドに表示されるAuthorize.netのプレースホルダーをカスタマイズしますか？ CSSを使用すると、番号フィールドだけでなく、セキュリティコードフィールドも簡単にスタイル設定できます。このチュートリアルでは、これらの2つのフィールドをスタイル設定するために必要なCSSを紹介します。

デフォルトでは、クレジットカードを入力するフィールドには、いくつかのデフォルトのスタイルが適用されています。

フォームの作成

まず、簡単な寄付フォームを作成し、Authorize.netクレジットカードフィールドを追加します。このタイプのフォームの作成方法についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

Authorize.netフォームフィールドを追加したら、フィールドオプションに移動し、詳細設定タブをクリックします。そこから、プレースホルダーテキストを追加できます。

CSSの追加

次に、サイトにCSSを追加します。

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

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

CSSクラス名input.wpforms-field-authorize_net-cardnumberはカード番号フィールドのみをスタイル設定し、input.wpforms-field-authorize_net-cardcvcクラス名はセキュリティコードフィールドのみをスタイル設定します。

これで、Authorize.netのプレースホルダーフィールドをカスタマイズするために必要なすべてが揃いました。請求書番号も送信しますか？ Authorize.net支払いを通じて請求書番号を送信する方法に関するこの記事をご覧ください。