公開日 2026/11/08

Publiiに問い合わせフォームを設置する方法｜Formspree・Netlify Forms

Publiiのサイトに問い合わせフォームを設置するには、入力欄のHTMLと、送信内容を受け付けるサービスを組み合わせます。Formspreeは公開先を問わず使え、Netlifyで公開しているサイトではNetlify Formsも選べます。

受付先を用意し、PubliiのHTMLブロックにフォームを貼り付け、公開先へ同期します。設置後は公開URLからテスト送信し、管理画面の受付記録と担当者への通知を照合してください。プレビューで入力欄が見えた段階では、受信確認は済んでいません。

公開先・受信担当者・料金から受付サービスを選ぶ

Publiiは、PCで編集した内容からHTMLなどの公開用ファイルを生成するCMSです。問い合わせを保存し、担当者へ通知するには、外部サービスや公開先の受付機能が必要です。サイトの仕組みはPubliiの基本と公開方法でも確認できます。

方式	利用条件	管理する場所
Formspree	フォームを置ける静的サイト。公開先を移しても同じ受付先を使いたい場合にも候補	Formspreeで受付記録と通知先を管理
Netlify Forms	サイトをNetlifyで配信し、フォーム検出を有効にする	NetlifyのForms画面と通知設定を管理
外部フォームへのリンク	サイト内に入力欄を作らず、外部の入力画面へ案内する	利用するフォームサービスで管理

以下ではサイト内に入力欄を置く2方式を説明します。使用する方式を一つ選び、その方式のコードを貼り付けてください。

契約前に、月間送信数、保存期間、通知先、迷惑投稿対策、管理者の人数を確認します。2026年11月8日に確認したFormspreeの料金表では、無料プランは月50件、受付記録の保存は30日です。自動返信などはプランによって利用条件が異なります。

Netlifyの料金案内では、クレジット制プランのFormsは無料・件数無制限です。旧料金体系には利用枠と従量条件があります。ホスティング全体の費用は別に確認してください。

Publiiで問い合わせページを作る

ここでは、Pages機能を使えるPublii 0.46以降のBlock Editorを前提にします。Pagesは記事一覧と分けて管理する固定ページで、お問い合わせや会社案内に使えます。

Publiiで対象サイトを開き、左メニューのPagesを選びます。
初めて作る場合は編集方式にBlock Editorを選びます。既存ページがある場合はAdd new pageの横の矢印から編集方式を選べます。
タイトルを「お問い合わせ」にし、受け付ける内容、返信の目安、個人情報の利用目的とプライバシー案内へのリンクを書きます。
入力欄を置く位置の「＋」からHTMLブロックを追加し、選んだ方式のコードを貼り付けます。
保存してプレビューを開き、ラベル、入力欄、送信ボタンが表示されるか確認します。

Block EditorのHTMLブロックは、HTMLをページに組み込む用途です。Codeブロックはコードの記述例を表示する用途なので、貼り付け先を確認してください。

テーマによってフォームの見た目が変わります。入力欄の幅や余白を調整する場合は、そのサイトのCSS設定を使います。送信先のIDや項目名は、見た目の調整と分けて管理してください。

Formspreeで送信先を作り、HTMLを貼り付ける

Formspreeでアカウントを作成し、登録メールアドレスを確認します。
管理画面でNew Formを作成します。
Integrationに表示された、https://formspree.io/f/で始まるフォーム固有の送信先URLを控えます。
フォームの設定で、受信担当者の通知先メールアドレスを確認します。

次のコードのFORM_IDを、発行されたIDへ置き換えてからPubliiへ保存してください。

<form action="https://formspree.io/f/FORM_ID" method="POST">
  <p>
    <label for="contact-name">お名前</label>
    <input id="contact-name" type="text" name="name" autocomplete="name" required>
  </p>
  <p>
    <label for="contact-email">メールアドレス</label>
    <input id="contact-email" type="email" name="email" autocomplete="email" required>
  </p>
  <p>
    <label for="contact-message">お問い合わせ内容</label>
    <textarea id="contact-message" name="message" rows="6" required></textarea>
  </p>
  <button type="submit">送信する</button>
</form>

actionは送信先、method="POST"は送信方法です。受付先に渡す各項目にはnameが必要です。labelのforと入力欄のidを対応させると、項目名を選んで入力欄へ移動できます。

この例は通常のHTML送信を使います。送信後の画面はFormspree側の設定に従います。サイト独自の完了ページや自動返信を使う場合は、契約プランと追加設定を確認してください。

Netlify Formsは検出を有効にしてから公開する

