Bootstrap 5.3 Scrollable Modal with Form in body and submit button in footer

Question

I am trying to create a scrollable modal dialog with a form in the modal-body. It is a long form, vertically, so I would like to utilize the modal-footer section to house the submit button since it stays stationary when scrolling the form/body.

I am using a straight forward modal structure like this:

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <div class="modal-body">
        ... FORM CONTENT ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Understood</button>
      </div>

    </div>
  </div>
</div>

The problem comes in when I try to insert the <form> and </form> tags. If I put <form> before modal-body and I put </form> after modal-footer, it breaks the static nature of the footer as well as the scrollable nature of the body.

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">

      <form action=".....">
        <div class="modal-body">
          ... FORM CONTENT ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Understood</button>
        </div>
      </form>

    </div>
  </div>
</div>

I understand that I could keep the form itself contained within modal-body and use a standard button outside of the form in order to submit the form via javascript, but I would prefer to keep the button inside the form so the form submits when enter is pressed.

I've also tried moving the form tags around the .modal div, around the .modal-dialog div and around the .modal-content div and each time it breaks the modal in a different way.

I have reconstructed this issue here: https://codepen.io/JayblesG/pen/MWRjvOx

Has anyone had success in accomplishing something like this?

Answer 1

It seems to work fine if you use modal-content as the <form>...

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <form class="modal-content" action="/echo" method="POST">
            <div class="modal-header bg-secondary fs-5" id="staticBackdropLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
                    <label for="floatingInput">Email address</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                    <label for="floatingPassword">Password</label>
                </div>
            </div>
            <div class="modal-footer bg-secondary">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Understood</button>
            </div>
        </form>
    </div>
</div>

https://codeply.com/p/qFI1p5Dh27

This way you can use the HTML form submit button.