PR

FormSubmit活用！WordPressにお問い合わせフォームを設置してメッセージをメールで受け取る最も簡単な方法

ブログ運用
2025.06.27

WordPressでブログを真面目に運営するために、「プライバシーポリシー」や「お問い合わせ」といった固定ページの設置が必要になります。

特に「お問い合わせ」ページは、訪問者からのメッセージを受け取るための重要な窓口となるため、必ず設置しておきたいページです。

「お問い合わせのメッセージを受け取って、それがメールで届けば十分」というシンプルな機能を求めるなら、最適な解決策は何でしょうか？

スポンサーリンク

FormSubmitを使って、お問い合わせフォームのメッセージをメールで受け取る最も簡単な方法

一般的な方法として、多機能なプラグイン（例：Contact Form 7など）を使うことが挙げられます。

しかし、たった1ページのお問い合わせフォームのためだけに、詳細な設定が可能な高機能プラグインをインストールするのは、正直なところ少し抵抗があります。

そこで、私はしばらくWordPressのデフォルトコメント機能で代用していました。

これはすぐに設定できるため手軽ではありますが、コメントへの返信をメールにコピペして送る作業には、やや手間がかかりました。

Googleフォームに慣れている方であれば、これを使った方法も簡単に利用できます。

Googleフォームで取得したHTMLコードを、「カスタムHTML」ブロックに貼り付けるだけで、記事内にフォームを表示できます。⇓

入力されたコメントは、フォームの回答画面から参照するか、リンクされたスプレッドシートで確認できますが、返信をメールで送るにはやや不便です。もしフォームからのコメントをメールで受け取りたい場合は、GAS（Google Apps Script）を使う必要があります。

今回はそれらよりもさらに手軽に実装できるサービス、FormSubmitをご紹介します。

FormSubmitとは？ バックエンド不要でメール送信を可能にするサービス

FormSubmit（https://formsubmit.co）は、サーバー側のプログラム（PHPなど）やデータベースを一切必要とせず、記事（HTML）のフォームから直接メールを送信できる無料サービスです。

WordPressの「カスタムHTML」ブロックに数行のコードを貼り付けるだけで、お問い合わせフォームが完成します。

FormSubmitの基本情報まとめ

項 目内 容
サービス名FormSubmit（フォームサブミット）
URLhttps://formsubmit.co
利用料金無料（Proプランあり）
会員登録👍🏼不要
日本語対応非対応（サイトは英語）
難しさサンプルコードを記事にコピペするだけでOK

驚くほど簡単！FormSubmitの基本的な使い方

使い方は非常にシンプルです。HTMLの<form>タグのaction属性に、メッセージを受信したいメールアドレスを指定するだけです。

次のHTMLコードをコピペして、メールアドレスを設定するだけで使えます。
（your@email.comを、受信したいメールアドレスに変更してください。）

<form action="https://formsubmit.co/your@email.com" method="POST">
     <label for="name">名前:</label>
     <input type="text" name="name" required>
     <label for="email">メール:</label>
     <input type="email" name="email" required>
     <label for="comment">コメント:</label>
     <textarea name="message" rows="4" required></textarea>
     <button type="submit">送信</button>
</form>

このコードを、WordPressの記事や固定ページ内で「カスタムHTML」ブロックを使って設置すると、

以下のようなお問い合わせフォームが実装されます。

入力フィールドにrequired属性が設定されていると、その項目への入力が必須になります。
逆にrequiredを外すことで、そのフィールドは空欄のまま送信できるようになります。
例えば、<input type="text" name="name">ようにrequiredを付けない場合、名前は未入力でも送信可能です。

【初回送信時の注意点】 このフォームから初めてメッセージを送信するとactionに指定したメールアドレス宛にFormSubmitから確認メールが届きます。
そのメール内の「Verify」ボタンをクリックして認証すれば、以降、そのフォームからの送信内容が自動であなたのメールアドレスに届くようになります。

フォームをさらに便利に！隠し（hidden）オプションの活用

