コード例
ユースケースごとのコード例を以下に記載しています。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を用いて、フォームの入力内容をモーダル表示したうえで、送信する操作を行ってもらうなどの方法が考えられます。
フォーム内容を保ったままの画面遷移が可能な環境であれば、別途確認表示用の画面を一枚挟んでからフォーム送信してください。そういった画面遷移が難しい場合は、Javascriptを用いて、フォームの入力内容をモーダル表示したうえで、送信する操作を行ってもらうなどの方法が考えられます。
Get started
まずはフリープランでスタート
フリープランでも機能制限は無し。10有効フォームURL、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。