Drupal Development Resources

Drupal Module Spotlight: Webform Classes

Webform Classes allows you to specify CSS classes for easier theming or targeting with javascript/jquery. When used in conjunction with Bootstrap, it makes theming a lot easier and consistent by leveraging existing styles. It solves a specific problem with the Bootstrap theme and Webform where it doesn’t add the class “form-control” to email fields.

Text fields get rendered like this:

<input class="form-control form-text required" type="text" id="edit-submitted-name" name="submitted[name]" value="" size="60" maxlength="128">

Webform will output the following code for email fields:

<input class="email form-text form-email required" type="email" id="edit-submitted-e-mail" name="submitted[e_mail]" size="60">

Notice “form-control” missing from the email field. This is due to how the Bootstrap theme rewrites form fields.

This module lets you add the required class so the output looks like the following without having to add any custom styles:

CSS · Bootstrap


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.