Displaying Webform as block

Drupal has a type of content called a block. Blocks are typically displayed in one of the sidebars of a site, although it is possible to place them in most regions of our theme.

In a very general sense, blocks are chunks of discreet content that are meaningful in their own right, but separate from the main content of a particular page. A familiar example of a block is where we log in to our website.

Displaying Webform as block

Drupal blocks are highly configurable entities, to the extent that we may specify on which pages a block should show, or the sequence in which multiple blocks are displayed in a particular theme region. We can discover more about blocks in the Drupal documentation at http://drupal.org/documentation/modules/block.

How to do it...

On the Webform Form settings page, we have the option to make our form available as block content.

  1. Let us check the option Available as block under ADVANCED SETTINGS and then click on the Save configuration button.
  2. Now let us click on Structure in our menu bar and click on Blocks. Scrolling down towards the bottom of the page we find our Webform listed among the disabled blocks.
  3. Our form is available as a block, but is considered to be disabled because we have not yet assigned it to a region.
  4. Let us click on the configure link that appears next to our form's name so that we can activate it as block content for our site.
  5. Enter the text Webform as Block into the text field under Block title and then select the Form only option under Display mode.
  6. Let's now select Sidebar first under our site's default theme and then click on the Save block button at the bottom of the page.
  7. When we now click on the Home icon in the menu bar, we will see that our Webform appears in the right-hand sidebar of our site (although it is spilling over into the main content area).
How to do it...

How it works...

The Webform module makes it possible to render our forms as either traditional Drupal nodes or as blocks. If we were making a custom Contact Us form, for example, that has only three or four fields, it seems wasteful to have this tiny form occupy an entire page. Such forms are possibly best placed in a block where they can be accessed directly from almost anywhere on our site because, as blocks, they are independent of the node content area of our site.

It is recommended to use a fluid width theme when displaying our forms as blocks in sidebars. Fixed width themes can have difficulty displaying forms neatly in sidebars (as we saw previously). However, this can be overcome by tweaking input field widths and so on.

There's more...

We have a few options that affect how our form will display and behave when we use it as a block.

Display mode

When we initially created our Webform we filled out a Body field. The text we entered here displays above the actual form portion of our Webform, that is, above that part of the page where our fields start being rendered.

When we opt to display our form as a block we have three display options to choose from in our block configuration:

  • Form only: Displays only the form input fields portion of the Webform.
  • Full node: Displays the Body text as well as the input fields portion of the Webform.
  • Teaser: Displays only the Body text or a shortened version of it (depending on site settings). This option introduces a Read more link which would redirect our users to the Webform node itself.

Which of these we choose to implement would depend very much on our reasons for having the form available as a block. For a miniature contact form it would probably serve us to display the form only, whereas a more complicated form should probably use the teaser option to attract interested parties to our form proper.

Display mode

Show all Webform pages in block

This option only applies to multipage forms. Webform offers us the choice of having all of the different pages of our multipage form display within the block or only the first page.

If we leave this option unchecked then our form users will be redirected to the Webform node when they click on the Next page button. They would fill out the fields on page one and be redirected to the full node displaying page two.

When we check this option, the main content area of our site will not change as our users progress through our various form pages.

Block form error messages

It seems somewhat counter-intuitive that Webform error messages arising from forms displayed as blocks should display above the main page content. On the face of it, we would expect these error messages to appear in our Webform block.

The reason for these messages appearing above the main page content is very simple: like all good modules, Webform uses the core Drupal error messaging system. Most themes are set up to render Drupal error messages at the top of the main content area. The unexpected behavior is theme driven, not an inadequacy in Webform.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset