設置例(chatworker.com)

Background
導入背景

ChatworkerBOTのサービス紹介ページとして一枚もののhtmlで構成されており、本体システムとは別にNetlifyでホストされています。SSGform設置前はZapierを使用し、送信内容をメール通知する仕組みを構築していました。

フォーム自体がシンプルなご意見ボックスの位置づけのため、簡易的な入力チェックと、Ajax送信後のメッセージ表示のみが行われています。

Form HTML
フォーム設置コード

chatworker.comのサイト側で、どのようなHTMLやJavascriptを記述しているかの情報です。メッセージボックスがBootstrapのModalで作られており、jQueryを用いてAjax送信を行っています。

jQueryの$.ajaxは自動的にXMLHttpRequestであることを伝えるリクエストヘッダーが設定されるため明示的に設定していませんが、Ajax送信かどうかを判定するためにX-Requested-With: 'XMLHttpRequest'のヘッダー指定が必要になりますのでご注意ください。

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">お問い合わせフォーム</h4>
    </div>
    <div class="modal-body" id="contactFormContent">
      <p>お問い合わせやご要望の内容を入力して送信して下さい。</p>
      <div id="errorMessage"></div>
      <div class="form-group">
        <textarea class="form-control" id="contactBody" rows="5" name="body" required></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <div class="col-xs-5">
        <button type="button" class="btn btn-lg btn-default btn-block" data-dismiss="modal">閉じる</button>
      </div>
      <div class="col-xs-7">
        <button id="contactFormButton" type="button" class="btn btn-lg btn-primary btn-block">送信する</button>
      </div>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<!-- 以下送信部分のみ抽出 -->
<script type="text/javascript">
  $(function () {
    $('#contactFormButton').click(function () {
      var contactBody = $('#contactBody').val();
      if (!contactBody.length) {
        $('#errorMessage').html('<div class="alert alert-danger" role="alert">内容を入力して下さい</div>');
        return false;
      }
      $('#contactFormButton').prop('disabled', true);
      $.ajax({
        type: 'POST',
        url: 'https://ssgform.com/s/yv5YQ2aY1WtM',
        data: { body: contactBody }
      }).done(function(){
        $('#contactFormContent').html(
          '<div class="alert alert-success" role="alert">内容を送信しました。お問い合わせ、ありがとうございました。</div>'
        );
      }).fail(function(){
        alert("フォームの送信に失敗しました");
      });
    });
  });
</script>

Form setting
フォーム設定

SSGformの管理画面で、どのようなフォーム設定を行っているかの情報です。通知設定だけのシンプルな設定内容です。海外の利用者を想定していないサイトのため、NGワードとして英語スパムによく見られるフレーズを追加しています。

設置例(chatworker.com)

Background導入背景

Form HTMLフォーム設置コード

Form settingフォーム設定

Background
導入背景

Form HTML
フォーム設置コード

Form setting
フォーム設定