フォームの送信内容や動作をカスタマイズしたい場合は、特定の情報を埋め込むための「隠しオプション」（<input type="hidden">）が便利です。
例えば、メールの件名を指定したり、送信後の遷移先（リダイレクト）ページを設定したりといった機能を、コードに追加するだけで簡単に実現できます。

よく使う隠しオプションとその機能

<input type="hidden" name="_subject" value="お問い合わせが届きました">
<input type="hidden" name="_template" value="box">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://yourdomain.com/thanks.html">
  • name="_subject"：送信されるメールの件名を設定できます。
  • name="_template"：メールのテンプレートデザインを指定できます。value="box"とすると、メールでメッセージがボックス内に表示されます。他に、value="basic"、value="table"があります。
  • name="_captcha"：スパム対策のCAPTCHA（人間確認）の表示有無を設定します。デフォルトではvalue="true"となっており、CAPTCHAが表示される設定になっています。value="false"を指定すると、CAPTCHAの表示を無効にすることができます。
  • name="_next"：フォーム送信後にリダイレクトさせるURLを指定できます。予め作成しておいたサンクスページ（例：https://yourdomain.com/thanks.html）を設定すると、オリジナル性が向上します。

安全性とセキュリティへの対策

無料サービスながら、FormSubmitはセキュリティにも配慮されています。

  • HTTPS：フォーム送信はすべてHTTPSで暗号化されています。
  • スパム対策：_captcha=true（デフォルト設定）にすることで、簡易的なCAPTCHAを表示し、スパム送信を防ぎます。
    • _captcha=falseとしてhoneypotを設置することも推奨しています。（私もこちらをおすすめします。）
  • メール認証：初回送信時にメールアドレスの認証が必要なため、第三者によるなりすましを防ぎ、意図しないメールアドレスへの送信を防止します。

FormSubmitの活用例：お問い合わせフォーム

実際にFormSubmitを使ったサンプルコードを掲載しました。

以下は、お問い合わせページに「名前」「メールアドレス」「メッセージ」を入力できる、シンプルなフォームの例です。

このコードは、WordPressの「カスタムHTML」ブロックにそのままコピペするだけで、すぐにご利用いただけます。
your@email.comの部分は、メッセージを受け取りたいご自身のメールアドレスに置き換えてください。
また、CSSによる装飾（<style>タグを使用）も含まれているため、別途スタイルを設定する必要はありません。

