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">
	 window.addEventListener('load', function () {
        }, false);

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:

Check out the latest post:
Part 4 - Creating Additional Filtered Views Of Website Data

This is just 1 of 207 articles. You can browse through all of them by going to the main blog page, or navigate through different categories to find more content you are interested in. You can also subscribe and get new blog posts emailed to you directly.

5 thoughts on “Embed Forms Pro Survey Inline In Website

  1. Hi Megan, thanks for this tip! Life saver!
    Do you know how we can make the height auto adjust so there is no scroll bar?

    1. Hi Michael, I’m not sure you can. I don’t believe you can dynamically change the height of the form, which means you would need to set the height big enough to always display the full size of the form. You can try with the compact version of the code (which you will find in the options for embed within Forms Pro for your survey). That will make it smaller also, so the height could be set to smaller.

Leave a Reply

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