WordPressにフィードバックフォームを10分で埋め込む方法

お客様の声を聞きたい。でも、フォーム構築は面倒

「ユーザーからフィードバックを集めたい」

サイト運営者なら誰もが思うことです。しかし、フィードバックフォームの構築には課題があります。

• プラグインを入れると重くなる
• Google Formsでは見た目がサイトに合わない
• 集めたデータの整理・分析が別作業になる

この記事では、WordPressサイトに10分でフィードバックフォームを埋め込む方法を解説します。プラグイン不要、コード1行で設置でき、収集後の整理・分析まで一気通貫で行えます。

WordPressでフィードバックを集める3つの方法

WordPressでフィードバックを収集する方法は、主に3つあります。

方法1: Contact Form 7などのプラグイン

メリット:

• 日本語対応が充実
• カスタマイズ性が高い

デメリット:

• プラグインの管理が必要
• サイトが重くなる可能性
• 集めたデータの分析機能がない

方法2: Google Forms埋め込み

メリット:

• 無料で使える
• スプレッドシート連携

デメリット:

• デザインがサイトに馴染みにくい
• 収集後の整理・分析は手作業
• アクション化までの導線が断絶

方法3: 外部ウィジェット埋め込み

メリット:

• プラグイン不要で軽量
• デザインをカスタマイズ可能
• 収集→分析→アクション化が一気通貫

デメリット:

• 外部サービスへの依存

この記事では、方法3の外部ウィジェット埋め込みを解説します。

埋め込み方式は2種類

フィードバックフォームの埋め込み方式は2種類あります。

iframe方式

ページ内にフォームをインラインで表示します。

向いているケース:

• 専用の「お問い合わせ」ページがある
• フォームを常に表示したい
• ページの一部としてフォームを配置したい

JavaScriptウィジェット方式

画面右下にフローティングボタンを表示し、クリックでモーダルが開きます。

向いているケース:

• 全ページでフィードバックを受け付けたい
• ページのレイアウトを変えたくない
• ユーザーが必要なときだけフォームを表示したい

この記事では、より汎用性の高いJavaScriptウィジェット方式を中心に解説します。

10分で設置する4ステップ

Step 1: IdeaSpoolでプロジェクトを作成（2分）

まず、フィードバックを管理するプロジェクトを作成します。

1. IdeaSpool にアクセス
2. Googleアカウントでログイン（30秒）
3. 「新規プロジェクト」をクリック
4. プロジェクト名（例: 「お客様の声」）を入力
5. 「作成」をクリック

ポイント: プロジェクトの説明欄に「どんなフィードバックを求めているか」を書いておくと、AIの分類精度が向上します。

Step 2: 外部公開を有効化（2分）

プロジェクトをフィードバック募集用に公開設定します。

1. プロジェクトの設定画面を開く
2. 「外部公開」タブを選択
3. 「外部公開を有効化」をオンに
4. 公開URLスラッグを設定（例: customer-feedback）
5. タイトル・説明文をカスタマイズ

設定例:

• タイトル: 「ご意見・ご要望をお聞かせください」
• 説明文: 「サービス改善のため、お気軽にフィードバックをお寄せください」

Step 3: 埋め込みコードを取得（1分）

ウィジェットの埋め込みコードを取得します。

1. プロジェクト設定の「埋め込みコード」タブを開く
2. 「JavaScriptウィジェット」タブを選択
3. 必要に応じてカスタマイズ
   • 位置: 右下（デフォルト）/ 左下
   • ボタンの色: ブランドカラーに合わせる
   • ボタンのテキスト: 「フィードバック」など
4. 「コードをコピー」をクリック

コード例:

<script
  src="https://ideaspool.cc/widget.js"
  data-project="your-project-slug"
  data-position="bottom-right"
  data-color="#3cf91a"
  data-text="フィードバック"
></script>

Step 4: WordPressに貼り付け（5分）

取得したコードをWordPressに設置します。

ブロックエディタ（Gutenberg）の場合

全ページに表示する場合（推奨）:

1. 「外観」→「テーマファイルエディター」を開く
2. footer.php を選択
3. </body> タグの直前にコードを貼り付け
4. 「ファイルを更新」をクリック

特定のページのみに表示する場合:

1. 該当ページの編集画面を開く
2. 「カスタムHTML」ブロックを追加
3. コードを貼り付け
4. 「更新」をクリック

Classic Editorの場合

1. 「外観」→「テーマエディター」を開く
2. footer.php を選択
3. </body> タグの直前にコードを貼り付け
4. 「ファイルを更新」をクリック

テーマのカスタマイズが難しい場合

「Insert Headers and Footers」プラグインを使う方法もあります。

1. プラグインをインストール・有効化
2. 「設定」→「Insert Headers and Footers」を開く
3. 「Scripts in Footer」にコードを貼り付け
4. 「保存」をクリック

これで設置完了です。 サイトにアクセスすると、右下にフローティングボタンが表示されます。

iframe方式で埋め込む場合

専用のフィードバックページを作りたい場合は、iframe方式を使います。

埋め込みコード例

