ReactアプリにiframeなしでGoogle Formsを埋め込むには？

アプリにGoogle Formsのフォームを入れたいReact開発者がGoogleの埋め込みコードで得られるのはiframeです。ページの中のページで、Googleの見た目と専用のスクロールバーがあり、アプリのスタイルは届きません。Formfacadeの埋め込みパッケージ@formfacade/embed-reactなら、フォームはiframeなしで、アプリの中のコンポーネントとして表示されます。質問はこれまでどおりフォームエディタで編集するので、質問を変えてもコードを変える必要はなく、回答はGoogle Formsのフォームに集まります。

以下の手順に従ってください。最後の手順にはFormfacadeのフォームが必要なので、まだお持ちでなければフォームを作成してください。

前提条件

Node.jsがシステムにインストールされていること。
テキストエディタまたは統合開発環境（IDE）

Reactアプリを作成する

Reactの環境をまだ用意していない場合は、node.jsをインストールしてReactアプリを作成します。

ステップ1：ここをクリックしてnode.jsをダウンロードします

ステップ2：ターミナルで次のコマンドを実行し、NPXをグローバルにインストールします。

npm install -g npx

ステップ3：Reactアプリを生成します

npx create-react-app test-react-app

Formfacade/embed-reactをインストール

Formfacade/embed-reactは、iframeなしでGoogle FormsのフォームをReactアプリに埋め込むためのFormfacadeの埋め込みライブラリです。

アプリのディレクトリでターミナルを開き、Formfacade Embedパッケージをインストールします：

npm install @formfacade/embed-react

Google FormsのフォームをReactアプリに埋め込む

開いたページでフォームに名前を付け、Embed formをクリックし、Proceedをクリックします。
Shareタブの「Where do you want to embed this form?」でEmbed in my React.js web appを選び、Nextをクリックします。

次のimport文を追加して、ReactアプリにFormfacade Embedコンポーネントを読み込みます：import FormfacadeEmbed from "@formfacade/embed-react";
ReactアプリにFormfacade Embedのコードを追加します：<FormfacadeEmbed formFacadeURL="https://formfacade.com/.../classic.js/?div=ff-compose" onSubmitForm={() => console.log('Form submitted')} />
このコードはEmbedタブからコピーしてください。点の部分にフォームのURLが入っています。

フォームはiframeなしでReactアプリに表示されます。

まとめ

GoogleのコードでGoogle FormsのフォームをReactに埋め込むと、独自の見た目とスクロールバーを持つiframeになります。Formfacadeなら、@formfacade/embed-reactをインストールし、ReactアプリにFormfacade Embedのコードを追加するだけです。フォームを作成して、上の手順を進めてください。ご不明な点があれば、サポートにご連絡ください。

最終更新： 11/6/2026