How to Embed a Google Form into a Website [Guide 2023]

Google Forms allow us to make surveys, forms and questionnaires online. It also allows us to conduct those surveys and analyze the results in the best manner. It not only saves users’ precious time but also organizes the responses obtained. And making a summary or report takes no manual effort at all. Considering such benefits, is it not better to collect information from the users using Google Forms rather than creating a separate portion in a website for taking user recommendations? Of course, it is possible to do it both ways. But using Google Forms takes no effort at all. Website owners would love to have a Google Form embedded to their websites rather than organizing the data obtained by the websites’ user recommendation section themselves.

Also, it makes the recommendation giving process easy for the users as they do not have to visit a separate site because of it. If Form was not being embedded, then the users might need to go to the specific link of Google Forms and fill the form there and return to the website. This embedding saves a lot of precious time for users.  In this article, we will demonstrate how to embed a Google Form into a website in an easy and step by step manner.

What does it mean by embedding a Google Form into a website?

By embedding, we mean ‘to integrate’. Embedding a Google Form into a website actually means to integrate the Google Form into a website such that the Google Form appears inside the website. Form can be filled from the website without redirecting to Google Forms link. It appears as a part of the website and there is no need to open the form as a separate link inside the browser. It saves the redirection time of users. And also, if websites need to collect some data, it can be collected through the forms easily.

Why do we embed a Google Form into a website?

Anyone may need to add a Google Form to their websites due to the following reasons:

How to embed a Google Form into a website?

Let us consider a simple scenario where we want to get viewer’s recommendations or feedback for our website. Here, we are considering a simple website created using ASP.net along with MVC. This website contains the pages as ‘views’ in it. The website is all about article writing and hence it would refer to the ‘Viewers’ instead of ‘Customers’. First of all, we will create a viewer’s recommendation form and proceed on how to embed it in our website.

Make a Viewer Recommendation Form

Go to the Google Forms website. It will give you multiple templates already available for use. Click on Template Gallery to view and choose the appropriate template as:

We will choose this template from the ‘Work’ section which is named ‘Customer Recommendations’. This template is very much closer to our requirement, i.e. Viewers’ Recommendations. 

This is how the template looks like:

Our form is ready. We can customize it however we want.

Copy the link for Form Embedding

We will simply change the Form Title to ‘Viewers Feedback’ as our purpose is to serve the recommendations from our viewers. And click on the ‘Send’ icon on the top right corner of the form as:

It gives us a pop-up for ‘Send Form’ as:

By clicking on the ‘Angle Brackets’, we get the Embed HTML as shown:

Click on the Copy button to copy the link as:

Open the website to embed the Form

Our website is a local ASP.net website. We can run it with the help of Visual Studio 2019. Firstly, we will run the website and then find out the page where we would like to embed the form.

Step 1: Open the website.

This is how our website looks like.

Step 2: Login to the website as a Viewer to see privileged views of the website.

Now, we will login as a Viewer to see from the viewer’s point of view where we should embed the form.

We will click on the Login button, enter our Username and Password and then hit the Login button as:

Now, we are logged-in as a viewer.

Step 3: Go to the ‘Contact Us’ page of the website.

In the footer of the website, we see the Contact Us section. Let us go to this section to see if we want to embed our form here.

This is how the Contact Us page looks like:

As this page is about contacting us for suggestions and improvements through different channels, e.g. Facebook, Twitter, etc. So, how about we add the Form here, so that they can contact us with ease while staying on the website.

Embed the Google Form in the designated page of the website

For embedding the form, we will open the code of the website. Now, we need to find the page ‘Contact Us’ so that we can embed the form there. This is the code for the ‘Contact Us’ page:

We will simply paste the Embed HTML link copied from the Google Forms here after placing a ‘Line Break’ using <br/> as:

This is how the embedded form looks like:

The form is embedded but it does not look too good or we could simply position it better for it to look amazing and blend in our page.

