Placing Yii form and submit button in bootstrap 3 modal popup

Many developers fail in placing Yii form and submit button in bootstrap 3 modal popup in right way so either they compromise with the appearance of the modal or complaint that the submit button isn’t working.

Taking a login form as an example if everything is done in right manner then the buttons will appear in modal footer and the modal itself inside form tag and you will see a working form same as illustrated in image above.

Form and submit button bootstrap 3 modal popup

The issue:

If you placed the whole form inside modal body then you will lose the default appearance of buttons in modal footer and if you closed form with <?php ActiveForm::end(); ?> prior, making the modal footer (with form buttons) out of form widget then you will lose Login button’s functionality. Both type of compromised arrangements are mentioned below:

Form inside modal body:

Form inside modal bodyThe complete form widget is placed inside body of modal. This will work sure but appearance won’t be same as explained in bootstrap official website (modal footer, right aligned button and horizontal line are missing).


Buttons in modal footer but outside the form tag

This was the stupid thing I did first even I was aware that it will sure gonna happen something wrong. Moving buttons out of the form will appear good but leaving some extra ugly space above & below buttons. Furthermore your submit button will not work.

The Solution:

Placing Yii form and submit button in bootstrap 3 modal popup in right way require just a minor change: Just make the form wrap the whole modal window like this:

So here whole modal content is covered by Yii form widget. Also note that we have cleared <div class="form-group"> in modal footer to clear the unnecessary spacing around buttons. That’s the solution and it will also help you to place form in bootstrap 3 modal popup regardless of the platform you are using.

You Might Interested In


    1. Amit Sonkhiya says:

      Indeed possible,
      just put data-toggle=”modal” data-target=”.loginModal” in the navigation item which should pop the modal on click

  1. gtrennert says:

    Do you get work input errors on the form by staying in the modal form ?I have some problems in a similar situation – could you show controller action ?


Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.