設置例(gakusys.com)

gakusys.com

Background
導入背景

サービス特化型のWEBサイトとして、HUGOを用いてサイト全体を構築しています。Gitフローでのサイト運用を目指し、デプロイ先にはCloudflare Pagesを選定。その一方で、フォーム機能を別で準備する必要が発生していました。その際の選択肢としていくつかの候補を検討した結果、SSGformを選定しています。

SSGform設置の際には、サンキューページは自前で用意することで、訪問者には一切SSGformの存在を関知させない問い合わせフローを構築することに成功しています。

Form HTML
フォーム設置コード

gakusys.comのサイト側で、どのようなHTMLやJavascriptを記述しているかの情報です。reCAPTCHA(v3)を使用しているため、専用のJavascriptの読み込みと、tokenを生成するための処理が記述されています。reCAPTCHA公式ドキュメントに記載されたJavascriptコードだとHTMLによるバリデーションが動かないため、送信前の処理としてバリデーションを呼び出すための処理が追加されています。また、サイト全体でBootstrap5が使用されているため、その装飾のためのclass名指定が行われています。

大学システム開発課 - お問い合わせ

<div class="container page-content">
<p>大学システム開発課にご興味お持ちいただき、ありがとうございます。以下の問い合わせフォームに必要事項を記入の上、送信ください。内容が確認出来次第、1〜2営業日中にご返答を差し上げておりますので、送信後はそのまましばらくお待ちくださいませ。</p>
<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="row justify-content-center">
<div class="col-12 col-sm-6">
<form action="https://ssgform.com/s/7cH72UbiJaUs" method="post" id="contact-form">
<div style="display: none;"><input type="text" name="wana"></div>
<div class="form-group">
  <label class="fw-bold">学校・団体名<span class="text-danger fw-bold">(必須)</span></label>
  <input type="text" class="form-control" name="school_name" placeholder="正式名称をご記入ください" required>
</div>
<div class="form-group mt-3">
  <label class="fw-bold">お名前<span class="text-danger fw-bold">(必須)</span></label>
  <input type="text" class="form-control" name="name" placeholder="フルネームでご記入ください" required>
</div>
<div class="form-group mt-3">
  <label class="fw-bold">メールアドレス<span class="text-danger fw-bold">(必須)</span></label>
  <input type="email" class="form-control" name="email" placeholder="半角英数でご記入ください" required>
</div>
<div class="form-group mt-3">
  <label class="fw-bold">お問い合わせ内容<span class="text-danger fw-bold">(必須)</span></label>
  <textarea class="form-control" name="body" placeholder="お問い合わせ内容をご記入ください" rows="8" required></textarea>
</div>
<div class="text-center d-grid">
  <button class="g-recaptcha btn btn-primary btn-lg mt-3" data-sitekey="6Lcn63MhAAAAAHJP52nJITFHl17Ah9qfI1Hu7EP5" data-callback='onSubmit' data-action='submit'>送信する</button>
</div>
</form>
</div>
</div>
<script>
  function onSubmit(token) {
    var form = document.getElementById('contact-form');
    if(form.reportValidity()) {
      form.submit();
    }
  }
</script>
</div>

Form setting
フォーム設定

SSGformの管理画面で、どのようなフォーム設定を行っているかの情報です。reCAPTCHA(v3)を使用しているため、そのための設定が行われています。海外の利用者を想定していないサイトのため、NGワードとして英語スパムによく見られるフレーズを追加しています。

gakusys.com(contact)
メールアドレスのため非公開
設定無し
[gakusys.comお問い合わせ]フォーム送信がありました
以下の内容が送信されました
以上です。
https://gakusys.com/guide/thank-you/
gakusys.com
www.gakusys.com
CLICK HERE
ON
秘密情報のため非表示
設定無し
設定無し
OFF