feat: ドキュメントサイト内に問い合わせフォームを埋め込み by kou135 · Pull Request #290 · Anti-Pattern-Inc/saasus-platform-document

kou135 · 2026-06-02T08:05:56Z

概要

これまで FAQ の「お問い合わせ」リンクは saasus.io/pricing#support への外部遷移でしたが、ユーザーが docs.saasus.io 内で問い合わせを完結できるようにしました。

背景 / セールスとの合意事項

セールス（@hirata-ayano、@Hiroki-Kooriyama）と以下を合意済:

ドキュメント専用の Pardot (Salesforce Account Engagement) Form Handler を新規発行いただいた
- エンドポイント: https://account-engagement.anti-pattern.co.jp/l/985311/2026-06-01/2gpbd9
成功/エラーリダイレクト先は docs.saasus.io 配下に設定済
- 成功時: https://docs.saasus.io/thanks-inquiry
- エラー時: https://docs.saasus.io/error-inquiry
サンクスメールはドキュメントサイト発信用の文面で登録済
サンクス/エラー画面のデザインは現状（マーケサイト）と同等で OK

注意点

開発環境だとフォーム送信後に404エラーが返ってきますが、これは本番環境にサンクスページが実装されていないためです。こちらの現象はPRマージ後に解消される見込みです

動作の流れ

ユーザーが FAQ の「お問い合わせ」ボタンを押下 → モーダル表示
フォーム入力 → 送信 → Pardot Form Handler が処理
正常時: https://docs.saasus.io/thanks-inquiry に 302 リダイレクト
異常時: https://docs.saasus.io/error-inquiry に 302 リダイレクト
サンクスメールが申込者にも自動送信される（Pardot 側設定済）

スクリーンショット

フォームUI

サンクスページとエラーページ(日本語・英語対応)

フォーム送信後の確認

これまで FAQ の "お問い合わせ" リンクは saasus.io/pricing#support への外部遷移だったが、ユーザーが docs.saasus.io 内で問い合わせを完結できるようにする。実装内容: - InquiryDialog / InquiryButton コンポーネント追加 - MUI を使わず CSS Modules で実装し、既存リポジトリの依存範囲内に収める - サポート用に新規発行された Pardot Form Handler (https://account-engagement.anti-pattern.co.jp/l/985311/2026-06-01/2gpbd9) にフォーム POST する。 - 送信フィールドはマーケサイトと同じ (email/Company/phone/first_name/ last_name/content) - /thanks-inquiry, /error-inquiry ページを src/pages に新設 - Pardot 側に既に成功/エラー Location として設定されている https://docs.saasus.io/thanks-inquiry / /error-inquiry に対応 - デザインは marketing サイトの ThanksTemplate/Errors テンプレートを踏襲し、ヒーロー画像も同じ素材を static/img/inquiry/ に同梱 - i18n/ja/code.json に日本語訳キーを追加 (inquiry.*) - FAQ の問い合わせリンクを <InquiryButton /> 呼び出しに置換 - docs/part-7/faq/saasus-platform (current, en/ja) - versioned_docs/version-1.12 (デフォルト表示版, en/ja) - versioned_docs/version-1.11 (en/ja) - .md -> .mdx 拡張子変更により React コンポーネント import を可能化ビルド確認: npm run build (build/{docs,ja/docs}/part-7/faq/saasus-platform/ index.html に <button>contact us</button> / <button>お問い合わせ</button> が出力されること、build/{thanks,error}-inquiry/index.html および build/ja/{thanks,error}-inquiry/index.html が生成されることを確認済。セールス合意事項: - Pardot Form Handler 新規発行済 (Form Handler ID: 2gpbd9) - サンクスメールは docs サイト発信用文面で登録済 - サンクス/エラー画面デザインは現状と同等で OK (Kooriyama さん承認) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

