はじめに

こちらのページでは、フォームの見た目をCSSで変える方法について解説します。

CSSはWebページのレイアウトや色、文字の大きさなど、見た目のデザインを指定する仕組みです。

CSSを利用することで、エルメのフォームのデザインを自由にカスタマイズでき、自社のブランドカラーや雰囲気に合わせたスタイルに整えることができます。

たとえば次のような場面で役立ちます。

• 体験レッスン申込フォームのタイトルをかわいくしたい
• ボタンの色をサロンのテーマカラーに合わせたい

解説動画はこちら

CSSの利用方法

フォームのCSS設定画面を開く

エルメ管理画面にログインします。
左メニューの「メッセージ」から「フォーム作成」をクリックします。

「フォーム作成」画面から編集したいフォームを選びます。

CSS設定を利用するには、フォームをあらかじめ作成しておく必要があります。
フォーム作成に関する詳しい解説はこちらの記事ご参照ください。

① 画面上部の「共通デザイン設定」タブをクリックします。
② 左メニューの一番下にある「CSS・JS設定」を選択します。
③「コード記入」タブを開きます。

CSS設定手順

CSSクラス指定

まず、フォーム内の各項目ごとにどのスタイルを適用するかを、CSSクラスで指定します。

①「CSSクラス指定」タブをクリックします。
② 各項目にクラス名を入力します。
※ 画面上に入力されている内容はあくまで一例です。
③ 「保存」をクリックします。

コード記入

次に、「コード記入」タブをクリックしてください。

「カスタムCSS」欄にCSSコードを入力します。

入力後、画面下部の「保存」ボタンをクリックします。

フォーム　Before / After 比較

設定を反映すると、以下のようにフォームの見た目が変わります。

特定の質問項目のみデザインを変える場合

フォーム全体のデザインは「共通デザイン設定」でまとめて変更できますが、
質問ごとに異なるクラスを設定して、特定の質問項目だけ特別なデザインにすることも可能です。

① デザインを変更したい質問項目をクリックします。
② フォーム編集画面の下部にある 「CSSクラス指定」 をクリックします。
③ 質問文と補足文に、それぞれ使用したいCSSクラス名を入力します。
　例：
　- 質問文 → form-label-special
　- 質問文補足 → form-input-special

特定の質問に追加したクラスを反映させるために、先ほどの「共通デザイン設定」⇒「CSS・JS設定」から、コードを追記します。

入力したら画面下部の「保存」ボタンをクリックして設定を完了します。
これで、特定の質問項目のみ特別なデザインを適用できます。

フォーム　Before / After 比較

以上で「フォームの見た目をCSSで変える方法」の設定は完了です。