Google Forms MirrorGoogle Forms Mirror

TomHinkle.net

Google Forms Mirror

A web component that mirrors Google Forms, allowing seamless integration while supporting translations and external styles.

This project enables embedding Google Forms as a web component, rendering them dynamically instead of using an iframe. It allows customization while ensuring external scripts like Google Translate can still function.

In addition, the project supports custom translations of forms (something Google Forms natively does not support) or machine translation with Google Translate.

Forms are posted through Google Apps Script, so to make this work, you need:

  • To set up a Google Apps Script to handle form submission and mirroring: this script must have edit access to your form.
  • To generate Google Form embed code with your apps script and then use that code to render the form in your own hosted website.

Key features include:

  • Full Google Forms support, including multi-page navigation, required fields, and branching logic.
  • Custom styling while still allowing external styles to apply where needed (e.g., for Google Translate compatibility).
  • Dynamic translation support, integrating seamlessly with Google Translate.
  • Direct form submission via Google Apps Script, avoiding iframe-based limitations.

Unlike fully encapsulated web components, this approach allows controlled style overrides so that WordPress themes, Google Translate, or other tools can interact with the form.

This project includes:

  • Google Apps Script for fetching form data and handling submissions.
  • A Svelte-based web component for rendering forms.
  • Custom translation support, with a fallback to Google Translate.
  • Flexible styling options that work within WordPress and other CMS environments.

Tags

Tech used in this project:
SvelteJavaScriptGoogle Apps ScriptWeb Components