ブログ

MAをこれから勉強したい人からカミハヤユーザーまで、
役に立つ情報のご紹介です。

  • ホーム
  • ブログ
  • フォーム入力位置のフィールド枠線色と背景色の変更方法
カミハヤMA
2022.09.13

フォーム入力位置のフィールド枠線色と背景色の変更方法

本記事では、フォームのデータ入力位置のフィールド枠線色と背景色の変更方法について説明します。

 

目次
 
 1.はじめに
 2.データ入力位置のフィール枠線色の変更方法
 3.データ入力位置のフィール背景色の変更方法
 4.最後に 

1.はじめに

今回ご紹介するのは、フォームを入力する際、データを入力しようとしているフィールドの色を変えることで、フォーム入力者が今どの箇所のフィールド位置にいるのかを視覚的にわかるようにする方法について説明します。

2.データ入力位置のフィールド枠線色の変更方法

修正ファイルは、form.html.twigとなります。
疑似クラスを利用することにより、実現します。

【サンプルコード】


上記サンプルコードではinputタイプ、textareaタイプに応じてデータを入力しようとフォーカスされた際、枠線の色を赤色に変更するようにしています。

3.データ入力位置のフィールド背景色の変更方法

修正ファイルは、同じくform.html.twigとなります。
こちらも擬似クラスを利用することにより、実現をしますが今回のサンプルコードの例では、inputタイプ、textareaタイプに応じてデータを入力しようとフォーカスされた際、背景色を#fff8dcに変更するようにしています。

修正したファイルならびに関連するファイル一式をzip形式で圧縮し、フォームテーマとしてアップロードします。
config.jsonの内容は、今回の修正した内容を新しいフォームテーマとして分かるようにnameの変更などを忘れずに実施しておいてください。
以上で修正作業は完了しました。

4.最後に

いかがでしたでしょうか。こちらの方法でフォームテーマを新たに作成することで次回以降は、このフォームテーマを流用することにより同様のフォームを簡単に作成することができます。
フォームのバリエーションを増やされたい方は、是非一度お試しいただければと思います。

カミハヤの製品ラインナップ

複数製品を組み合わせてのご利用も可能です。詳細はお気軽にお問い合わせください。

カミハヤCMS

カミハヤCMS

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMA

カミハヤMA

直感的で使いやすい管理画面、ノーコード。技術者無しでも素早くキャンペーンを始められる、BtoB向けマーケティングオートメーションツールです。

もっと見る
カミハヤSEO

カミハヤSEO

オープンソースCMS Drupalとローコードソリューション“サイトスタジオ”の活用により、工数を抑えて、素早くサイトを立ち上げることができます。

もっと見る
カミハヤMAトライアルキャンペーン実施中! MAトライアルのお申込み
資料ダウンロード
資料ダウンロード
お問い合わせ
お問い合わせ
よくあるご質問
よくあるご質問