ユースケースごとのコード例を以下に記載しています。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>
<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>
<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>
<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>