iframeを使わずにReactやNext.jsでGoogle Formsを埋め込んでカスタマイズするには？

ReactやNext.jsで開発し、フォームをGoogle Formsで管理している開発者は、同じ壁にぶつかります。Googleの埋め込みコードはdocs.google.comからのiframeなので、CSSもダークモードもフォームに届きません。Customize themeで変えられるのはヘッダー画像、短いフォント一覧、2つの色までで、Google Forms APIにはスタイル設定がまったくありません。Formfacadeなら、フォームはnpmパッケージからネイティブHTMLとして描画されるので、ダークモードも含めて製品のほかの部分と同じようにテーマを適用できます。回答は引き続きGoogle Formに集まり、チームはGoogle FormsとGoogle Sheetsでこれまでどおり作業できます。

ReactやNext.jsのアプリでGoogle Formのスタイルを変える現実的な方法を2つ紹介し、それぞれの足りない点も説明します。

Google Formsの標準の埋め込みはdocs.google.comから配信されるiframeなので、あなたのスタイルシートはフォームに届かず、フォームはいつも自社製品ではなくGoogleの見た目になります。このガイドでは、なぜこの制限があるのかを説明し、現実的な選択肢を比較したうえで、FormfacadeでGoogle Formをカスタマイズし、iframeを使わずにReactやNext.jsに埋め込む方法を、ダークモードも含めて紹介します。

埋め込んだGoogle FormのスタイルをCSSで変えられない理由

Google Formsの埋め込みコードを貼り付けると、docs.google.comからフォームを読み込むiframeになります。ブラウザはクロスオリジン制限を適用するので、ページのCSSやJavaScriptは別のドメインから配信されるフレームの中には届きません。.dark-modeクラスもフォントの指定も、iframeの境界で止まります。
Googleが用意しているスタイル設定のツールはテーマエディタひとつだけです。フォームを開いてCustomize themeをクリックすると、ヘッダー画像、ヘッダーと質問の文字スタイル、テーマカラー、背景色を設定できます。
できないこと：
  • サイトのフォントに合わせる(Googleの短い一覧から選ぶしかありません)
  • カードレイアウト、紫のフォーカス色、Google Formsのフッターを消す
  • アプリのダークモードに合わせる
  • レイアウトの中でフォームを全幅かつレスポンシブにする
Google Forms APIも役に立ちません。フォームの構造や回答のメタデータは読めますが、スタイル設定のエンドポイントはまったくありません。

ReactやNext.jsのアプリでGoogle Formsをカスタマイズする選択肢

現実的な方法は2つあります。1つ目は無料の標準機能、2つ目はFormfacadeです。

選択肢1：標準のiframeとテーマエディタ

Customize themeで色を近づけてから、コンポーネントにiframeを埋め込みます。
メリット：
  • 無料の公式機能で、追加で管理するものはありません
  • iframeが使える場所ならどこでも動きます
デメリット：
  • 変えられるのは色とヘッダー画像までで、フォント、余白、レイアウトはGoogleのままです
  • iframeの高さは固定で、長いフォームは自分の枠の中でスクロールします
  • アプリのダークモードと連動しません

選択肢2：FormfacadeでGoogle Formをカスタマイズする方法

Formfacadeはフォームの項目を取り出し、ビジュアルエディタでスタイルを変えられるようにします。
  • 開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
  • 「Preview」タブをクリックすると、描画されたフォームが表示されます。
  • MinimalまたはColorfulのスタイルを選び、Persian indigoなどのテーマを選びます。
  • アプリに合わせて、プライマリカラー、背景、タイポグラフィを調整します。
  • これはプレビューにすぎません。デザインが保存されるのは「Apply to all forms」をクリックした場合だけで、これはアカウント内の公開中のフォームすべてのスタイルを変えるので、ほかに公開中のフォームがある場合はそのままにしておいてください。埋め込みはそれがなくても動きます。
PreviewのThemeタブ。Primary color、Background、Typographyの設定があり、カラーボックスに印が付いています

カスタマイズしたフォームをReactやNext.jsに埋め込む方法

埋め込みはiframeではなくReactコンポーネントなので、ページのレイアウトを引き継ぎ、レスポンシブなままです。
  • 「Share」タブをクリックします
  • Embedをクリックします
Edit、Preview、Share、Responsesのタブ。Shareに印が付いています
  • 「Embed in my React.js web app」をクリックし、Nextをクリックします。
ShareのEmbedタブで、Where do you want to embed this form?と聞かれている画面。Embed、Embed in my React.js web app、Nextに印が付いています
  • npm installコマンドとReactコンポーネントのスニペットをコピーします。
  • プロジェクトでnpm install @formfacade/embed-reactを実行します。
  • iframeのブロックをFormfacadeの埋め込みコンポーネントに置き換えます。コードにはすでにフォームのURLが入っています。
npm installコマンドと、Reactアプリに追加するコードが表示されたEmbedタブ
フォームはiframeなしでReactやNext.jsのアプリに表示されます。

この方法が向いている場面

この方法は、Googleのiframeが目に見えると浮いてしまうあらゆる場所に合います。たとえば、マーケティングサイトのウェイトリスト登録や、Next.jsアプリ内のフィードバックフォームやお問い合わせフォームです。チームが使い慣れたGoogle Formsをバックエンドとして使い続けながら、訪問者にはダークモードも含めてあなたのデザインに合ったフォームを見せられます。

よくある質問

埋め込んだフォームでダークモードは使えますか？
はい。FormfacadeのThemeタブで、背景色とプライマリカラーを自分で設定します。フォームはiframeではなくネイティブHTMLとして描画されるので、白いGoogleのカードなしで、ダークなレイアウトの中に収まります。
回答は引き続きGoogle Sheetsに届きますか？
はい、ResponsesでSubmit to Google Formsをオンにしていれば届きます。FormfacadeはあなたのGoogle Formに送信するので、回答はこれまでどおりフォームの回答タブとリンクしたGoogle Sheetに表示されます。
Next.jsのApp Routerやサーバーサイドレンダリングでも動きますか？
はい。@formfacade/embed-reactコンポーネントはブラウザで動くので、App Routerでは、それを描画するファイルの先頭に"use client"ディレクティブを追加します。ページのほかの部分はサーバーで描画したままにできます。
標準のGoogle Formsの埋め込みにCSSを使うだけではだめですか？
だめです。標準の埋め込みはdocs.google.comからのiframeで、クロスオリジン制限により、あなたのCSSはその中に届きません。唯一の標準のスタイル設定はCustomize themeエディタで、色、ヘッダー画像、限られたフォントの一覧しか扱えません。

まとめ

Googleのコードを使ってReactやNext.jsにGoogle Formを埋め込むと、iframeがCSSを遮り、フォームはいつもGoogleの見た目になります。Formfacadeなら、Previewタブでフォームにテーマを適用し、iframeなしでnpmパッケージを使って埋め込めます。フォームを作成して、上の手順を完了してください。ご不明な点があれば、サポートにご連絡ください。

最終更新：