<form id="contact-form" class="tpcms-contact" method="post" action="{{action}}">
  {{csrf}}
  {{alert}}

  <!-- スパム対策（削除しない） -->
  <div aria-hidden="true" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">
    <label>Leave this field empty
      <input type="text" name="_hp" tabindex="-1" autocomplete="off">
    </label>
  </div>

  <section class="contact-target">
  
    <h2>この物件に問い合わせをする</h2>
    <p>このブロックはtemplates/_contact.form.htmlです。使えるフォームタイプを全て揃えていますが、不要なものはブロックごと削除して下さい。<br>
    このブロックが不要なら、templates/detail.htmlの「CONTACT_FORM」を削除して下さい。</p>

    <p class="form-title">{{title}}（#{{id}}）</p>
  </section>

  <!-- 必須の識別子（削除しない） -->
  <input type="hidden" name="item_category" value="{{category}}">
  <input type="hidden" name="item_id" value="{{id}}">
  <input type="hidden" name="item_title" value="{{title}}">

  <p>
    <label>お名前（※必須）
      <input type="text" name="name" class="input" required value="{{name}}">
    </label>
  </p>
  <p>
    <label>メールアドレス（※必須）
      <input type="email" name="email" class="input" required autocomplete="email" value="{{email}}">
    </label>
  </p>
  <p>
    <label>お問い合わせ内容（※必須）
      <textarea name="message" class="input" rows="6" required>{{message}}</textarea>
    </label>
  </p>

  <!-- ここから下は、要らなければ削除OK -->

  <!-- TEL -->
  <p>
    <label>電話番号
      <input type="tel" name="extra[tel]" class="input" autocomplete="tel" value="{{extra.tel}}">
    </label>
    <input type="hidden" name="extra_label[tel]" value="電話番号">
  </p>

  <!-- テキストエリア -->
  <p>
    <label>補足事項
      <textarea name="extra[note]" class="input" rows="4">{{extra.note}}</textarea>
    </label>
    <input type="hidden" name="extra_label[note]" value="補足事項">
  </p>

  <!-- ラジオボタン（※必須） -->
  <fieldset>
    <legend>性別</legend>
    <label><input type="radio" name="extra[gender]" value="女性"> 女性</label>
    <label><input type="radio" name="extra[gender]" value="男性"> 男性</label>
    <input type="hidden" name="extra_label[gender]" value="性別">
  </fieldset>

  <!-- チェックボックス（配列で送信・いずれか必須） -->
  <fieldset>
    <legend>ご希望</legend>
    <label><input type="checkbox" name="extra[wish][]" value="資料請求"> 資料請求</label>
    <label><input type="checkbox" name="extra[wish][]" value="内見希望"> 内見希望</label>
    <label><input type="checkbox" name="extra[wish][]" value="見積希望"> 見積希望</label>
    <input type="hidden" name="extra_label[wish]" value="ご希望">
  </fieldset>

  <!-- セレクト（※必須） -->
  <p>
    <label>連絡希望手段
      <select name="extra[preferred_contact]">
        <option value="">選択してください</option>
        <option value="メール">メール</option>
        <option value="電話">電話</option>
      </select>
    </label>
    <input type="hidden" name="extra_label[preferred_contact]" value="連絡希望手段">
  </p>

  <p class="c"><button type="submit" class="btn-submit">この内容で送信する</button></p>

</form>