メール入力欄の背景色を変更する方法

フォームのデザインは、ストアのプロフェッショナルな印象や信頼性を左右する重要な役割を果たします。

メールアドレス入力欄の背景色を更新するなどの簡単な変更でも、以下のような効果が期待できます。

• ブランドアイデンティティを一致させる
• 可読性の向上
• 視覚的な階層構造をより良くする
• お問い合わせフォームをよりモダンで洗練されたデザインにしましょう

あなたが始める前に

以下のものが既に揃っていることを確認してください。

• GemPagesで作成されたページ
• An メールフィールド要素 フォームに追加されました
• GemPagesエディターへのアクセス

高度なプログラミング知識は必要ありません。

ステップ1：メールフィールド要素を選択します

GemPagesエディターでページを開きます。カスタマイズしたいメールフィールド要素をクリックします。これにより、カスタムスタイルが選択したフィールドにのみ適用されるようになります。

ステップ2：カスタムコードパネルを開く

選択したメールフィールド要素を右クリックします。次に、以下を選択します。 カスタムコード。 カスタムコードパネルが表示されます。

ステップ3：CSSコードを追加する

以下のコードをカスタムコードエディタに貼り付けてください。

ElementClass input {

  背景色: xxxxx !important;

}

注意事項

1. ElementClassを置き換える必要があります メールアドレス入力欄要素の実際のクラス名を指定します。

このクラス名は、カスタムコードパネルの左上隅に表示されています。

例：

.gf-input-123 入力 {

  background-color: #f5f5f5 !important;

}

2. xxxxx を使いたい色に置き換えてください。

例：

背景色: #000000 !重要;

or

background-color: #f5f5f5 !important;

カラーコードの見つけ方：

カラーコードをお持ちでない場合は、 次のような無料ツールを使用できます。

• Google カラーピッカー
• HTMLカラーピッカー
• クーラー
• Adobeカラー

これらのツールを使えば、色を視覚的に選択し、HEXコードを瞬時にコピーできます。

例：16進数コード

• ＃FFFFFF → 白
• #000000 → 黒
• #f3f3f3 → ライトグレー
• #1a73e8 → 青

結果：