1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

静的サイトの問い合わせフォーム設置が簡単すぎた話

Posted at

はじめに

静的サイトで簡単に問い合わせフォームを設置する方法がないか調べ、SSGformというサービスが思った以上に使いやすかったので備忘録も兼ねて投稿します。

SSGform

SSGformは静的サイトでも使えるフォーム機能を提供しているサービスで、2022年サービス開始と比較的新しいサービスになります。
機能的にも必要なものがしっかりまとまっており非常にいい感じです。

会員登録

会員登録画面はすごくシンプルなので迷うことはないと思います。登録時はフリープランしか選択できないようです。
スクリーンショット 2023-09-30 120017.png

管理画面

管理画面もすごくシンプルなのでまぁ迷うことはないでしょうね
スクリーンショット 2023-09-30 000909.png

フォームの追加

フォームの追加画面です。
個人的には必須項目とreCAPTCHAだけ設定すれば良いかと思います。
スクリーンショット 2023-09-30 001214.png
スクリーンショット 2023-09-30 001307.png

フォームの設置

あとはフォーム追加画面にあった送信先を設定したformを設置するだけです。

<form action="[SSGformの送信先URL]">
  <p>
    <label>お名前: <input type="text" name="name" placeholder="お名前" required/></label>
  </p>
  <p>
    <label>メールアドレス: <input type="email" name="email" placeholder="example@gmail.com" required/></label>
  </p>
  <p>
    <label>お問い合わせ内容: <textarea name="message" rows="10" required></textarea></label>
  </p>
  <p>
    <button type="submit">お問い合わせ送信</button>
  </p>
</form>

フォームから送信してみる

localhostで実際にフォームを設定して送信したところ問題無く動作しました。
通知先メールアドレスに以下のようなメールが送られるので、以降はメールでやり取りを進めるという流れになるかなと思います。
スクリーンショット 2023-09-30 122755.png

まとめ

ということで静的サイトに簡単にフォームを設置できるSSGformの紹介でした。
フリープランであれば月に100件までという制限はありますが、小規模なサイトであれば十分でしょう。
静的サイトでランニング費用を抑えたいが、問い合わせフォームはどうしても必要という場合非常に魅力的な選択肢となっていくかと思います。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?