Create websites using Google Forms

Written by gauthamsanthosh | Published 2018/08/29
Tech Story Tags: web-development | google-forms | no-code | google-form-website | google-forms-website

TLDRvia the TL;DR App

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


Published by HackerNoon on 2018/08/29