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 below:

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.

Like this Post? Share
  • shah

    are u using yii 1.1.15?

    • Amit Sonkhiya

      Shah it’s Yii version 2.0

  • gtrennert

    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 ?

    • Amit Sonkhiya

      What did you try & what are you getting & what is written inside your controller action?

      If you want to remain private you can mail at support@fellowtuts.com

  • It´s possible to call the modal from Nav?

    • Amit Sonkhiya

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