Microsoft forms embed in bootstrap modal dialog not working

Question

Microsoft forms embed in bootstrap modal dialog not working

778 Views Asked by pradeep At 15 April 2025 at 05:37

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>

Original Q&A

There are 3 best solutions below

atomankion On 09 March 2022 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

jumptiger13 On 16 June 2022 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>

**pradeep** · Accepted Answer

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.

Microsoft forms embed in bootstrap modal dialog not working

There are 3 best solutions below

Related Questions in MODAL-DIALOG

Related Questions in BOOTSTRAP-MODAL

Related Questions in EMBED

Related Questions in MICROSOFT-FORMS

Trending Questions

Popular # Hahtags

Popular Questions