お問い合わせフォームのデザインをカスタマイズすることで、より一貫性のあるプロフェッショナルなストアフロント体験を実現できます。場合によっては、フォームフィールド内のテキストの色を変更して、ブランドイメージに合わせたり、読みやすさを向上させたりすることもできます。
この記事では、GemPagesの問い合わせフォーム要素のテキストの色を、シンプルなカスタムCSSコードを使用して変更する方法をご紹介します。
お問い合わせフォームのテキストの色を変更する方法
確認する：
- すでにページに問い合わせフォーム要素を追加しました
- GemPagesエディターにアクセスできます
- カスタマイズしたいフォームフィールドまたはテキストエリアがわかっている
ステップ1：カスタムコードパネルを開く
GemPagesエディター内部：
- カスタマイズしたいテキストフィールドまたはお問い合わせフォーム要素を右クリックします。
- 選択 カスタムコード
カスタムコードパネルが表示されます。
ステップ2：CSSコードを追加する
以下のCSSコードを「カスタムコード」フィールドに貼り付けてください。
.classID.gp-form-item{ 色: xxxxx !重要; }
覚えておいてください：
- 交換する .classID 実際の要素IDを使用して
交換する必要がある .classID お問い合わせフォームの実際の要素IDを使用してください。
このIDは、カスタムコードパネルの上部に表示されています。
- 交換する xxxxxは お好みの色で
交換する xxxxxは 使用したい色で。
以下を使用できます。
- 色の名前
- HEXカラーコード
- RGB値
例：
色名を使用する
色: 黒 !重要;
HEXカラーを使用する
色: #ffffff !重要;
RGBを使用する
color: rgb(255,255,255) !important;
ステップ3：変更を保存して公開する
コードを追加した後：
- 詳しくはこちら Save
- お問い合わせフォームをプレビューして、テキストの色が正しく変更されていることを確認してください。
コメントしてくださってありがとうございます