Skip to main content

Google Forms にページのパスを差し込む

やりたいこと​

  • 各ページのフッタに 問い合わせフォームへのリンクを貼る
  • その際、どのページからの問い合わせか分かるようにページのパスを解答欄に差し込みたい

前提知識​

得られる効果

やっていることは Docusaurus から取れる情報 ( metadata.source )を Google Forms に GET で渡すだけ。
気の利いた仕組みに乗っかれた気持ちになれます。

実装箇所​

src/theme/DocItem/Footer/index.tsx
export default function DocItemFooter(): ReactNode {
  const {metadata} = useDoc();
  ...
  const feedbackFormBase = 'https://docs.google.com/forms/d/e/XXXXXXXXXXXXXX/viewform';
  const pageUrlParam = `entry.226114776=${encodeURIComponent(metadata.source)}`;
  const feedbackFormUrl = `${feedbackFormBase}?${pageUrlParam}`;
  ...
  return (
    <>
      <footer>
        (Swizzle で生成された オリジナルのフッタ部分)
      </footer>

      {/* ✅ 差し込み箇所 */}
      <div style={{ marginTop: '2rem', textAlign: 'right' }}>
        <a href={feedbackFormUrl} target="_blank" rel="noopener noreferrer">
          📩 このページについて問い合わせる
        </a>
      </div>
    </>
  )

実装箇所で明示する部分​

  • feedbackFormBase : フォームの URL
  • pageUrlParam : パスを差し込む項目(フォーム入力項目のどれか)のID

これは決まった名前ではなく、ただこういう変数名にしただけ

フォーム入力項目の ID (上記の pageUrlParam) 確認方法​

  1. フォームの管理画面で、差し込みたい項目を足しておく
    • 対象のページURLという名前の欄を作ったとする
  2. フォームの管理画面で、右上の「︙」 → 「📝フォームに事前入力する」 のリンク辿る
    • 注:「プレビュー」ではない
  3. フォームの事前入力画面で、 対象のページURL 欄に何か値を入れた状態にする
  4. フォームの事前入力画面で、下の方の「リンクを取得」

このようにして取得したURLの、entry.NNNNNN 部分が、その項目のID。コードの pageUrlParam のところに記入する。

url
https://docs.google.com/forms/d/e/XXXXXX/viewform?usp=pp_url&entry.NNNNNN=<入力した内容>
注意

entry.NNNNNN 部分は、質問を編集したりフォームの並べ替えで変わってしまう場合があるので、フォーム編集時はリンク無効になってないかを要確認

Last updated on