Formspreeを使ったお問い合わせフォームの作成 – Shifter

Formspreeは、フォームをサービスとして提供するプロバイダです。彼らが言うように、静的なサイトに最適であり、私たちもそう思います。通常のフォームのように、フォームの送信先へデータを転送するだけでなく、さらに多くの機能を提供します。

Formspreeとは

Formspreeは、静的ウェブサイトに簡単にフォームを追加できるサービスです。サーバーサイドのコードを書く必要がなく、HTMLフォームをFormspreeのエンドポイントに送信するだけで、フォームのデータを処理してくれます。

Formspreeを使うメリット

  • 簡単:
    サーバーサイドのコードを書く必要がないため、簡単にフォームを実装できます。
  • 静的サイトに最適:
    静的サイトジェネレーター（Shifterなど）で構築されたサイトに最適です。
  • 多機能:
    フォームの送信先へのデータ転送だけでなく、スパム対策、自動返信などの機能も提供します。

Formspreeを使ったお問い合わせフォームの作成手順

  1. Formspreeアカウントの作成:
    Formspreeのウェブサイトでアカウントを作成します。

  2. 新しいフォームの作成:
    Formspreeのダッシュボードで新しいフォームを作成します。

  3. HTMLフォームの作成:
    以下の例を参考に、HTMLフォームを作成します。

    <form action="https://formspree.io/f/{your_form_id}" method="POST">
  <label>
    Your email:
    <input type="email" name="_replyto">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>
    • {your_form_id}
      は、Formspreeで作成したフォームのIDに置き換えてください。
    • _replyto
      は、返信先メールアドレスを指定するフィールドです。
    • message
      は、メッセージ本文を入力するフィールドです。

  4. HTMLフォームをウェブサイトに埋め込む:
    作成したHTMLフォームをウェブサイトの適切な場所に埋め込みます。

  5. フォームのテスト:
    フォームを送信して、Formspreeが正しくデータを処理していることを確認します。

その他の設定

Formspreeでは、以下の設定も可能です。

  • スパム対策:
    reCAPTCHAなどのスパム対策を設定できます。
  • 自動返信:
    フォーム送信者への自動返信を設定できます。
  • リダイレクト:
    フォーム送信後にリダイレクトするURLを設定できます。

まとめ

Formspreeは、静的ウェブサイトにお問い合わせフォームを簡単に追加できる便利なサービスです。ぜひ活用してみてください。