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


Comments are closed.