`var(--ifm-background-color)` を使っていた結果、Docusaurus のレイアウト/ テーマ計算の影響で意図せず半透明に見えるケースがあったため、明示的に固定色を指定する。 - ライトモード: #ffffff - ダークモード: #1b1b1d (Docusaurus 標準サーフェス色) 入力欄も同様に明示。 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Improve modal close discoverability: cancel button at the bottom was hidden below the fold on shorter viewports. Add a always-visible × icon in the header, aligned with common modal UX conventions. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

SasakiTakatsugu

1.11の変更について
特別な理由がなければ、version-1.11 への追加は不要かと思いました（current と 1.12のみで十分そうです）

リダイレクト先の言語について
対応不要そうですがメモ：リダイレクト先が英語パス固定（/thanks-inquiry,/error-inquiry）なので、日本語ページから送信した場合も英語ページになりそうです。

Copilot

Pull request overview

FAQ の「お問い合わせ」導線を外部サイト遷移（saasus.io/pricing#support）から、docs.saasus.io 内で完結する問い合わせモーダル（Pardot Form Handler 送信）に置き換え、送信後のサンクス/エラーページもドキュメントサイト内に新設する PR です。

Changes:

FAQ のお問い合わせリンクを <InquiryButton variant="inline">…</InquiryButton> に置換（日本語/英語、current/versioned 反映）
問い合わせモーダル（InquiryButton/InquiryDialog）を追加し、Pardot Form Handler に POST 送信
送信結果のリダイレクト先として thanks-inquiry / error-inquiry ページと共通スタイルを追加（i18n 対応含む）

Reviewed changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
docs/part-7/faq/saasus-platform.mdx	FAQ の「contact us」をモーダル起動の `InquiryButton` に置換
versioned_docs/version-1.11/part-7/faq/saasus-platform.mdx	v1.11 FAQ の問い合わせ導線を `InquiryButton` に置換
versioned_docs/version-1.12/part-7/faq/saasus-platform.mdx	v1.12 FAQ の問い合わせ導線を `InquiryButton` に置換
i18n/ja/docusaurus-plugin-content-docs/current/part-7/faq/saasus-platform.mdx	日本語 current FAQ の問い合わせ導線を `InquiryButton` に置換
i18n/ja/docusaurus-plugin-content-docs/version-1.11/part-7/faq/saasus-platform.mdx	日本語 v1.11 FAQ の問い合わせ導線を `InquiryButton` に置換
i18n/ja/docusaurus-plugin-content-docs/version-1.12/part-7/faq/saasus-platform.mdx	日本語 v1.12 FAQ の問い合わせ導線を `InquiryButton` に置換
src/components/InquiryButton/index.tsx	問い合わせモーダルを開くボタンコンポーネントを追加
src/components/InquiryButton/styles.module.css	`InquiryButton` のボタン/インライン表示スタイルを追加
src/components/InquiryDialog/index.tsx	Pardot Form Handler に POST する問い合わせフォーム付きモーダルを追加
src/components/InquiryDialog/styles.module.css	`InquiryDialog` のモーダル UI スタイルを追加
src/pages/thanks-inquiry.tsx	送信成功時のサンクスページを追加
src/pages/error-inquiry.tsx	送信失敗時のエラーページ（代替フォーム導線つき）を追加
src/pages/inquiry-result.module.css	サンクス/エラー画面の共通スタイルを追加
i18n/ja/code.json	問い合わせ UI（ボタン/モーダル/結果ページ）の日本語翻訳を追加

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="inquiry-dialog-title"
+      onClick={onClose}
+    >
+      <div className={styles.dialog} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.header}>


