Formspreeを使ってお問い合わせフォームを作成する

Formspreeは、フォームをサービスとして提供するプロバイダーです。静的なサイトに最適であり、フォームの送信内容を意図された宛先に転送するだけでなく、スパム対策やフォームの送信内容の確認、複雑なルーティングなど、様々な機能を提供します。

以下に、Formspreeを使ったお問い合わせフォーム作成のステップバイステップガイドを示します。

1.
Formspreeアカウントの作成とフォームコードの取得

1.1. Formspreeアカウントの作成

  1. Shifterで新しいサイトを作成するか、既存のサイトを使用します。(例:Formspreeデモ)
  2. Formspreeのウェブサイトにアクセスし、[Get started]をクリックします。
  3. Formspreeに登録します。
  4. メールを認証します。

1.2. 新しいフォームの作成

  1. 新しいフォームを作成します。
  2. 「Form Name」と「Send emails to」フィールドを設定し、[Create
    Form]をクリックします。
  3. フォームコード(HTMLまたはAJAX)をコピーします。

2.
WordPressへのFormspreeコードの埋め込み

2.1. WordPressの起動

  1. ShifterダッシュボードからWordPressを起動します。
  2. [Dashboard]ボタンをクリックしてWordPressダッシュボードにログインします。

2.2.
カスタムHTMLブロックの追加とコードの貼り付け

  1. [Add block]をクリックし、[Custom HTML]を選択します。

  2. コピーしたコードを貼り付けて、変更を保存します。

    <!-- コピーしたFormspreeの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>

3.
アーティファクトの生成と公開、フォームの動作確認

  1. アーティファクトを生成して公開した後、フォームが動作することを確認します。
  2. 送信後、ページは以下のようになります。

4. メールアドレスの認証

  1. メールアドレスを追加したら、ページを保存し、新しいアーティファクトを生成します。
  2. これにより、新しく作成されたお問い合わせページにフォームが追加された、静的なバージョンのWordPressサイトが作成されます。
  3. フォームにテストを送信すると、Formspreeページにリダイレクトされます。
  4. 追加したメールアドレスに認証メールが送信されます。
  5. メールを確認し、アクティベーションリンクをクリックします。

5. 完了とFormspreeの機能

これで完了です!Formspreeを使用して、静的なWordPressサイトからメールを受信できるようになりました。

  • スパム対策:
    標準でスパムからの保護が含まれており、ハニーポットボットなどを利用できます。
  • 有料プラン:
    有料プランを使用すると、さらに多くの機能を利用できます。

Formspreeに関する今後の情報にご期待ください。