フォームのデザインを設定する
フォームの各項目を決めたら、次はデザインを設定してみましょう。
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カラムレイアウトに変更されます。