フォームのデザインを設定する

フォームの各項目を決めたら、次はデザインを設定してみましょう。
SmoothContactでは、以下2種類のデザイン設定モードをご用意しています。

【テンプレートモード】
あらかじめ用意されたデザインテンプレートからイメージに合うものを選択し、ボタン1つでお手軽にフォームのデザインイメージを一括で設定することができます。

【カスタムモード】
フォーム入力欄のアニメーション（表示動作）、各項目テキストのフォントや色など、
フォームのデザインイメージを細かく項目毎に設定することできます。

▼「テンプレートモード」でデザインを設定する

テンプレートを表示させる

デザインタブをクリックし［1］、〈テンプレートを使う〉にチェックを入れます［2］。
レイアウトを1カラムか2カラムか選択し[3]、サイトのイメージに合うデザインテンプレートを選択します［4］。
デザインが決定したら〈保存〉をクリックします[5]。

レイアウトのカラムは、1カラムの場合、項目タイトルの下に記入欄が表示され、2カラムの場合、項目タイトルと記入欄が横並びになります。

【1カラム】

【2カラム】

※ラベル非表示機能は廃止されました。ラベル非表示機能を使用していた場合、
2025年1月以降、2カラムレイアウトに変更されます。
また、元々ラベルがないテンプレートを使用している場合も2カラムレイアウトに変更されます。

▼「カスタムモード」でデザインを設定する

各デザイン要素を設定する

デザインタブをクリックし［1］、〈カスタムモード〉にチェックを入れます［2］。
レイアウトを1カラムか2カラムか選択し[3]、各デザイン要素を設定（※後述参照）します［4］。
デザインが決定したら〈保存〉をクリックします［5］。

※上記手順［4］で設定できる各デザイン要素は、以下の通りとなります。

■全体
フォーム全体の項目間隔、文字サイズ、文字色、分割線の色、フォントの種類を指定できます。
■チェックボックスとラジオボタン
選択肢の文字サイズや、選択前・選択後のボタンの色を指定できます。
■タイトル
タイトルの文字サイズ、文字色、フォントの種類を指定できます。
■ラベル
ラベルの文字サイズ、文字色、フォントの種類を指定できます。
■入力フォーム
入力フォームの文字サイズ、角丸、背景色、枠線の色を指定できます。
■ボタン
ボタンの文字サイズ、角丸、文字色、背景色、枠線の色、フォントの種類を指定できます。
■アニメーション
アニメーションの設定については、「フォームにアニメーションを設定する」を参照してください。

レイアウトのカラムは、1カラムの場合、項目タイトルの下に記入欄が表示され、2カラムの場合、項目タイトルと記入欄が横並びになります。

【1カラム】

【2カラム】

※ラベル非表示機能は廃止されました。ラベル非表示機能を使用していた場合、
2025年1月以降、2カラムレイアウトに変更されます。
また、元々ラベルがないテンプレートを使用している場合も2カラムレイアウトに変更されます。