蘇我Webスタジオ

Appearance

Formspreeでお問い合わせフォームを作成する ​

2026/03/29に公開

FormspreeVue.jsVitePress

お問い合わせフォームはサイト運営者がユーザーとつながるための重要な接点です。 記事への質問、誤りの指摘、仕事の相談など、読者が気軽に連絡できる窓口があるとサイトの信頼性は大きく上がります。

ただし、お問い合わせフォームを自前で構築するのは簡単ではありません。 送信処理、バリデーション、スパム対策、メール送信、サーバー側の保守まで考える必要があります。

そこで今回は Formspree を使って静的サイト向けのお問い合わせフォームを作成する手順を紹介します。

Formspreeとは ​

Formspreeはフォームの送信先を簡単に用意できるサービスです。 HTMLのフォームから指定されたエンドポイントに送信するだけで問い合わせ受付を実現できます。

Formspreeを使うと、次のような構成にできます。

  • フロントエンドは静的サイトのまま運用する
  • フォーム送信だけFormspreeに任せる
  • 受信通知やスパム対策をサービス側で吸収する

Formspreeは様々なプランがあります。 無料プランでは月50件送信という上限があります。

実装の流れ ​

今回はVitePressで構築したサイトにお問い合わせページを追加する流れで説明します。

1. Formspreeでフォームを作成する ​

まずFormspreeにログインして、問い合わせを受け付けるフォームを作成します。

Formspreeダッシュボード

フォームを作成すると送信先として使うURLが発行されます。 形式は以下の通りです。

text
https://formspree.io/f/xxxxxxxx

2. フォームページを作る ​

VitePressでは、VueコンポーネントをそのままMarkdown内で利用できます。 今回はフォーム部分を ContactForm.vue として切り出しました。

実装のポイントは次の通りです。

  • form を fetch で POST する
  • Accept: application/json を付けてFormspreeのレスポンスを扱いやすくする
  • 成功時はフォームをリセットする
  • 失敗時はページ内にエラーメッセージを出す
vue
<script setup lang="ts">
import { ref } from 'vue'

const formspreeEndpoint = 'https://formspree.io/f/xxx'
const form = ref<HTMLFormElement | null>(null)

async function handleSubmit() {
  if (!form.value) return

  const formData = new FormData(form.value)
  await fetch(formspreeEndpoint, {
    method: 'POST',
    headers: {
      Accept: 'application/json'
    },
    body: formData
  })
}
</script>

3. 入力しやすい見た目に整える ​

フォームは動けばよいわけではなく入力しやすいことも重要です。 ラベルを明確にし入力欄の余白やフォーカス状態を整えると送信前の離脱を減らしやすくなります。

今回の実装では、次の点を意識しました。

  • 入力欄を十分な高さにする
  • フォーカス時にボーダー色を変える
  • 送信ボタンを横長にして押せることが伝わるようにする
  • 1Passwordなどの自動入力を避けたい項目には data-1p-ignore を付ける

4. 送信後の完了表示を用意する ​

送信が成功したかどうかは、ユーザーにその場で分かるようにしておくべきです。 成功メッセージと失敗メッセージを表示すると、安心して使ってもらえます。

今回のフォームでは送信後に次のような表示を出しています。

  • 成功時: 「送信しました。内容を確認のうえ、返信します。」
  • 失敗時: 再送を促すメッセージ

静的サイトでFormspreeを使う利点 ​

Formspreeを使うと、静的サイトでも問い合わせ窓口を比較的簡単に持てます。

  • サーバー実装を新規で作らなくてよい
  • メール送信まわりの面倒を減らせる
  • フロントエンドの変更だけで改善しやすい
  • サイトの保守コストを抑えやすい

個人ブログや技術メディアのように、まずは軽く問い合わせ窓口を作りたいケースに向いています。

まとめ ​

お問い合わせフォームは、ユーザーとのコンタクトを取るうえで重要な要素です。 しかし自前で作るのは意外と手間がかかり、特に静的サイトではバックエンドを別途用意する必要が出てきます。

Formspreeを使えば、静的サイトでもフォーム送信の仕組みを簡単に追加できます。 今回のように、問い合わせや記事の誤り指摘を受け付ける窓口を作っておくと、サイトの信頼性や運営のしやすさが上がります。

参考文献 ​

Last updated: