How to embed and customize Google Forms in React or Next.js without an iframe?

When you paste the embed code from Google Forms, you get an iframe that loads the form from docs.google.com. Browsers enforce cross-origin restrictions: your page's CSS and JavaScript cannot reach inside a frame served from another domain. Your .dark-mode class and your font stack stop at the iframe boundary.

Google gives you one styling tool, the theme editor. Open your form and click Customize theme to set a header image, text style for headers and questions, a theme color, and a background color.

What it cannot do:
- Match your site's fonts (you pick from Google's short list)
- Remove the card layout, the purple focus accents, or the Google Forms footer
- Follow your app's dark mode
- Make the form full-width and responsive inside your layout

The Google Forms API does not help either. It reads form structure and response metadata, but it has no styling endpoints at all.

There are two real ways to do this. The first is free and native, the second is our add-on.

Use Customize theme to get the colors close, then embed the iframe in your component.

Pros:
- Free and official, nothing extra to maintain
- Works everywhere an iframe works

Cons:
- Styling stops at colors and header image; fonts, spacing and layout stay Google's
- Fixed-height iframe, long forms scroll inside their own box
- No dark mode sync with your app

Formfacade extracts your form fields and lets you restyle them in a visual editor.

1. Import a Google Form 
2. Click Preview to see the rendered form.
3. Pick the Minimal or Colorful style and choose a theme such as Indigo dark.
4. Adjust the primary color, background and typography to match your app.
5. Click Apply to save the design.

The embed is a React component, not an iframe, so it inherits your page layout and stays responsive. Responses still go to the linked Google Sheet.

1. Open the Share tab in Formfacade.
2. Click Embed.
3. Click "Embed in my ReactJS web app".
4. Copy the npm install command and the React component snippet.
5. Run npm install @formfacade/embed-react in your project.
6. Replace your iframe block with the Formfacade embed component and paste in your form's URL.

This approach fits any place where a visible Google iframe would look out of place: a waitlist signup on a marketing site, or a feedback and contact form inside a Next.js app. You keep Google Forms as the backend your team already knows, with responses in the linked Sheet, while visitors see a form that matches your design, including dark mode.

Does dark mode work with the embedded form?
Yes. Pick a dark theme such as Indigo dark in the Formfacade design editor, or set your own background and primary colors. Because the form renders as native HTML instead of an iframe, it sits inside your dark layout without a white Google card.

Do responses still go to Google Sheets?
Yes. Formfacade submits to your Google Form, so responses appear in the form response tab and in the linked Google Sheet, the same as before.

Does it work with the Next.js App Router and server-side rendering?
Yes. The @formfacade/embed-react component runs in the browser, so in the App Router add the "use client" directive at the top of the file that renders it. The rest of your page can stay server-rendered.

Can I just use CSS on the standard Google Forms embed instead?
No. The standard embed is an iframe from docs.google.com, and cross-origin restrictions stop your CSS from reaching inside it. The only native styling is the Customize theme editor, which covers colors, header image and a limited font list.