Netlify Formsを選ぶ場合は、Netlifyで対象サイトを開き、Forms → Enable form detectionで検出を有効にします。Publiiには次のHTMLを貼り付けます。

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label for="inquiry-name">お名前</label>
    <input id="inquiry-name" type="text" name="name" autocomplete="name" required>
  </p>
  <p>
    <label for="inquiry-email">メールアドレス</label>
    <input id="inquiry-email" type="email" name="email" autocomplete="email" required>
  </p>
  <p>
    <label for="inquiry-message">お問い合わせ内容</label>
    <textarea id="inquiry-message" name="message" rows="6" required></textarea>
  </p>
  <button type="submit">送信する</button>
</form>

name="contact"はフォーム名です。既に同名のフォームがある場合は別名を付けます。Netlifyは公開時のHTMLにあるdata-netlify="true"を検出して受付を設定するため、検出を有効にした後の再公開が必要です。

検出後、NetlifyはHTMLからdata-netlify属性を除き、送信用の隠し項目を加えます。公開ページで属性が消えていても、NetlifyのForms画面にフォーム名があるかを確認してください。詳しくはNetlifyのフォーム設定を参照できます。

担当者へのメール通知も設定する

Forms → Submission notificationsから通知を追加します。フォームの検出だけでは、希望する担当者への通知設定は完了しません。

Netlifyの通知条件では、新規作成・編集する通知先は、原則として有効なチームメンバーのメールアドレスが必要です。EnterpriseとLegacy Businessには例外があります。担当者の参加条件と費用を確認してから設定してください。

ページを公開状態にして、公開先へ同期する

Publiiのページが下書きのままなら、同期しても公開サイトに含まれません。Pagesの一覧で状態を確認し、保存済みの下書きは対象を選んでMore → Publishを実行してから同期します。

同期前に、変更を送るサイトと公開先が正しいかを確認します。問い合わせページへのリンクをメニューなどに用意し、同期後にそのリンクから公開ページを開いてください。Netlify Formsを使う場合は、Forms画面にフォーム名が検出されたことも確かめます。

公開URLで入力・受付・通知を照合する

テストには自分が管理するメールアドレスを使い、本文に「動作確認」と書きます。顧客情報や実際の相談内容は使いません。PCとスマートフォンで、次を確認してください。

表示と操作：HTTPSの公開URLを開き、入力欄が画面内に収まるか、項目名を読めるか、キーボードで各欄とボタンへ移動できるかを確認します。
入力エラー：必須欄を空にした場合と、メール欄へメールアドレスの形式にならない文字を入れた場合に、送信が止まるかを確かめます。
送信結果：入力して一度送信し、完了画面またはエラーを確認します。結果が分かるまで連打しないでください。
受付記録：サービスの管理画面で、送信時刻と3項目の内容を照合します。
通知：担当者のメールボックスで通知を確認します。迷惑メールへの振り分けも調べます。

HTMLのrequiredなどは入力ミスを減らす補助です。迷惑投稿への対策は受付サービス側でも設定します。Netlifyで記録が見つからない場合は、Spam submissionsへの振り分けも確認してください。

サイト全体の確認にはホームページ公開前チェックリストが使えます。受付記録とメール通知の両方を確認したうえで、問い合わせ先として案内します。

届かないときは、表示・送信・通知を分けて調べる

症状	確認する場所
入力欄が表示されない	HTMLブロックの使用、ページの公開状態、Publiiからの同期結果
Formspreeへ送れない	発行された送信先URL、FORM_IDの置換、送信時のエラー
Netlifyにフォーム名が出ない	検出の有効化、その後の再公開、生成したHTML内のフォーム
受付記録がない	送信先、完了表示、利用上限、迷惑投稿の一覧
受付記録はあるが通知がない	通知先の設定、通知先として使えるアドレスの条件、受信側の迷惑メール
一部の項目だけ届かない	該当する入力欄のname属性と、管理画面の項目名

同じ内容を何度も送る前に、URL、送信時刻、完了表示、受付記録を照合します。相談用の画面写真からは認証情報と問い合わせ内容を外してください。

公開後も受付先と担当者を管理する

フォームの管理者、返信担当者、問い合わせの保存期間、不要なデータの削除方法を決めます。返信先メールアドレスやサービスの契約が変わったときは、再び送信と通知を確認してください。

担当者の交代時は、Publiiの編集データと、受付サービスの管理権限・通知設定を引き継ぎます。既存フォームの修正範囲を相談したい場合は、Studio Attraitのホームページ改善へ、公開URLと起きている症状を伝えられます。