paint-brush
Create websites using Google Formsby@gauthamsanthosh
6,717 reads
6,717 reads

Create websites using Google Forms

by Gautham SanthoshAugust 29th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

<em>Changing CSS of Google Form to create website by using No Code</em>

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Create websites using Google Forms
Gautham Santhosh HackerNoon profile picture

Changing CSS of Google Form to create website by using No Code

The Best Code is No Code At All

Step 1

Navigate to google forms and create a form with the required fields.

Step 2

Create a html form with the same fields as mentioned in google form so that you can connect your google form in it.

Step 3

Navigate back to the google form you created and inspect the Google form for action attribute.

Step 3(a)

Copy the same action to your html form.

Step 4

Inspect and find values for attributes name for every field mentioned in Google form.

Step 4(a)

Give the same name values for your html form items as well. The values look something like entry.742532386.

Put this value in the html form field using <input name> tag.

Step 5

Fill a test input in your html form and verify whether your google form is getting the response or not.

Since it is a native <form> element, apply CSS however you want to :)

Sample html form with google form embeded in it.

<form action=”https://docs.google.com/forms/u/1/d/edjffbsffefEg/formResponse" method=”POST” id=”contact_form” name=”” class=”feedback-form”>

<input class=”form__email” type=”text” placeholder=”Name” name=”entry.1432404007" id=”name_input” required=”” />

<textarea class=”form__message” cols=”30" type=”text” placeholder=”complaint” name=”entry.1580494895" id=”email_input” required=”” rows=”5"></textarea>

<input class=”form__email” type=”text” placeholder=”hostel” name=”entry.178242508" id=”telephone_input” required=”” />

<input class=”form__email” type=”text” placeholder=”room number” name=”entry.791188540" id=”email_input” required=”” />

<button class=”form__submit”>Submit</button>

</form>

Sample form with google form linked in it.

What Next

You can use a zapier integration with Airtable and create a platform. https://zapier.com/apps/airtable/integrations/google-sheets