Position the Embedded Form inside the webpage

As the embedded form is lacking aesthetics, we will try multiple positions and give it a good position to provide a better view to the users.

Firstly, let us  try placing both the Contact Us links and the Embedded Form into 6 column positions each. For this, we will simply use a <div> tag and class of ‘col-lg-6’ for both. This is how the code looks like.

Now, reload the website and this is how the Contact Us page looks like:

Well, it could be better if the column length of the Form section could be increased and it came on the left side and not the right side. Let us try it out using 8 columns for the form and 4 columns for the contact links. This is the code.

Reloading results the webpage in this:

It looks much better than the previous one but let us remove the scroll bar alongside the form as it is disturbing our view. We will provide 100% width and increase the height inside the copied Embed HTML code as:

This is how the page looks like.

Come to think of it, we do not really need this part mentioning ‘Contact Us’ on the top of the webpage. So, we will just comment it out as:

Finally, our website looks like this:

This is our desired look and so the embedding and the positioning is done. Our form is ready to be filled by the viewers.

Fill the Embedded Form as a Viewer

In order to better understand the working of our form, we will fill it out as a viewer and check if the Responses section inside Google Forms gives us its summary and analytics. Because, at the end of the day, it is the Responses record and reports that we will be using in order to improve our website.

Let us fill a response through our website and click on Submit button as:

Once the form is submitted, we can see the Thank You message on our website as we used to see on the Google Form website.

The form has been submitted. Now, we will go back to the Google Forms as the form owner and view the response in the Response section of the Google Form.

Check the Response in Responses of Google Forms

Let us check if the filled response through our website is being recorded by Google Forms. We will go back to our form as a form owner. And click on the Response tab displayed in the top middle section of the form as:

We get the Response section as:

We can see that our submitted response through the website is being recorded. So, our Form embedding was a success!

This way, we can embed Google Forms in our websites when we want to collect some specific data from our viewers or customers. This way, it is easy to fill the form. And also, it is much more convenient than making an HTML form ourselves and making connections with a database to store this data. And also, we do not need to do any reporting ourselves as Google Forms allows us to make reports with a matter of a few clicks.

Important Notes

Frequently Asked Questions

Do you need to be the owner of the Google Form to embed it in your website?

No, it is not mandatory for one to be the owner of the Google Form. As long as the Google Form Owner shares the Google Form Embed HTML link, one may use that link to embed the form to the website.

Can the Same Method be Used to Embed a Google Form into an Email and a Website?

Yes, it is possible to integrate a Google form in an email and a website using the same method. By generating an embed code from Google Forms, you can directly insert it into an email’s HTML or paste it into a website’s source code to seamlessly display the form to users. Integrating google form in email and website streamlines data collection and enhances user experience.

Can I embed anyone else’s Google Form in my website?

Yes, you can. Ask the owner for the Embed HTML Link and add it to your website.

Do I need a specific web programming stack to embed the Google Form?

No, an Embed HTML link allows us to embed the form into the website. Although we used ASP.net to embed the form, we can use other stacks for the purpose as well. The working remains the same.

Can we embed a Google Form that has a File Uploading question in a website?

No, Google Forms will not allow you to embed a form which is collecting files into a website. When you go to copy the Embed HTML Link of such forms, it gives our the statement as:

As we cannot copy the Embed HTML Link of such forms, we cannot embed these forms into the websites.

Conclusion

In this article, we studied that embedding the Google Form in a website not only allows us to fill out the form without any redirections but also allows us to use the Google Forms report analysis and data collection services. We also discussed how we can embed a Google Form into a website using an ASP.net application in step and step manner. We discussed the following in detail:

• Make a Viewer Recommendation Form
• Copy the link for Form Embedding
• Open the website to embed the Form
• Embed the Google Form in the designated page of the website
• Position the Embedded Form inside the webpage
• Fill the Embedded Form as a Viewer
• Check the Response in Responses of Google Forms

Thanks for reading!