MS Forms: embedding a form into a web page

Question

I created a web page and embedded a form using the following code:

<iframe width="480px" height= "250px" src= "https://forms.office.com/Pages/ResponsePage.aspx?id=-40iOkfGy0SINXsgYX_JBjNn_CDkQb9DihTJ2w8VUaNUMDNDUFE1Tks4UlAxWjMzMUxOU0hEOUJWVi4u&embed=true" frameborder= "0" marginwidth= "0" marginheight= "0" style= "border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>

But, it displays the following instead. Is there a way to display the form on the page. Please help

Answer 1

Removing all the non essential attributes so that it looks something like this:

<iframe width="100%" height= "100%" src= "https://forms.office.com/Pages/ResponsePage.aspx?id=abC........." style= "border: none; width:100%; height:100vh"> </iframe>

Also make sure the iframe containing/parent tag's width and height is big enough to allow the form to be displayed. This usually happens when the width or height is to small. The form I used had a min-width and min-height of 320px. Setting the parent tag to have a min-width and min-height of 320px solved the problem.

Sample:

<div style="width:100%; height:100%; min-width:320px;min-height:320px">

<iframe width="100%" height= "100%" src= "https://forms.office.com/Pages/ResponsePage.aspx?id=abC........." style= "border: none; width:100%; height:100vh"> </iframe>

</div>

Answer 2

Hello, I know it is a bit late now, but try chaining the height of the iframe to be more then 320px. Seems the min width and height is 320px. Anything less, the green page is displayed. In your case height= "250px" is the cause.