Blog

HomeGeneralUsing Google Forms on WordPress Page

Using Google Forms on WordPress Page

Google Forms provides a very simple way to create a form to collect and organise information. The form can be embedded into website. The submitted information can be viewed in the response spreadsheet.

If you want to customize the layout to suit your website, Google Forms customization is quite limited. We take a look on how to create the form on wordpress page. It works on other types of web pages too. This way you can directly use your website theme and submit the form into Google Forms. We will take a look at how to create the form on your website and how to customize the response page.

Firstly, create a Google Form or use an existing form. Learn more on how to create Google Form on the help page. I’ve created a sample form.

Screen Shot 2015-09-17 at 10.47.14 AM

View the page source for the form. Copy the whole section under the form tag. Sample input id entry.177001325

<form form action="https://docs.google.com/a/bwltech.com/forms/d/1dtlRUqvvcGTSopi88qVbvP9cCk_rixG-B68oB6HCPK8/formResponse" method="POST" id="ss-form" target="_self" onsubmit="">
.... 
<label class="ss-q-item-label" for="entry_177001325">Name</label>
<input type="text" name="entry.177001325" value="" class="ss-q-short" id="entry_177001325" dir="auto" aria-label="Name  " title="">
....
</form>

You can customized the form layout as needed to suit the website theme. You can use form design, eg Bootstrap. Validation can be added too, eg JQuery Validation.

Create a WordPress post or page. Paste the form HTML code into the page. The form is now available on your website. This works not only on WordPress but also almost any website. You can test submitting the form.

Submitting the form will create a response on the Google Forms’ response spreadsheet. You still get the Google Forms’ response page on submitting the form. So the second step is to create a response page on your website. I’ve create a Thank You page on WordPress.

To use the response page, add a hidden iframe on the form page.

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='/sample-google-form/google-form-thank-you-page';}">

Update the form tag, target=”hidden_iframe” onsubmit=”submitted=true;”

<form action="https://docs.google.com/a/bwltech.com/forms/d/1dtlRUqvvcGTSopi88qVbvP9cCk_rixG-B68oB6HCPK8/formResponse" method="POST" id="ss-form" target="hidden_iframe" onsubmit="submitted=true;" class="form-horizontal">

When submitting the form, you should get the customized response page. You can view the Google Forms sample here.

Written by

The author didnt add any Information to his profile yet