Styling Webform Blocks

Mike C's picture
Mike C

Interested in how we work? Find out what’s good to know when working with Ixis.

Twitter Bird
Keep up to date with us on Twitter.
IxisIT AvatarFollow us @ixisit

We've had a lot of emails about our simple but effective webform block module over the past year. It's great to know it has filled a gap for a lot of Drupal users out there.

One of the common questions we keep getting is about how we styled up the webform to look like our Ixis contact form in the footer of all our site pages.

The answer is simple: adding container tags around sets of the form fields is all you need! This is achieved by adding some additional form API attributes called #prefix (before the content) and #suffix (after the content).

Developers might instantly think hook_form_alter() is the best solution, but that means possibly creating an extra module to implement the required PHP code. The good news is you can do it all from your themes template.php file!

Because webform block module is simply embedding a normal webform node in to a block you can use Drupals standard forms API theme hook called hook_preprocess_webform_form().

The preprocess theme function will be getting applied to all webforms, however we really only want to style one of our webforms like this. In the theme function we check what the webforms node id is (in the case of Ixis it's 170) before proceeding to amend the $form structure. You'll need to change the node id code $vars['nid'] check to match your webform node id.

Next up you'll need to change the names of the form fields which are to be wrapped in the <?php <div?> containers. If you're unsure check your webform edit page and identify the names you gave to your fields.

Here's a peek at our webform preprocess function; don't forget to change the function name to match the name of your theme!

  1. function ixis_preprocess_webform_form(&$vars) {
  2. // Code taken from the webform.module
  3. if (isset($vars['form']['details']['nid']['#value'])) {
  4. $vars['nid'] = $vars['form']['details']['nid']['#value'];
  5. }
  6. else {
  7. $vars['nid'] = $vars['form']['submission']['#value']->nid;
  8. }
  9.  
  10. // The sitewide webform block needs special layout treatment xx
  11. if ($vars['nid'] == 170) {
  12. $vars['form']['submitted']['your_name']['#prefix'] = '<div class="messagefields">' . $vars['form']['submitted']['your_name']['#prefix'];
  13. $vars['form']['submitted']['telephone']['#suffix'] = '</div>' . $vars['form']['submitted']['telephone']['#suffix'];
  14. $vars['form']['submitted']['enquiry']['#prefix'] = '<div class="messagebody">' . $vars['form']['submitted']['enquiry']['#prefix'];
  15. $vars['form']['submit']['#suffix'] = '</div>';
  16. }
  17. }

Posted in:

Comments

Very good to know ! Thanks for sharing this useful tip

I,m building my own website right now and I'm starting to learn Drupal and PHP(still got a long way to go...) Anyways, I couldn't get this to work, I really can't see why it's not working, everything is still all alligned vertically...

Heres my code, as you can see, I'm french, so my fields name are a litte different, i know they're spelled correctly, the nod id is indeed 9 and I'm using Acquia_slate as the the theme right now...

Do i have to change something as the div class or do i leave it that way, that, I couldn't figure it out...

As I said, I'm a beginner, if you need more info to help me out(which I'm sure you do...), pls tell me what info you need, as I said, I couldn't figure this out on my own...

Thanks

<?php
function acquia_slate_preprocess_webform_form(&$vars) {
  
// Code taken from the webform.module
  
if (isset($vars['form']['details']['nid']['#value'])) {
    
$vars['nid'] = $vars['form']['details']['nid']['#value'];
  }
  else {
    
$vars['nid'] = $vars['form']['submission']['#value']->nid;
  }
 
  
// The sitewide webform block needs special layout treatment xx
  
if ($vars['nid'] == 9) {   
    
$vars['form']['submitted']['titre']['#prefix'] = '<div class="messagefields">' $vars['form']['submitted']['titre']['#prefix'];
    
$vars['form']['submitted']['adresse_courriel']['#suffix'] = '</div>' $vars['form']['submitted']['adresse_courriel']['#suffix'];
    
$vars['form']['submitted']['description']['#prefix'] = '<div class="messagebody">' $vars['form']['submitted']['description']['#prefix'];
    
$vars['form']['submit']['#suffix'] = '</div>';
?>

Sorry, there was a problem with the code syntax, here's the real one I got... Feel free to delete this comment afterward...

<?php
function acquia_slate_preprocess_webform_form(&$vars) {
  
// Code taken from the webform.module
  
if (isset($vars['form']['details']['nid']['#value'])) {
    
$vars['nid'] = $vars['form']['details']['nid']['#value'];
  }
  else {
    
$vars['nid'] = $vars['form']['submission']['#value']->nid;
  }
 
  
// The sitewide webform block needs special layout treatment xx
  
if ($vars['nid'] == 9) {   
    
$vars['form']['submitted']['your_name']['#prefix'] = '<div class="messagefields">' $vars['form']['submitted']['your_name']['#prefix'];
    
$vars['form']['submitted']['telephone']['#suffix'] = '</div>' $vars['form']['submitted']['telephone']['#suffix'];
    
$vars['form']['submitted']['enquiry']['#prefix'] = '<div class="messagebody">' $vars['form']['submitted']['enquiry']['#prefix'];
    
$vars['form']['submit']['#suffix'] = '</div>';
?>

it's right.
<?php
function acquia_slate_preprocess_webform_form(&$vars) {
// Code taken from the webform.module
if (isset($vars['form']['details']['nid']['#value'])) {
$vars['nid'] = $vars['form']['details']['nid']['#value'];
}
else {
$vars['nid'] = $vars['form']['submission']['#value']->nid;
}

// The sitewide webform block needs special layout treatment xx
if ($vars['nid'] == 9) {
$vars['form']['submitted']['your_name']['#prefix'] = '' . $vars['form']['submitted']['your_name']['#prefix'];
$vars['form']['submitted']['telephone']['#suffix'] = '' . $vars['form']['submitted']['telephone']['#suffix'];
$vars['form']['submitted']['enquiry']['#prefix'] = '' . $vars['form']['submitted']['enquiry']['#prefix'];
$vars['form']['submit']['#suffix'] = '';
?>

I am using a Webform node as a block in a Drupal 7 installation. I have modified the function above, but the styling doesn't seem to be working. Do I need to use the block ID (bid) instead of the node ID (nid)?

<?php

function help_home_preprocess_webform_form(&$vars) {
  
// Code taken from the webform.module
  
if (isset($vars['form']['details']['nid']['#value'])) {
    
$vars['nid'] = $vars['form']['details']['nid']['#value'];
  }
  else {
    
$vars['nid'] = $vars['form']['submission']['#value']->nid;
  }
 
  
// The sitewide webform block needs special layout treatment xx
  
if ($vars['nid'] == 85) {   
    
$vars['form']['submitted']['name']['#prefix'] = '<div style="float:left; width: 100px; position:relative; padding-right:10px;">' $vars['form']['submitted']['name']['#prefix'];
    
$vars['form']['submitted']['phone_number']['#suffix'] = '</div>' $vars['form']['submitted']['phone_number']['#suffix'];
    
$vars['form']['submitted']['message']['#prefix'] = '<div style="float:left; width: 100px; position:relative;">' $vars['form']['submitted']['message']['#prefix'];
    
$vars['form']['submit']['#suffix'] = '</div>';
  }
}

?>

Post new comment

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