### [Stripe クレジットカードプレースホルダーのスタイルを変更する方法](https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/)
**公開日:** 2021年4月13日
**著者:** エディトリアルチーム
**抜粋:** このチュートリアルでは、PHPとCSSを使用してStripeクレジットカードフィールドとプレースホルダーテキストのスタイルを変更する方法を説明します。
**コンテンツ:**
## はじめに
WPFormsで**Stripeクレジットカード**フォームフィールドのプレースホルダーテキストのスタイルを変更したいですか？簡単なPHPスニペットとカスタムCSSを使用すると、プレースホルダーテキストのスタイルを簡単に変更できます。このチュートリアルでは、各ステップを順を追って説明します。
デフォルトでは、クレジットカードを入力するフィールドには、いくつかのデフォルトのスタイルが適用されています。
このスニペットは、WPFormsの設定の**支払い**タブにある**クレジットカードフィールドモード**で**カード要素**が選択されている場合にのみ、**Stripeクレジットカード**フォームフィールドに適用されることに注意してください。
このオプションの詳細については、[こちらの役立つガイド](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#Selecting_a_Credit_Card_Field_Mode "Stripe Pro Addon")をご覧ください。
## フォームの作成
まず、新しいフォームを作成し、フォームに**Stripeクレジットカード**フィールドを追加します。
このタイプのフォームの作成にヘルプが必要な場合は、[こちらのドキュメント](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "How to Install and Use the Stripe Addon With WPForms")をご覧ください。
フィールドをフォームに追加したら、フィールドを選択して**フィールドオプション**をクリックし、**高度な設定**タブをクリックして、**カード名プレースホルダーテキスト**に**プレースホルダー**テキストを入力します。
## スニペットの追加
フォントサイズ、色、フォントファミリーなどのプレースホルダーテキストのスタイルを変更するには、サイトに少量のPHPを追加するだけです。
サイトへのスニペットの追加にヘルプが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms")をご覧ください。
```
/*
* Stripeクレジットカードフォームフィールドのプレースホルダーテキストスタイルを更新します
*
* @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
*/
function wpf_dev_stripe_card_field_style( $element_style ) {
$element_style = [
'base' => [
'iconColor' => '#b95d52',
'fontFamily' => 'Roboto, sans-serif',
'fontSize' => '16px',
'fontWeight' => '100',
'backgroundColor' => '#f6f6f6',
'::placeholder' => [
'color' => '#b95d52',
'font-family' => 'Roboto, sans-serif',
'font-size' => '16px',
'font-weight' => '100',
]
],
];
return $element_style;
}
add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );
```
すべてのオブジェクトプロパティの完全なリストについては、[こちらのドキュメント](https://stripe.com/docs/js/appendix/style "Stripe JS Styling Object Properties")をご覧ください。
これで、**Stripeクレジットカード**フィールドのスタイルが変更されたことがわかります。
## プレースホルダーテキストのスタイル設定
上記の Сниппет は **カード番号** フィールドのみをスタイル設定します。プレースホルダーテキストを一致するようにスタイル設定したい場合は、CSSを追加する必要があります。
サイトへのCSSの追加にヘルプが必要な場合は、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms")をご覧ください。
```
input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
```
これで完了です！Stripeにメタデータを送信したいですか？[Stripe支払いへのメタデータ送信方法](https://wpforms.com/developers/how-to-send-metadata-to-stripe-payments/ "How To Send Metadata to Stripe Payments")に関する記事をご覧ください。
**カテゴリー:** チュートリアル
**タグ:** CSS, PHP
---