Embed Forms Pro Survey Inline In Website

*** NOTE: ALL INFORMATION IS ACCURATE AT DATE OF PUBLISHING ***

Once you have your Forms Pro Survey created, you need to send the survey to people. One of the options is to embed it in to a website. Clicking on the Embed option from the Send Survey tab, you are presented with three options. One of them is Inline. Let’s look at how to embed a survey directly in to a page on your website.

Scroll down to the bottom of the page and click on Generate code. You can click on the Copy button to copy it to your clipboard.

Now go to your web page and paste it in where you want to display it on the page.

Now go and check out your page. It’s blank! Hmmm, something not quite right here.

After a quick Google search, this Microsoft documentation page provides further instructions on how to actually get the survey to display. It details creating a div container with which to determine where the survey will be displayed, rather than just using the code alone.

Paste in the following code directly beneath the code you already copied and pasted from the survey.

<div id="surveyDiv">
<script>
	 window.addEventListener('load', function () {
            renderSurvey("surveyDiv");
        }, false);
</script>
</div>

Now go and check out your survey again. Tada! Not quite. 🙁 – we can see that something related to the survey is attempting to be displayed, but the div container is much too small.

Replace the div id line with this, so that we are including the style for the height. Now check out your web page AGAIN.

<div id="surveyDiv" style="height: 800px">

Finally, it shows! So, you can see it’s not just as simple as copying and pasting in the code generated from the survey. We needed a few more steps. You might need to tweak the height slightly too, depending on the size of your survey, but you can see how to get started. From here your website visitors can complete an anonymous survey response.

Want to just watch how to do this? Check out the video below:

Leave a Reply

Your email address will not be published. Required fields are marked *