Microsoft forms embed in bootstrap modal dialog not working

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>

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.