【SSGform】問い合わせフォーム、君に任せた！

有り難いことに、本サイトにもアクセスしてくださる方の数が少しづつ増えてきました。

せっかくなので記事の内容などに対するお問い合わせフォームを設置したいなと思い

お手軽に、本サイト作成で利用している開発フレームワークAstroと相性の良いサービスないかなぁと探していたところ

本サイトのような静的コンテンツの多いサイトにもってこいなものを見つけました。

Webアプリ運用でお問い合わせフォームをお手軽に実装したいなぁ、といった方の参考になれば幸いです。

ぎょうざが希望する要件

【Must】

利用料が無料
問い合わせ元へカスタムメッセージで自動応答可能
問い合わせ通知
利用している開発フレームワーク（Astro）に組み込み、CSSデザインが調整可能
広告表示なし

【Want】

reCAPTCHA
NGワード設定可能
スパム対策可能
問い合わせ元、問い合わせ履歴が追跡可能

上記のMust要件を全て満たしつつ、Want要件も頑張ればクリアできそうなやつで、

色々と悩んで今回はSSGformを選択しました。

参考までに本記事の末尾に、他に検討していたサービスもまとめておきました。

SSGformとはなんぞや？

お問い合わせやアンケートなどのフォームを簡単に設置できるWebサービスです。

SSGformに登録すると、専用のフォームURLが発行されます（例：https://ssgform.com/s/~~~example~~）。

こちらのサービスの面白く良いところは<form>タグの actionに、このURLを指定して

formデータをPOSTしてあげるだけで、問い合わせフォームが自作のWebアプリに実装できます。

また、サービス上では問い合わせ内容が分からないようになっているところもプライバシーの観点でグッドです。

（※設定した通知メールには、問い合わせ内容が記載されように設定できます。）

ちなみに、SSGform運営側にも問い合わせ内容が分からないようになっているようです。

サンプルコード

<form action="https://ssgform.com/s/~~~example~~" method="post">
  <div>      
    <label>お名前</label>
    <input type="text" name="お名前" placeholder="例）山田 太郎" required="required" />
  </div>

  <div>
    <label>メールアドレス</label>
    <input type="email" name="メールアドレス" placeholder="例）[email protected]" required="required" />
  </div>

  <div>
    <label>お問い合わせ内容</label>
    <textarea name="お問い合わせ内容" placeholder="例）お問い合わせ内容を入力してください。"  rows="8" required="required" />
  </div>

  <div>
    <label>
        <input type='checkbox' id='check' required>チェックを入力してから送信ボタンを押してください。
    </label>
  </div>

  <button type="submit">送信する</button>
</form>

組み込みたいHTMLに、上記のサンプルコードを書き込んでみてください。
<from action=””>のssgform.com/s/以下は、SSGformで作成した問い合わせフォームURLに適宜書きかえてください。

📩

【問い合わせがあったときの通知メール例】

以下の内容が送信されました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

お名前：テスト送信者

メールアドレス：[email protected]

お問い合わせ内容：テスト送信です。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上です。

利用登録時につまづいたところ

Google認証が必要で、認証メールがGmailの迷惑フォルダに振り分けられてました。
デフォルトの状態ですと、システムから発信されるメールは全て迷惑メール扱いになってしまう場合があるようです。

他に検討していた問い合わせフォーム作成サービス

すべて無料で利用できます。

ツール名	ステータス管理機能	問い合わせ可能数	CSVのDL	セキュリティ	自動応答メッセージカスタマイズ	連携ツール
EasyMail（おすすめ）	◎あり	無制限	◎可能	◯SSL	◯	◯便利
Tayori（タヨリ）（おすすめ）	◎あり	無制限	◎可能	◯SSL	◯	◯便利
formrun（フォームラン）	◎あり	30件/月	◎可能	◎ISO取得	◯	◎豊富
Formmailer（フォームメーラー）	○有料のみ	50件/時	◎可能	◯SSL	◯	△最低限