Google Forms is one of the ideal option to integrate in our website , specially for collecting different kind of data , As there is so many options which can be inert in form offered by google, the best part about google form , the it stored the collected data in google sheets, so we do not need to save data in order. but the structure of google form doesn't have professional look to add a static website page. And it comes with google branding at the bottom.
No worries , here we learn how we can customize the google form , give it a professional look , remove google branding and add in our professional website page.
step 1
create a google form , go to google form https://docs.google.com/forms/
and create a form , I am avoiding here the process to create google form , As you can do yourself to giving some time....
step 2 create a simler form at your own
<form action="" method="post">
<label>Name*</label>
<input type="text" placeholder="Name*"
name="Attribute Value goes here" required>
<label>Email Address*</label>
<input type="email" placeholder="Email address*"
name="Attribute Value goes here" required>
<label>Subject</label>
<input type="text" placeholder="Subject"
name="Attribute Value goes here">
<label>Message*</label>
<textarea rows="5" placeholder="Message*"
name="Mobile" required></textarea>
<button type="submit">Send</button>
</form>
NOTE : The HTML doesn’t have to be exactly the same as Google’s,
but it needs to have exactly the same form fields. You can add your own CSS
classes to the form so that it’ll match your site’s design.
step -3 Add Action & Name value to your onsite form.
Google uses custom name and action values to identify each form. The action
attribute belongs to the <form> tag, while the name attributes belong
to the input fields. So, you need to find these custom values and add it to
the HTML.
Log out of Google (or use a different browser), as if you stay logged in
it’ll be hard to do the code inspection (Google adds a lot of extra stuff to
logged-in users). Load your Google Form using the form’s URL and inspect it
using your browser’s developer tools.
You need to find the <form> tag in the HTML inspector and copy the
value of the action attribute into your custom HTML.
You need to do the same thing with your four input fields, too. But now, you
don’t have to copy the action attribute but the name attribute of each input
field.
Insert the custom action and name values into your HTML code similarly look
like given below:
200
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf2soY4CKBVRJoJ6d7NJUr3DrK1WXvwyNtS1Wn0HDyc0VwSQw/formResponse"
method="post" target="hidden_iframe"
onsubmit="submitted=true;">
<form action="" method="post">
<label>Name*</label>
<input type="text" placeholder="Name*"
name="entry.1777475793" required>
<label>Email Address*</label>
<input type="email" placeholder="Email address*"
name="entry.1326739501" required>
<label>Subject</label>
<input type="text" placeholder="Subject"
name="entry.1045781291">
<label>Message*</label>
<textarea rows="5" placeholder="Message*"
name="entry.1065046570" required></textarea>
<button type="submit">Send</button>
</form>
300
step -3 Redirect to custom thank you page
While doing the test, you’ve surely noticed that your site has redirected
the user to Google’s default thank you page. If you’d rather send your
respondents to your custom thank you page add the following code to the
top of your form, right before the <form> tag:
400
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;"
onload="if(submitted) {window.location='Redirect thankyou link goes
here';}"></iframe>
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf2soY4CKBVRJoJ6d7NJUr3DrK1WXvwyNtS1Wn0HDyc0VwSQw/formResponse"
method="post" target="hidden_iframe" onsubmit="submitted=true;">
<label>Name*</label>
<input type="text" placeholder="Name*"
name="entry.1777475793" required>
<label>Email Address*</label>
<input type="email" placeholder="Email address*"
name="entry.1326739501" required>
<label>Subject</label>
<input type="text" placeholder="Subject"
name="entry.1045781291">
<label>Message*</label>
<textarea rows="5" placeholder="Message*"
name="entry.1065046570" required></textarea>
<button type="submit">Send</button>
</form>
500
