react-google-forms

React with Google Forms (RGF)

React component to use Google Forms in a React app.

Table of Contents

• Description
• Live Example
• Usage
  • Creating the Google Form
  • Getting the Form URL
  • RGF Package Installation
  • Adding the RGF Component to Your App
    • Congfiguring the component
    • Configuring Inputs
    • Configuring Input Options
• Contributing
• License

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.