react-google-formsdeprecated

React component to use Google forms in a React app

Usage no npm install needed!

<script type="module">
  import reactGoogleForms from 'https://cdn.skypack.dev/react-google-forms';
</script>

README

React with Google Forms (RGF)

React component to use Google Forms in a React app.

Table of Contents

Description

Google Forms is great free option for creating forms and for data collecting purposes. It can be used to make surveys, quizzes or event registration sheets. It can be shared by sending a link. However, if you want to use Google Forms on your React app, the default option is embedding it with an HTML <iframe> element which doesn't let you customize the form's style to better fit the style of your app.

This React component gets your Google Form using Google Form Restyler based on the form's URL and turns it into a fully customizable HTML <form>.

Live Example

Coming soon..

Usage

Creating the Google Form

  1. Navigate to Google Forms and login with your Google account. If you don't have a Google account, create one here.
  2. Create a new Google Form. Although RGF supports different types of inputs, only use text type answers in the Google Form you create.

Getting the Form URL

  1. On the edit view of your Google Form, click the "Send" button in the top right corner and select the "<>" icon.
  2. Take the src parameter out of the iframe element. This is the URL you will need later and should look something like this:

https://docs.google.com/forms/d/e/..../viewform?embedded=true

RGF Package Installation

On the command line, cd to the root of your project and run:

npm install react-google-forms

Adding the RGF Component to Your App

Import the component:

import RGF from 'react-google-forms'

Usa it like any normal React component:

<RGF config={formConfig} />

Congfiguring the Component

You must provide a config object as a prop to the RGF component. The object can have the following properties:

Key isRequired Type Description Default value
formURL true String Url to your Google Form. See Getting the form URL. undefined
loadingText false String(/JSX), Text or JSX (e.g. custom spinner) to render while getting the form from Google Forms. 'Loading'
inputs true Array Array of Objects describing the inputs in your Google Form. See Configuring inputs. undefined
submitButtonText false String Text to be shown in the Submit button. 'Submit'
submitButtonAttributes false Object Any additional HTML to be assigned to the submit button undefined
redirectURL true String URL where to redirect onSubmit undefined
dev false Boolean Use development mode or production mode true
attributes false Object Any additional HTML attributes to be assigned to the form element. undefined

Configuring Inputs

The config object requires an inputs array describing the answer fields in your Google Form. The array should contain an object for each Google Forms answer field.

Key isRequired Type Description
type true String Type of the input. Supported types: checkbox/radio/select/text/textarea.
options See description Array Names/labels of the options. See Configuring input options. Required for checkbox/radio/select.
attributes false Object Any additional HTML attributes to be assigned to the input element.

Configuring Input Options

The inputs array requires an options array describing the different options for certain input types. The array should contain an object for each option.

Key isRequired Type Description Default value
text true String Text to be shown next to radio/checkbox or in the select menu undefined
labelPosition false String Position of the label for radio/checkbox. Either 'left' or 'right'. 'left'
attributes false Object Any additional HTML attributes to be assigned to input options. undefined

Contributing

If you have encountered an error or have a suggestion on how to improve the code, please submit an issue.

If you're able to make the changes by yourself, feel free to do so and submit a pull request.

License

Licensed under the MIT License.