<style>
  .form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: sans-serif;
  }

  .form-input, .form-textarea {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .form-button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .form-button:hover {
    background-color: #45a049;
  }

  .optional {
    font-weight: normal;
    color: #777;
    font-size: 0.9em;
  }

  @media screen and (max-width: 600px) {
    .form-wrapper {
      padding: 16px;
    }
    .form-button {
      width: 100%;
    }
  }
</style>

<div class="form-wrapper">
  <form action="https://formsubmit.co/your@email.com" method="POST">
    <!-- 名前 -->
    <label for="name">名前<span class="optional">(任意)</span>：</label>
    <input type="text" name="name" id="name" class="form-input" placeholder="お名前">

    <!-- メール -->
    <label for="email">メールアドレス：</label>
    <input type="email" name="email" id="email" class="form-input" placeholder="your@email.com" required>

    <!-- 本文 -->
    <label for="message">お問い合わせ内容：</label>
    <textarea name="message" id="message" class="form-textarea" rows="8" placeholder="メッセージを入力…" required></textarea>

    <!-- スパム対策：honeypot -->
    <input type="text" name="_honey" style="display:none">

    <!-- hiddenオプション -->
    <input type="hidden" name="_subject" value="お問い合わせが届きました">
    <input type="hidden" name="_template" value="box">
    <input type="hidden" name="_captcha" value="false">
    <!-- <input type="hidden" name="_next" value="https://yourdomain.com/thanks.html"> -->

    <!-- 送信ボタン -->
    <button type="submit" class="form-button">送信する</button>
  </form>
</div>

FormSubmitは、こんな方におすすめ

  • WordPressの固定ページに、すぐにお問い合わせフォームを設置したい方
  • お問い合わせ内容を、メールで受け取りたい方
  • サーバーやプログラミングの知識がなくても、安全にフォームを使いたい方
  • WordPress.comやロリポップ！ライトプラン、さくらのレンタルサーバーライトプランなど、PHPが使えない環境でもフォーム機能を利用したい方

FormSubmitは、特に「サーバーを持っていない」「バックエンドの知識がない」「とにかく手軽にフォーム機能が欲しい」という方に、強力なツールとなるサービスです。無料で手軽にフォームを設定できるのは非常に魅力的です。

まだ「お問い合わせ」ページを作成していない方は、ぜひ一度試してみてはいかがでしょうか。

FormSubmit | Easy to use form backend - form endpoints for your HTML forms
FormSubmit is a form backend, API and email service for HTML forms. It sends your site's form submission directly into y...
formsubmit.co

FormSubmitと似たサービスとして、Formspreeがあります。会員登録が必要ですが、より多機能で、動作も安定している印象があります。

おわりに

ブログ運営をしていて、「お問い合わせ」から実際にメッセージが届くのは、年に2〜3回程度あれば良いほうでした。

ところがどうしたことでしょう。今年に入ってからは、毎月2〜3通のお問い合わせが届くようになったのです。

これまでのコメント欄を利用した“なんちゃってお問い合わせフォーム”では、返信するたびにメールに内容をコピー＆ペーストする必要があり、正直なところ手間がかかっていました。

そこで、「フォームから送られたメッセージをメールで受け取る仕組み」をGoogle Apps Script（GAS）で作ってみることに…意外にも、思っていた以上に簡単に実装できました。

一番手間がかかるのが、フォームの見た目をCSSで整える作業ですが、この部分はAIに任せてしまえば一瞬です。希望のデザインを伝えるだけで、すぐに整ったスタイルを生成してくれました。

そのことを記事にしようかとも思いましたが、ニーズがあまりに少なそうなので断念しました。

代わりに、以前から気になっていたサーバーレスフォームサービスの「FormSubmit」を試してみました。

実際に使ってみると、想像以上に手軽です。しかも、フロントエンドのフォーム作成もAIにお願いすれば、こちらもあっという間に完成します。

この記事で掲載しているサンプルコードも、基本の構造だけ自分で用意し、見栄えの部分はAIに整えてもらいました。

もし今回のサンプルコードをカスタマイズしたい場合は、ChatGPTのようなAIにコードを見せて、「ここをこうしたい」と伝えれば、すぐに修正済みのコードを返してくれます。

しかし、AIの影響力の広がりは、本当に驚くべきスピードです。
プログラミングに関しては、これまで頭の体操としてできるだけAIの使用を避けてきましたが、さすがに最近はデバッグだけは手伝ってもらうようになりました。

CSSなどの装飾も、以前はネット上のさまざまなサイトから参考になりそうなコードをコピーしてつなぎ合わせ、何度もテストと修正を繰り返していました。手間はかかりましたが、まるでパズルを解くような楽しさもありました。

ところが今では、AIに頼めば、私が苦労して作ったものよりも遥かに洗練されたデザインを一瞬で生成してくれます。それも無料で。
こうなると、CSSのスタイル調整に時間をかけていた自分が、なんだかバカらしく思えてしまいます。

かつてエンジニアとして働いていたときも、最も時間を費やしたのはデバッグ作業でした。その記憶と照らし合わせても、現在のAIの能力には驚かされるばかりです。

いまのIT企業では、いったいどれほどの人的コストがAIによって削減されているのでしょうか？
そして、特にプログラミングの分野では、どれほど多くの人が仕事を失ってしまうのだろうか……そんな不安もよぎります。

AIによって新たな仕事が生まれる一方で、「職を奪う」という側面のほうが、現時点では圧倒的に多いのではないか。
今回、ほんの小さなプログラムでもAIの力を借りたことで、何となくそのような現実を想像してしまいました。

コメント

タイトルとURLをコピーしました