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
- Navigate to Google Forms and login with your Google account. If you don't have a Google account, create one here.
- 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
- On the edit view of your Google Form, click the "Send" button in the top right corner and select the "<>" icon.
- 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.