Drupal 7 Modal Core Forms and Modal Entity Forms using ctools modal

Drupal 7 Modal Core Forms and Modal Entity Forms using ctools modal

Some days ago we had the requirement to display some entityforms and other Drupal Core forms like the login in modal windows.

The second requirement is easy to solve. Many modules like colorbox.module, lightbox.module and others solve this already.

The first requirement is a bit harder, because the form handling of entity forms has to be consistent. It's not the only aim to display the initial form in a modal but also display possible errors on submission.
Furthermore a consistent styling of the different form styles would be nice.

So how can we solve this?

After searching and testing for a while I found a robust solution. It consists of the following two modules, which solve our needs in combination:

The modal.module provides a robust solution to display

  • nodes
  • node edit
  • node add
  • entity form

in ctools modal windows.

The modal_forms.module allows to

  • easily set the sizes for different ctools modal variants (small, middle, large)
  • provides a nice default styling
  • display the supported forms as modal:
    • Log in (modal_forms/nojs/login)
    • Request new password (modal_forms/nojs/password)
    • Create new account (modal_forms/nojs/register)
    • Contact (modal_forms/nojs/contact)
    • Comment (modal_forms/nojs/comment/reply/%node)
    • Webform (modal_forms/nojs/webform/%node)

But that's not yet everything

Now we still have to setup the modules.
For modal_forms.module that's easy. It provides a simple UI admin form to setup everything.

modal.module doesn't provide a UI. Instead you have to manually set the hyperlinks to the webform as described in the in-code documentation of the single .module files or shortly described here: https://drupal.org/node/2166419

To make it a bit easier for you:
If you want to display a webform in a ctools modal, simply use a link like this:

  1. <a href="modal/entityform/my-entityform-identifier/nojs/0" class="ctools-use-modal ctools-modal-modal-popup-small">Callback</a>

The first class ctools-use-modal is responsible for using a modal. The second class ctools-modal-modal-popup-small adds the sizes and styles from the modal_forms.module.

Alternatively you may use .modal-popup-middle or .modal-popup-large.

One more note on modal entityforms

For me the module initially didn't work and displayed Server Error 500.
The reason is described in this ticket I created: https://drupal.org/node/2207747

I hope this entry helped you. Feel free to leave a comment :)

Comments

Thanks a bunch.

This is the most useful article on modal forms for node or content type editing I came across. I wanted a drop in solution which is exactly what this article provides.

That was exactly what I was

That was exactly what I was looking for! Thank you for taking some time to share it.

Post new comment

The content of this field is kept private and will not be shown publicly.

More information about formatting options