+  const [open, setOpen] = useState(false);
+
+  const label = children ?? (
+    <Translate id="inquiry.button.label">Contact us</Translate>
+  );
+
+  return (
+    <>
+      <button
+        type="button"
+        className={variant === 'inline' ? styles.inline : styles.button}
+        onClick={() => setOpen(true)}
+      >
+        {label}
+      </button>
+      <InquiryDialog open={open} onClose={() => setOpen(false)} />
+    </>


- Revert v1.11 FAQ changes (only current + v1.12 should carry the new inquiry modal; old versions stay on the external pricing link) - Move role="dialog" / aria-modal / aria-labelledby from the overlay backdrop to the actual dialog panel so screen readers announce the correct element - Stabilize onClose with useCallback to avoid re-running the dialog's keydown / scroll-lock effect on every parent render - Restore focus to the trigger button after the dialog closes so keyboard users don't lose their place Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

kou135 · 2026-06-06T10:15:44Z

1.11の変更について特別な理由がなければ、version-1.11 への追加は不要かと思いました（current と 1.12のみで十分そうです）

リダイレクト先の言語について対応不要そうですがメモ：リダイレクト先が英語パス固定（/thanks-inquiry,/error-inquiry）なので、日本語ページから送信した場合も英語ページになりそうです。

こちら削除させていただきました！
239a936

kou135 · 2026-06-06T10:17:16Z

copilot2件についても対応済み

SasakiTakatsugu

コンタクトフォームを開くとコンソールに

cannot appear as a descendant of

のワーニングが出ていたので確認お願いします。

InquiryButton is used inline inside MDX paragraphs (e.g. 'Please <InquiryButton variant="inline">contact us</InquiryButton>.'), which caused the dialog's overlay <div> to be nested inside the surrounding <p>. React logged a validateDOMNesting warning and the layout could hydrate incorrectly. Render the dialog through React's createPortal to <body> instead so the trigger button stays inline while the dialog lives at the top of the DOM tree, with a mounted guard to keep SSR safe. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

kou135 · 2026-06-08T07:51:43Z

コンタクトフォームを開くとコンソールに

cannot appear as a descendant of
のワーニングが出ていたので確認お願いします。

こちら対応させていただきました！

kou135 and others added 3 commits June 2, 2026 17:05

kou135 requested a review from KooriyamaHiroki June 2, 2026 12:48

SasakiTakatsugu self-requested a review June 3, 2026 08:41

SasakiTakatsugu reviewed Jun 3, 2026

View reviewed changes

KooriyamaHiroki requested a review from Copilot June 3, 2026 13:14

Copilot started reviewing on behalf of KooriyamaHiroki June 3, 2026 13:14 View session

Copilot AI reviewed Jun 3, 2026

View reviewed changes

kou135 requested a review from SasakiTakatsugu June 7, 2026 05:14

SasakiTakatsugu reviewed Jun 8, 2026

View reviewed changes

kou135 and others added 2 commits June 8, 2026 15:57

chore(inquiry): remove redundant comments

72c0fa9

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

SasakiTakatsugu approved these changes Jun 8, 2026

View reviewed changes

Merge branch 'main' into feat/inquiry-form

f597ecf

kou135 merged commit 7f29ceb into main Jun 8, 2026
1 check passed

kou135 deleted the feat/inquiry-form branch June 8, 2026 09:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ドキュメントサイト内に問い合わせフォームを埋め込み#290

feat: ドキュメントサイト内に問い合わせフォームを埋め込み#290
kou135 merged 7 commits into
mainfrom
feat/inquiry-form

kou135 commented Jun 2, 2026 •

edited

Loading

Uh oh!

SasakiTakatsugu left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

kou135 commented Jun 6, 2026

Uh oh!

kou135 commented Jun 6, 2026

Uh oh!

SasakiTakatsugu left a comment

Uh oh!

kou135 commented Jun 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

kou135 commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

背景 / セールスとの合意事項

注意点

動作の流れ

スクリーンショット

フォームUI

サンクスページとエラーページ(日本語・英語対応)

フォーム送信後の確認

Uh oh!

SasakiTakatsugu left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

kou135 commented Jun 6, 2026

Uh oh!

kou135 commented Jun 6, 2026

Uh oh!

SasakiTakatsugu left a comment

Choose a reason for hiding this comment

Uh oh!

kou135 commented Jun 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kou135 commented Jun 2, 2026 •

edited

Loading