Microsoft forms embed in bootstrap modal dialog not working

Question

I'm trying to embed a Microsoft Forms survey in a modal dialog. When a user clicks a button, I want a dialog box which loads the Microsoft Forms survey. When using the below code, instead of the actual survey, Microsoft Forms just displays a link. When I use the same embed code in a simple html file, the survey loads as expected instead of just a link. Any idea what the issue could be?

Note: The below code is written in a MVC view cshtml file.

<div class="modal fade" id="FormsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:700px;>
    <div class="modal-content">
        <div class="modal-body mb-0 p-0">
            <iframe width="640px" height="480px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAIYo0WdUNlhENkVDNktKV0RXVk1FRFJGWVhZUlZYQi4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
        </div>
    </div>
</div>

i couldn't be able to find anything wrong in your code as i can see the loaded form in modal when i executed your code — atomankion, Mar 09 '22 at 04:40
You loaded the form in modal-dialog? Because, only when loaded in dialog, I'm seeing this issue. If I change div class from "modal fade" to "embed-responsive embed-responsive-4by3", form is loaded as expected. — pradeep, Mar 09 '22 at 04:47

score 0 · Answer 1 · answered Mar 09 '22 at 04:51

Here is what i have done and i added output below

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#FormsModal">
  Launch demo modal
</button>
    <div class="modal fade" id="FormsModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:700px;">
    <div class="modal-content">
        <div class="modal-body mb-0 p-0">
            <iframe width="640px" height="480px" src="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAMAAIYo0WdUNlhENkVDNktKV0RXVk1FRFJGWVhZUlZYQi4u&embed=true" frameborder="0" marginwidth="0" marginheight="0" style="border: none; max-width:100%; max-height:100vh" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe>
        </div>
    </div>
</div>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

I tested your code in a simple html file in my machine, the form is not displayed for me like yours. I'm on latest Edge canary build. I can see you are using Firefox. I'm not sure if it is related to browser or something else. — pradeep, Mar 09 '22 at 05:00

score 0 · Accepted Answer · answered Mar 17 '22 at 12:14

0

This issue occurred because of form privacy settings. If the form is set to accessible for everyone, it loaded fine. If the form is set to "only people inside organization", the placeholder image with form link is loaded. This is because the person inside an organization should have signed-in already to answer the form. Otherwise, the form will lead to Microsoft account login page, only after successful login, form will appear.

answered Mar 17 '22 at 12:14

pradeep

175
1
13

Even if privacy set to everyone still a problem for me also the form worked if not in the modal. I also found that if I simply refreshed the page after first load then it worked fine. Firefox and Chrome. See what worked for me below. – jumptiger13 Jun 16 '22 at 15:28

score 0 · Answer 3 · answered Jun 16 '22 at 15:26

I read this:

"aknott replied to Nick Nigro ‎Jan 22 2022 01:58 AM According to this article https://learn.microsoft.com/en-us/dynamics365/customer-voice/embed-web-page forms need a minimum size of 350px by 480 px. As soon as one of those dimensions is smaller, it only displays the "cover page" and the link." Here: https://techcommunity.microsoft.com/t5/microsoft-forms/embed-a-form-using-modal/m-p/88368

So I created a custom modal wrapper and didn't use display: hidden to hide the modal but visibility. Simple example:

  <style>
    #myForm{
        position: fixed;
        width: 700px;
        height: 600px;
        margin: 5% auto;
        top:0px;
        left: 0;
        right: 0;
        z-index: 1000 !important;
        visibility: hidden;
    }
  </style>

    <div id="myForm" style="background:white">
    <div class="modal-content">
      <iframe  width="700px" height="660px" src="https://..." frameborder="0" marginwidth="0" marginheight="0" style="display:block; border: none; ;" allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen> </iframe> 
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary close" data-dismiss="modal" aria-label="Close">Close</button>
      </div>
    </div>
    </div>

Microsoft forms embed in bootstrap modal dialog not working

3 Answers3