設置例(xalpha.jp)

xalpha.jp

Background
導入背景

会社サイトとしてWordpressをベースに構築されています。もともとはWordpressのプラグインを用いて問い合わせフォームを実現していましたが、reCAPTCHA導入の際に動作不良があったことや、プラグイン経由の脆弱性混入のリスクを低減するため外部フォームサービスの導入を決定しました。

海外発のフォームサービスを一度導入しましたが、必要な機能と費用のミスマッチで断念。SSGformを導入することで、最小限の修正での移行を実現しています。

Form HTML
フォーム設置コード

xalpha.jpのサイト側で、どのようなHTMLやJavascriptを記述しているかの情報です。reCAPTCHA(v2)を使用しているため、専用のJavascriptの読み込みと、必要なclass要素の挿入を行っています。サイト全体でBootstrap3が使用されているため、その装飾のためのclass名指定が行われています。

株式会社ザルファ - お問い合わせ

<p>当社へのお問い合わせは、以下のフォームからお願いいたします。<br />必要事項を入力の上、[送信する]をクリックして下さい。</p>
<p>お問い合わせ内容が確認出来次第、担当者よりご返答差し上げますので、お問い合わせ送信後はそのまましばらくお待ち下さいませ。</p>
<p>サービス案内や協業のご提案等、いわゆる営業の問い合わせをいただくことがありますが、すべてお断りしておりますので送信をお控えいただけますと幸いです。</p>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form action="https://ssgform.com/s/jy2QusFkyIKX" method="post">
<div style="display: none;"><input type="text" name="wana"></div>
<div class="row">
  <div class="col-xs-12 col-md-4">会社名</div>
  <div class="col-xs-12 col-md-8">
    <input type="text" class="form-control" name="company">
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-md-4">
    お名前<span class="must-text">(必須)</span>
  </div>
  <div class="col-xs-12 col-md-8">
    <input type="text" class="form-control" name="name" required>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-md-4">
    メールアドレス<span class="must-text">(必須)</span>
  </div>
  <div class="col-xs-12 col-md-8">
    <input type="text" class="form-control" name="email" required>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-md-4">
    お問い合わせの種類<span class="must-text">(必須)</span>
  </div>
  <div class="col-xs-12 col-md-8">
    <select name="subject" class="form-control" required>
      <option value="相談したい">相談したい</option>
      <option value="提案・見積もりが欲しい">提案・見積もりが欲しい</option>
      <option value="取材・寄稿依頼">取材・寄稿依頼</option>
      <option value="その他">その他</option>
    </select>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-md-4">
    メッセージ本文<span class="must-text">(必須)</span>
  </div>
  <div class="col-xs-12 col-md-8">
    <textarea class="form-control" rows="15" name="body" required></textarea>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12 col-md-4"></div>
  <div class="col-xs-12 col-md-8">
    <div class="g-recaptcha" data-sitekey="6Lc4vEohAAAAAP5VK5TX1vrzrGSnd_odXLrL_D4T"></div>
  </div>
</div>
<hr>
<div class="row" style="margin-bottom: 50px;">
  <div class="col-xs-12 col-md-6 col-md-offset-3">
    <p class="text-center">
    <button type="submit" class="btn btn-default btn-simple btn-lg btn-block">送信する</button>
    </p>
  </div>
</div>
</form>

Form setting
フォーム設定

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

xalpha.jp(contact)
メールアドレスのため非公開
メールアドレスのため非公開
xalpha.jpお問い合わせ
以下の内容が送信されました
以上です。
設定無し
ON
設定無し
CLICK HERE
全角文字を含むかどうかのチェックは行わない
設定無し
ON
秘密情報のため非表示
設定無し
設定無し
OFF
SSGformロゴ