Webform Panels Integration

Webform Panels Integration

A while ago we had a project we were working on which we had to implement a sort of page builder for landing pages.

As one of the requirements was the ability to shuffle blocks of content around we immediately though of Panels.

The overview

The idea behind the landing page builder was simple:

  • Create a custom content type 'landing page' that would serve as the placeholder for the panel
  • Use panelizer to have that node type be a panelized node
  • Create a set of bean types that could be placed into the panel
  • Set permissions in place so that site managers could only place in the panel the specified bean types and webforms.
  • Create a couple of panel layouts that the site managers could use to create their pages

This was sounding good, however there was one catch: the webforms.

The problem

The problem is that webforms are not a "thing" in Drupal, they are not a node type, they are not an entity, they get "attached" to nodes.

This means that any node type can be a webform. In fact in this particular website, most node types could have webforms attached as that was part of the requirements.

While we can give access to site managers to just add any node to the panel, we wanted site managers to add 'only webforms'.

The Webform Panels module

What we wanted was to create a module that allowed us to have a views content type called 'Webform' with subtypes being the content types that have nodes with webforms attached to them.

Because Panels allows permissions per 'views content type' we can define specific permissions for our webform pane. For example if we wanted to create a panel where site managers can only add webforms we could do so easily. Perfect!

The Webform Panels module was born and you can find it here in drupal.org

How to Install & Use

The first thing to do is download the Webform Panels module from drupa.org and enable it on your website.

Then when you go to your panel and add content you will the the new webform pane available:

Webform Panels Image 1

Notice that when you click on the 'Webform' pane you will get presented with a list of subtypes. These will be the content types that have currently nodes with webforms attached.

Once you choose a subtype you will see the subtype edit screen.

Webform Panels Image 2

In the edit screen you can override the title of the webform on the panel as you can for any other panel content item.

You will also have a select box with all the webforms you can embed in the panel and you can choose a view mode to use for the node you choose if more than one is available.

Once you save you will have your webform in your panel!

In Place Editor

Combined with Panelizer and the In-Place Editor that panels provides you get a really flexible and user friendly experience that empowers site managers to add webforms to your panel page.

Webform Panels Image 3Webform Panels Image 4