TypeScript icon, indicating that this package has built-in type declarations

    1.2.4 • Public • Published

    React Google Forms Hooks

    All Contributors


    This library allows you to build a UI for your Google Forms using React. It provides a set of tools and hooks to give you a good experience while developing. It's build as a wrapper on top of react-hook-forms.

    Live demo

    You can check an example form built using this library here:

    You can also play around on the example on this CodeSandbox.


    npm install --save react-google-forms-hooks


    Use the googleFormsToJson script to convert your google form into a json and save it into a file.

    import { googleFormsToJson } from 'react-google-forms-hooks'
    // can use both full and shortened form url
    const result = await googleFormsToJson(
    // will output the form fields in an appropriate structure
    // [
    //   {
    //     label: 'Do you want to give some feedback?',
    //     type: 'LONG_ANSWER',
    //     id: '1864908950',
    //     required: false
    //   },
    //   ...
    // ]

    Pass the form object to the useGoogleForm hook and wrap your form in a GoogleFormProvider. Then you can build your custom components to render the form as beautiful as you like.

    import { GoogleFormProvider, useGoogleForm, useShortAnswerInput } from 'react-google-forms-hooks'
    import form from './form.json'
    export default function ShortAnswerInput({ id }) {
      const { register, label } = useShortAnswerInput(id)
      return (
          <input type='text' {...register()} />
    const App = () => {
      const methods = useGoogleForm({ form })
      const onSubmit = async (data) => {
        await methods.submitToGoogleForms(data)
      return (
        <GoogleFormProvider {...methods}>
          <Form onSubmit={methods.handleSubmit(onSubmit)}>
            <ShortAnswerInput id='1864908950' />
            <button type='submit'>Submit</button>
    export default App

    You can check a more complete example in the example folder.


    • Right now there is no observability on errors when submitting a form. See this comment on the code.
    • You can use the submitToGoogleForm export to create a server to handle form submissions. This way you can mitigate the CORS problem.
    • No support for multi page, sections, images and other Google Forms functionalities. However you can build your React form with multiple pages, by saving the data from handleSubmit and only submitToGoogleForms on the last page.
    • The list of supported inputs doesn't feature every input from Google Forms. Supported inputs: Short Answer, Long Answer, Checkbox, Radio, Dropdown, Linear, Radio Grid, Checkbox Grid
    • Because of CORS you have to run the googleFormsToJson script in build time.


    This library was born as a result of a side project I did and it is tailored towards my needs. If you have suggestions/improvements/ideas feel free to open issues or PRs. 🚀


    This library was largely inspired on the work done by @cybercase on the google-forms-html-exporter repo.


    MIT © francisconeves97


    Thanks goes to these wonderful people (emoji key):

    Julián Gómez Sibecas


    Dominic Garms

    🤔 💻

    Kyle Philip Balisnomo

    💻 🐛


    💻 🤔

    Daniel Ferenc Balogh


    This project follows the all-contributors specification. Contributions of any kind welcome!


    npm i react-google-forms-hooks

    DownloadsWeekly Downloads






    Unpacked Size

    185 kB

    Total Files


    Last publish


    • francisconeves97