How to embed Google form in website

Recently I've share about Google form integration in DDC Dolakha website, and thought I'd write a short blog for anyone who is interested in embedding a Google form into there website.

Google form is a powerful tool to collect data, view the response and at the same time analyze data using Google powerful reporting tool.

Here are the basic steps to embed Google form in your website.
Before going through the steps; here are the list of requirements to go through the embedding process

Google account
Google drive access
Cpanel log in details of your website

Step 1: Create a Google Form

Access your Google drive account form using any browser and click on create "form". After you have created the form and populated it with questions now its time to embed it to the website. Before you proceed now its time to setup our webpage for website.

Step 2: Setup new page for displaying the form.

For this you may need to code some HTML, css and Some java-script but I will make this thing easier by providing all the HTML, CSS and Javascript needed for you in a single package.DOWNLAOD WHOLE PACKAGE FROM HERE. Now you have downloaded, you may need to change few lines of code, you go through yourself and change all the styling material like, DDC name, and other information yourself, But the important one is you need to link your form to this page.

Step 3: linking Form to the page

Extract the downloaded file, there you will find index.html, OPEN the same with text editor (i will prefer Sublime text) and go to line 177. there you will find iframe tag which you have to replace by your own.

Now go the form which you have recently created.

go to FILE and click on EMBED

Copy the code from the text box and replace it to the line 177 as shown above.
You may notice there is another iframe tag in line 180, which if don't want can remove, OR go to line 139 and in style add style="display:none"

For now I suppose you made other changes like, like changing DDC name etc. Now its time to upload it to web. Before that compress the downloaded folder using any compression software.

Step 4: Preparing file to upload and upload

right click on the folder and click ADD to archive, a window will appear

Select archive format to ZIP and click OK.

Now go to your browser and log in to cpanel (i.e ddcyourddc.gov.np/cpanel), there go to FILES and click on File manager a pop box will appear click on OK.

Browse to top left and click on UPLOAD, browse the file upload, when the file is uploaded go back to your file manager. Browse the file, select the ZIP file (recently uploaded named survey till now i suppose, if not rename it to survey), while the file is selected browse to top right corner and click on extract then again click on the OK button of popup window. Now at you will see a folder call survey.

if you see it VOILA you are done.

Step 5: Accessing the form

Go to your browser and type ddcyourddc.gov.np/survey (for eg: ddcdolakha.gov.np/survey) there you go your page, now click on DDC office ATOM and there is your form.

Step 5: Viewing the response

Go to your Google drive window there you should notice your_form_name(response) file there is your response.

About Author (MILANO)

This portal "ICT for Local Bodies" is written by various individuals - ICT Experts and ICT Volunteers working under MoFALD/LGCDP with an aim of integrating ICT at Local Governance. The author is this post is mentioned at the end of the article itself (with their Google+ profile alongside). Learn more about ICT4LB KMDB here.