Create Feedback Form In React App Using Google Forms

4 min readAug 26, 2022

The feedback form is the most crucial part of any app and website. It helps in improving the performance of the apps and website.

Google Form

Google form helps in creating forms for getting responses for orders, registration, feedback, and assessments. The responses can also be saved to Google Sheets. Visit Google Forms for more.

Create Google Form

Create a Google form for getting responses through the feedback form.

Visit Google Forms and create a form with Name, Email, Type and Message

For Name, select short answer as type and toggle required.

2. For Email , select short answer as type and toggle required.

3. For Feedback Type , select Dropdown and toggle required.

4. For Message , select Paragraph and toggle required

Get Form URL and Id For Input Fields

To use it in react app, the form URL and input field’s id are required. Click on the Send button and copy the iframe src.

Construct form URL
Copy URL and replace viewform with formResponse?

https://docs.google.com/forms/d/e/1FAIpQLScJ1k-LI5sPFwouoI4sWmS5mfDQTrnWFoBaGKKNWu8IaFQcA/viewform

After replacing viewform, the form url will be

https://docs.google.com/forms/d/e/1FAIpQLScJ1k-LI5sPFwouoI4sWmS5mfDQTrnWFoBaGKKNWu8IaFQcA/formResponse?

Get id for fields
Open the form in the browser and input some texts to input fields then click right button and select inspect in the menu. In Elements tab search entry and note down all the entry id.

The entry from the Google Forms will be used in react app.

Name    --   entry.426501587
Email   --   entry.1356026756
Feedback Type   --   entry.1407151281
Message   --   entry.1943831719

Create React App

In this blog post, I used Ionic React to create a React project from scratch.

ionic start

Then select React framework, choose a name for the app and finally select a template. In this post, the tabs template is used.

Create Form UI

The following feedback form is created using Ionic React’s UI components.

Add a form HTML tag with id, name, input form URL from above in action, and target to hidden_iframe.

<form 
  name="gform" 
  id="gform"    
  action=
"https://docs.google.com/forms/d/e/1FAIpQLSeqP43u2gwc1TnWFUA_7fPmSfWJKHtDM5yCZvFekZxeZhwmYA/formResponse?"
  target="hidden_iframe"
  onSubmit={() => setSubmit(true)}>

2. For Name, add input with entry id taken from previous steps.

<IonItem>
  <IonLabel position="floating">Name*</IonLabel>
  <IonInput type="text" name="entry.426501587" id="entry.426501587" placeholder="Enter name..." required />
</IonItem>

3. For Email, add input with entry id taken from previous steps.

<IonItem>
  <IonLabel position="floating">Email*</IonLabel>
  <IonInput type="email" name="entry.1356026756" id="entry.1356026756" placeholder="Enter email..." required />
</IonItem>

4. For Feedback Type, drop-down menu, radio buttons can be used. In this project IonSelect used.

<IonItem>
  <IonLabel position="floating">Feedback Type*</IonLabel>  <IonSelect name="entry.1407151281" id="entry.1407151281" interface="popover" placeholder="Select Feedback Type">
    <IonSelectOption value="Comments">Comments</IonSelectOption>
    <IonSelectOption value="Suggestions">Suggestions</IonSelectOption>
    <IonSelectOption value="Questions">Questions</IonSelectOption>
  </IonSelect>
</IonItem>

5. For Message, add textarea and add entry id from previous steps.

<IonItem>
  <IonLabel position="floating">Feedback*</IonLabel>
  <IonTextarea name="entry.1943831719" id="entry.1943831719" placeholder="Enter feedback..." required />
</IonItem>

6. Finally, add buttons to submit or clear the form. For the submit button, type="submit" used and for the clear button, type="reset" used.

<IonFooter style={{ textAlign: "right", paddingTop: "10px" }} className="ion-no-border">
  {submit ?
    <IonLabel color={"primary"}>
      Your feeback submitted.
    </IonLabel>
    :
    <div>
      <IonButton color={"danger"} type="reset">
        Clear
      </IonButton>
      <IonButton color={"success"} type="submit">
        Submit
      </IonButton>
    </div>
  }
</IonFooter>

7. In previous code snippets, submit boolean value is used to check if the user has submitted the form or not.

8. After closing form tag, add iframe with hidden styling, name="hidden_iframe", and id="hidden_iframe" for loading the Google Forms in the current window and handling responses.

</form>
<iframe title="google-form" style={{ display: "none" }} name="hidden_iframe" id="hidden_iframe" onLoad={() => submit ? {} : ""}></iframe>

9. After that run ionic serve, to run react project. Input some test strings in input box and hit submit button, the reponses will be sent to Google Forms.

10. Source for the feedback form page.

Feedback.tsx source file for taking feebacks using Google Forms