コード例

ユースケースごとのコード例を以下に記載しています。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" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <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フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。

今すぐ登録してみる