スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

フォーム

freoのformプラグインを使用して、フォームを作成してください。また、フォームの基本的な情報も以下の公式サイトにてご確認ください。

ディレクトリー構造

 .com ルートディレクトリー
├ css
│  ├ style.css------------------:1,280px以上
│  ├ pc.css---------------------:1,279px以下、1,025以上
│  ├ tablet.css-----------------:1,024以下、601px以上
│  ├ smart.css------------------:600px以下
│  ├ document.css---------------:PDF書き出し時のスタイルシート
│  └ validationEngine.jquery.css:問合せフォーム validation
│
├ js
│  └ plugins------------------:freoのプラグインで必要なJSを格納
│   - └ forms.js-----------------:フォームで使用するファイル
│
└ templates------------------:テンプレート
 -plugins------------------:プラグイン格納ファイル
 ---form-------------------:フォーム
 -----form-----------------:特定のテンプレートを指定する際のフォルダー
 ----- │ ├ estimate.html--------:.com/form/estimate のフォームで使用されるファイル
 ----- │ └ pamphlet.html--------:.com/form/pamphlet のフォームで使用されるファイル
 ----- ├ form.html--------------:指定ファイルがない場合のフォームで使用されるファイル
 ----- ├ preview.html-----------:送信確認画面
 ----- └ complete.html----------:送信完了画面

Name値

  • Name値は項目名を端的に表すユニークなものにしてください。
  • ユニークにできない項目は連番を付けてください。
  • 保護者の名前、お子様のお名前など、類似した名称がある場合はName値に接頭辞を付けてください。

Labelタグ

<input type="checkbox"><input type="radio">を使用する際には以下のとおり<label>で囲ってください。

checkbox

<input type="hidden" name="plugin_form[__label][interest]" value="興味をお持ちの分野">
<label><input type="checkbox" name="plugin_form[interest][]" value="HTML"><span>HTML</span></label> 
<label><input type="checkbox" name="plugin_form[interest][]" value="CSS"><span>CSS</span></label> 
<label><input type="checkbox" name="plugin_form[interest][]" value="JavaScript"><span>JavaScript</span></label>

radio

<label><input type="radio" name="plugin_form[gender]" value="男性" class="validate[required]"><span>男性</span></label>
<label><input type="radio" name="plugin_form[gender]" value="女性" class="validate[required]"><span>女性</span></label>
<input type="hidden" name="plugin_form[__label][gender]" value="性別">
<input type="hidden" name="plugin_form[__require][gender]" value="1">

送信ボタン

<p class="submit"><input type="submit" value="送信する"></p>    

フォントサイズ

フォントサイズは、16px以上になるように設定してください。16px未満の場合、iOSでフォームを入力しようとするとズームしてしまいます。フォントサイズを16px以上にすると解消できます。この場合のみ、フォントサイズはrem指定ではなく、px指定で行います。以下の動画で、iOSのフォームで拡大をしてしまう例をご覧になれます。

/* style.css B-11. form */
form dl input,
form dl select,
form dl textarea{
  font-size: 16px;
  width:100%;
}

レイアウト

tableタグを使用せず、<dl><dt><dd>を使用してください。

<dl>
  <dt>お問合せ内容<span class="required">必須</span></dt>
  <dd>
    <select name="plugin_form[subject]" class="validate[required]">
      <option value="">選択してください</option>
      <option value="xxxxについて">xxxxについて</option>
      <option value="aaaaについて">aaaaについて</option>
      <option value="その他">その他</option>
    </select>
    <input type="hidden" name="plugin_form[__label][subject]" value="お問合せ内容">
    <input type="hidden" name="plugin_form[__require][subject]" value="1">
  </dd>
</dl>