<iframe
  src="https://ideaspool.cc/submit/your-project-slug"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

WordPressでの設置方法

1. 固定ページを新規作成（例: 「フィードバック」）
2. 「カスタムHTML」ブロックを追加
3. iframeコードを貼り付け
4. 「公開」をクリック

設置後の運用フロー

フォームを設置したら、以下のフローでフィードバックを活用します。

フロー1: 投稿の確認・承認

1. IdeaSpoolの「外部投稿」タブを開く
2. 新しい投稿を確認
3. 有効なフィードバックを「承認」
4. スパムや無関係な投稿は「却下」

ポイント: 承認したフィードバックは自動でAI分析され、タイプ（アイデア/課題/メモ）とタグが付与されます。

フロー2: AI分析の活用

承認されたフィードバックは、AIが自動で分析します。

• タイプ判定: アイデア / 課題 / メモ
• タグ生成: 関連するキーワードを自動付与
• Pain Level: 課題の深刻度を1〜5でスコアリング

複数のフィードバックを選択して「共通点分析」を実行すると、ユーザーが本当に求めていることが見えてきます。

フロー3: アクション化

重要なフィードバックは、ワンタップでGitHub Issueに変換できます。

• AI分析結果がラベルとして自動付与
• 「enhancement」「bug」などのタイプラベル
• 「priority: high」などの優先度ラベル

フィードバック→Issue→実装→リリースのサイクルを回しましょう。

ウィジェットのカスタマイズオプション

JavaScriptウィジェットは、以下のオプションでカスタマイズできます。

カスタマイズ例: 左下に青いボタン

<script
  src="https://ideaspool.cc/widget.js"
  data-project="your-project-slug"
  data-position="bottom-left"
  data-color="#0066cc"
  data-text="ご意見"
  data-text-color="#ffffff"
></script>

JavaScript APIでプログラム制御

ウィジェットはJavaScript APIで制御することもできます。

// モーダルを開く
window.IdeaSpoolWidget.open();

// モーダルを閉じる
window.IdeaSpoolWidget.close();

// ウィジェットを非表示にする
window.IdeaSpoolWidget.hide();

// ウィジェットを表示する
window.IdeaSpoolWidget.show();

活用例: 特定のボタンクリックでフィードバックモーダルを開く

<button onclick="window.IdeaSpoolWidget.open()">
  ご意見をお聞かせください
</button>

Google Formsとの違い

Google Formsは「収集」には便利ですが、収集後のワークフローが断絶しています。IdeaSpoolは収集→分析→アクション化まで一気通貫で行えます。

投稿元URLの自動記録

IdeaSpoolウィジェットは、フィードバックが投稿されたページのURLを自動記録します。

これにより:

• どのページで問題が発生したか分かる
• 特定のページに関するフィードバックを絞り込める
• ページごとの課題傾向を分析できる

よくある質問

Q: プラグインは必要ですか？

A: 不要です。 JavaScriptコードを貼り付けるだけで動作します。テーマファイルの編集が難しい場合のみ、「Insert Headers and Footers」などの補助プラグインを使います。

Q: サイトの表示速度に影響しますか？

A: 影響は最小限です。 ウィジェットのスクリプトは非同期で読み込まれるため、ページの表示を妨げません。

Q: 無料で使えますか？

A: はい。 IdeaSpoolは無料プランでも外部公開・埋め込み機能を使用できます。

Q: スパム対策はありますか？

A: はい。 Cloudflare Turnstileによるボット対策と、IPレート制限を実装しています。さらに、承認ワークフローでスパムを除外できます。

Q: Shopifyでも使えますか？

A: はい。 同じ埋め込みコードをShopifyのテーマに貼り付けることで使用できます。

まとめ

WordPressにフィードバックフォームを埋め込む手順:

1. IdeaSpoolでプロジェクト作成（2分）
2. 外部公開を有効化（2分）
3. 埋め込みコードを取得（1分）
4. WordPressに貼り付け（5分）

合計10分で、フィードバック収集の仕組みが完成します。

Google Formsとの違いは「収集後」にあります。IdeaSpoolなら:

• AI自動分類でタイプ・タグ・優先度を判定
• 投稿元URLでどのページからの投稿か把握
• GitHub Issue変換でフィードバックを即アクション化

「お客様の声を聞く」だけでなく、「聞いた声をアクションに変える」 仕組みを構築しましょう。

あわせて読みたい

フィードバック収集・活用をさらに深めたい方は、以下の記事もご覧ください。

• チーム外からのフィードバックを効率的に集めて活用する仕組み — フィードバック収集の全体戦略と活用フロー
• アイデアの分類・タグ付けをAIで自動化する方法 — 集めたフィードバックのAI自動分類の仕組み

---

「フォーム設置から分析・アクション化まで一気通貫で」——これを実現するのが IdeaSpool の埋め込みウィジェット機能です。

コード1行でフローティングボタンを設置でき、集まったフィードバックはAIが自動分類。承認後はワンタップでGitHub Issueに変換できます。WordPressサイトで「お客様の声」を活用したい方は、ぜひお試しください。