How do I tie a Drupal template to a webform with multiple environments?

Question

Disclaimer: I inherited a Drupal 7.44 site with no experience in Drupal at all.

The business is trying to make a new webform and they want it to look exactly like an existing one. After looking around I found that the webform has a template tied to it. From the docs it seems I'm supposed to create more template files with the format webform-form-[nid].tpl.php where [nid] is the webform node id.

We have multiple environments that all changes must go through - dev, test, and finally prod. Wouldn't the node id be different in every environment for newly created webforms? Also, if I want to apply the same template to multiple webforms, do I really need to make multiple identical template files?

I also found some CSS styling for the existing webform and it looks like .webform-client-form-25 button.webform-submit and such. That 25 is the node id. I have little CSS experience, but this feels really bad. I don't want to copy blocks of CSS, changing node ids over and over. What's the proper way to assign generic, reusable CSS classes to webforms? I saw "Custom classes" under "Manage Display" when editing the form, but it didn't seem to change the actual HTML of the form. Was I on the right track though, should I just read some docs about it?

Paul Paul · Accepted Answer · 2016-11-17T21:28:17

You are absolutely right, these detailed selectors do not make sense for reusable layouts.

Each webform HTML form gets a default class of .webform-client-form (that's generic) and an id including the webform's nid #webform-client-form-<nid>.

So, you could change #webform-client-form-25 to the class mentioned above. Please be aware, that this will affect all webforms then.

To set layout settings to several, but not all webforms, you need to give these webforms some class to distinguish them from the rest. Sadly, the Webform module itself doesn't provide an option to do that, but you can add a form alter hook in your theme's template.php:

function mytheme_form_alter(&$form, &$form_state, $form_id) {
  $affected_forms = array('webform_client_form_25', 'webform_client_form_37', [...]);
  if (in_array($form_id, $affected_forms)) {
    $form['#attributes']['class'][] = 'my-custom-class';
  }
}

With .my-custom-class you can then define CSS just for the group of webform forms listed in $affected_forms.

As for the template files, Webform itself states:

This file may be renamed "webform-form-[nid].tpl.php" to target a specific webform on your site. Or you can leave it "webform-form.tpl.php" to affect all webforms on your site.

So, again, it doesn't provide an option out-of-the-box, but you can create theme suggestions in your template.php by extending $vars['theme_hook_suggestions'] in a page preprocess function.

How do I tie a Drupal template to a webform with multiple environments?

1 Answers