Book page

Embed a Form

Open Social
Open Social Open Social • 1 December 2017

This page will explain how to embed a form created with different software into your website.

We will use a google form as an example. Google forms are used often nowadays and are an easy tool for creating surveys, questionnaires, or polls.

The first step is to create the form in the software. Head over to https://docs.google.com/forms/ and create your form.

When you are done creating your form, you will see a send button on the top right corner. When you click, the send link navigation has the embed ( < > ) option on it. Select the code using the embed option and copy it to your clipboard.

Now open the page on your platform where your table will be placed. Open the page and click edit. When you are on the edit page, click the Source button in your editor. Now paste the code from your clipboard. It will look like this:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5pvCCiGom3Sb7nTBaFEL3UTjypyZZI5LYSI_0sKZo2uGQpg/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

In this code, you need to replace the width value with 100%. So in this example width="760"  becomes width="100%". By changing this we ensure the form looks good on every screen size.

That's it! You can leave the source view of your editor and it will give you a preview of your form. Add some text above or below the form and save your page.

Note: You can also change the height of the form but bare in mind it should never be a percentage.

Final result: