0

I am looking to style a webform that I have with the drupal webform module, but i am having a little bit of an issue. I would like to style the form into 2 columns and I am assuming the best way to go about this would be to throw the content into 2 div separate div tags. I have looked around and came across How do I theme a webform?.

I am using the following line in my file.

<?php print drupal_render($form['submitted']['name']);`

Unfortunately, no matter what I try, I can't seem to get the new webform-form-nodeid.tpl.php to work. They say the file should be created as webform-form-36.tpl.php (where 36 is the node ID, in my case) and that I should put it in my custom theme directory. I have done this and had no luck. I have also tried placing it in the template directory for the webform module, but it didn't work.

Does anyone have any idea on how to help me?

I also found that Drupal 7 looks for two hyphens instead of one. I tried renaming the template file webform-form--36.tpl.php, but it didn't have any effect.

I was able to specify the specific node by changing the filename to node--36.tpl.php, but I still feel like there should be a way doing this with the webform name included. Does anyone have any idea?

Please note that I know I was using 36. I have since then changed to 102.

screenshot

  • A webforms name may change if a form author changes the webform name -- but you could make Drupal scan for TPL files for webforms based on their title. You would add a template file suggestion via hook_theme I believe. Careful though, Drupal uses NIDs for the suggestions because they shouldn't change over time. – tenken Jan 21 '14 at 21:08
  • According to various documentation within the webform module, [webform-form.tpl.php] may be renamed "webform-form-[nid].tpl.php" to target a specific webform on your site so if you have copied that file to your theme directory and cleared your caches, it should work. – Jimajamma Jan 21 '14 at 21:24
  • @Jimajamma - I have tried that as per my post above and unfortunately it does not seem to work for me... – scapegoat17 Jan 21 '14 at 21:27
  • 1
    Then perhaps given that node--36.tpl.php is "working" for you you are confused as to what this webform template will actually format. It won't format the node, but rather just the form inside that node. So, if all you have for example is a body and/or some "normal" fields, they themselves will be formatted with node*tpl.php. But, if you click on the webform tab and add some form elements, then the resulting form itself will be formatted with webform-form*.tpl.php. – Jimajamma Jan 22 '14 at 0:27
  • 1
    But yes, if the node's nid is 102, then webform-form-102.tpl.php would be template used to theme the form inside node 102 (which would use node--102.tpl.php as well if it existed). And yes, while out of band here on DA, imho webform should be using webform-form--102.tpl.php :) – Jimajamma Jan 22 '14 at 16:34
3

What I did for one of my client in order to get the webform in two columbns, was to create two "Fieldset", containing the fields for column 1 and column 2.

Then with css, I added to my webform this property :

.webform-component-fieldset {width:50%; float:left;}

Of course, there are other ways of doing it, like display:inline-block, and maybe you need to be more precise with the css so you don't mess up other webforms.

And if you don't want the title of the fieldsets, you can do a simple:

.webform-component-fieldset legend {display:none;}

I think that's the easiest way of doing it.

  • Thanks for the Fieldset idea. I had been fiddling around for hours already trying to add wrapper divs in item prefixed and postfixes. – cdonner Jan 13 '15 at 23:22
3

This could probably be used for any theme generated output.

This is using the Devel module.

Find the hook required:

/**
 * Implements hook_preprocess().
 */
function YOURTHEME_preprocess(&$variables, $hook) {
  dpm($hook);
}

For web forms hook = webform_form

Implement this function:

/**
 * Implementation of hook_preprocess_HOOK().
 */
function YOURTHEME_preprocess_webform_form(&$variables) {
  dpm($variables);
}

In variables you will find the key "theme_hook_suggestions".

Add what you would like your template to be called (use underscores).

Eg:

$variables['theme_hook_suggestions'][] = 'webform_form_' . $variables['nid'];

Find the default theme output in the Webform module:

all/modules/webform/templates/webform-form.tpl.php

Copy this to your theme directory ( I used folders to keep it organised).

all/themes/YOURTHEME/templates/webform/webform-form.tpl.php

Rename file to your suggestion (convert underscores to dashes):

all/themes/YOURTHEME/templates/webform/webform-form-NID.tpl.php

Flush Caches

Breakup the form as needed (using twitter bootstrap v3 classes for columns in the example below):

<?php
  // Print out the progress bar at the top of the page
print drupal_render($form['progressbar']);

  // Print out the preview message if on the preview page.
if (isset($form['preview_message'])) {
  print '<div class="messages warning">';
  print drupal_render($form['preview_message']);
  print '</div>';
}

?>

<!-- Left Column -->
<div class='col-sm-6'>
  <?php print drupal_render($form['submitted']['contactus_first_name']); ?>
  <?php print drupal_render($form['submitted']['contactus_last_name']); ?>
  <?php print drupal_render($form['submitted']['contactus_email']); ?>
  <?php print drupal_render($form['submitted']['contactus_contact_number']); ?>
</div>

<!-- Right Column -->
<div class='col-sm-6'>
  <?php print drupal_render($form['submitted']['contactus_today_i_would_like_to']); ?>
  <?php print drupal_render($form['submitted']['contactus_message']); ?>
</div>

<!--Rest of the form-->
<div class='col-xs-12'>
  <?php print drupal_render($form['submitted']); ?>
  <?php print drupal_render_children($form); ?>
</div>
1

have you seen the community documentation about theming webforms with a preprocess function? https://drupal.org/node/1157306

example to reformat some elements to be on one line:

function garland_preprocess_webform_form(&$vars) {
  drupal_add_css(drupal_get_path('module', 'webform') . '/css/webform.css');
  drupal_add_js(drupal_get_path('module', 'webform') . '/js/webform.js');
  $vars['form']['submitted']['name']['#prefix'] = '<table border="0"><tbody style="border: 0px;"><tr><td>';
  $vars['form']['submitted']['name']['#suffix'] = '</td>';
  $vars['form']['submitted']['phone']['#prefix'] = '<td>';
  $vars['form']['submitted']['phone']['#suffix'] = '</td>';
  $vars['form']['submitted']['city']['#prefix'] = '<td>';
  $vars['form']['submitted']['city']['#suffix'] = '</td></tr></tbody></table>';
  if (isset($vars['form']['details']['nid']['#value'])) {
    $vars['nid'] = $vars['form']['details']['nid']['#value'];
  }
  elseif (isset($vars['form']['submission']['#value'])) {
    $vars['nid'] = $vars['form']['submission']['#value']->nid;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.