Embedding Forms and Surveys on a Page

Embedding forms, surveys and polls on a page allows you to add your own text and images along with the activity. If you just want the survey or poll by itself, just follow the guide here to add it as a web link instead.

When you create a form or poll etc online, you’ll be offered an embed code, to embed it on a website. However, the embed code for your mobile app works a little differently.

To demonstrate, we’ll use Surveymonkey as an example. Rather than getting an embed code, you’ll simply want to take the direct web link for your poll or survey:

In Surveymonkey, when you have created your survey, navigate to the “Collect Responses” screen:

 

 

In this screen, you will need to create a new collector for your survey. On the Collect Responses screen, choose ‘Web Link’ as a new collector:

Setting that aside for a second, copy everything from the below embed code in to an HTML module on a page:

 

 

<!DOCTYPE HTML>
<html>
<head>
<title>Survey Embed</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>body { margin: 0; }</style><style>
.tabweb-container
{ overflow:scroll; }
</style></head>
<body>
<div
class="tabweb-container"><iframe
src="WEB LINK GOES HERE"
width="100%" height="1500px"
frameborder="0" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe></div>

</body>
</html>

 

Now copy your web link for your form, and copy it in to the HTML code where you see “WEB LINK GOES HERE”. Leave the ” ” ¬†at the start and end of the link in place in the code.

Your HTML module should now look like this:

Now press Save and Publish, and your poll, survey etc will appear embedded within the page.

 

What if your form looks ‘cut-off’ and the submit button isn’t visible?

If your form is more than just a few fields, using the default HTML code above may cause your form to be cut off at the bottom, with the submit button not visible to the user. If this happens, simply adjust the ‘height’ value in the code in your HTML module. The default height is set as 1500px. Try increasing the value and clicking Save and Publish each time until your entire form and the submit button is visible.

After adjusting the height, our full embedded form with the submit button is now visible: