コード例

ユースケースごとのコード例を以下に記載しています。action先やreCAPTCHA用のtoken、classやnameは設置環境にあわせて修正してください。なお、SSGformのお問い合わせフォームもSSGformの仕組みを使用しています。簡易スパム対策、reCAPTCHA付きのサンプルとしてご参照ください。

シンプルなフォーム

<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post">
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <!-- select: 選択肢 -->
  <select name="お問い合わせ種別" required="required">
    <option value="サービスへの質問">サービスへの質問</option>
    <option value="資料請求">資料請求</option>
    <option value="申し込み">申し込み</option>
    <option value="その他">その他</option>
  </select>
  <!-- textarea: 複数行 -->
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <!-- radio: 選択式 -->
  <input type="radio" name="資料" value="希望" id="document-true">
  <label for="document-true">資料希望</label>
  <input type="radio" name="資料" value="不要" id="document-false">
  <label for="document-false">資料不要</label>
  <!-- checkbox: 複数選択（name属性に[]をつけることで複数の値を配列として送信可能） -->
  <input type="checkbox" name="希望資料[]" value="サービスA" id="service-a">
  <label for="service-a">サービスA</label>
  <input type="checkbox" name="希望資料[]" value="サービスB" id="service-b">
  <label for="service-b">サービスB</label>
  <input type="checkbox" name="希望資料[]" value="サービスC" id="service-c">
  <label for="service-c">サービスC</label>
  <!-- checkbox: 同意チェック -->
  <input type="checkbox" name="個人情報保護方針" value="同意する" id="agreement">
  <label for="agreement">個人情報保護方針に同意する</label>
  <!-- submit: 送信ボタン -->
  <button type="submit">送信する</button>
</form>

簡易スパム対策付きフォーム

<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post">
  <div style="display: none;"><input type="text" name="wana" /></div><!-- name="wana"を見えない状態で設置 -->
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <button type="submit">送信する</button>
</form>

添付ファイル付きフォーム

<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post" enctype="multipart/form-data"><!-- enctypeの指定が必要 -->
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <input type="file" name="参考資料" /><!-- type="file"のフィールドを追加 -->
  <button type="submit">送信する</button>
</form>

reCAPTCHA(v2)付きフォーム

<script src="https://www.google.com/recaptcha/api.js" async defer></script><!-- 専用スクリプトの読み込み必要 -->
<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post">
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <div class="g-recaptcha" data-sitekey="reCAPTCHA(v2)用サイトキーがここに"></div><!-- 専用タグの設置必要 -->
  <button type="submit">送信する</button>
</form>

reCAPTCHA(v3)付きフォーム

<script src="https://www.google.com/recaptcha/api.js"></script><!-- 専用スクリプトの読み込み必要 -->
<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post" id="sample-form">
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <button class="g-recaptcha"
          data-sitekey="reCAPTCHA(v3)用サイトキーがここに"
          data-callback="onSubmit"
          data-action="submit">送信する</button><!-- 専用classとdata-属性を設定 -->
</form>
<!-- 同一ページまたは読み込める場所にJavascript定義 -->
<script>
  function onSubmit(token) {
    var form = document.getElementById('sample-form');
    if(form.reportValidity()) {
      form.submit();
    }
  }
</script>

Ajax送信フォーム

<form>
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <button type="button" onclick="submitForm();">送信する</button>
</form>
<!-- 同一ページまたは読み込める場所にJavascript定義 -->
<script>
function submitForm(){
  const xhr = xmlHttpRequest = new XMLHttpRequest();
  const fd = new FormData();
  fd.append('お名前', document.querySelector('input[name=お名前]').value);
  fd.append('メールアドレス', document.querySelector('input[name=メールアドレス]').value);
  fd.append('お問い合わせ内容', document.querySelector('textarea[name=お問い合わせ内容]').value);
  xhr.open('POST', 'https://ssgform.com/s/AbcDeFgHiJkL', true);
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); /* Ajax通信識別のため必要 */
  xhr.send(fd);
  xhr.addEventListener('readystatechange', () => {
    if( xhr.readyState === 4 && xhr.status === 200) {
      /* 必要に応じてサンキューページへ転送する処理 */
    }
  });
}
</script>

確認画面付きフォーム

サンプルコードは環境依存が強く、また複雑になるため記載を控えます。
フォーム内容を保ったままの画面遷移が可能な環境であれば、別途確認表示用の画面を一枚挟んでからフォーム送信してください。そういった画面遷移が難しい場合は、Javascriptを用いて、フォームの入力内容をモーダル表示したうえで、送信する操作を行ってもらうなどの方法が考えられます。

Get Started
まずはフリープランでスタート

フリープランでも機能制限は無し。フォームURL数無制限、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。

今すぐ登録してみる