1

How to style individual webforms with different css class and html elements?I have a few webforms and I need different html elements like divs, spans etc and css class for each webforms

  • 1
    you could try using Theme key module. – AjitS May 28 '12 at 11:38
2

If you just need to apply CSS styling, then if you view the source of the webforms you will see they have container divs with classes that contain an ID number. This ID will allow you to directly target a specific webform.

If you mean you want to add your own divs etc. and template different webforms, then the best way to do this is by creating a specific template file for it.

In your theme folder you can add a template file such as: webform-form-[nid].tpl.php you can get the ID by viewing the source of your form, it displays in one of the forms parent divs.

As your base you can use the default template from the webforms module. Goto (or other location where you have installed the webforms module):

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

and make a copy of this.

I have themed webforms that appear in blocks in the following way too:

block--webform--client-block-112.tpl.php
  • 1
    That should be /sites/all/modules/webform/templates/webform-form.tpl.php I think – cybertoast May 30 '13 at 18:15
0

For few changes drupal provide a class wrapper for each page node for example :

<body class="html front logged-in no-sidebars page-node page-node- page-node-109 page-type-page domain-ircam-mpmaroc-com i18n-fr lang-fr color-scheme-default corolla fs-medium bs-n bb-n mb-dd rc-6 rct-6 ia-r coffee-processed lightbox-processed admin-menu">

this is the class for the node 109 so in css you could use :

.page-node-109 input{}

and then for each web form you will use the .pane-node-(node id) to theme it separatly

But for big changes you must use the hook_form_alter

0

To modify each Webform separately you should use the forms css ID. The ID should always be unique.

For example, when you look at the source of your webform, you will notice in the <form> element, there will be an ID. For example <form id='the_unique_id'>.

I believe the ID should be something like webform-client-form-<NODEID>

You can then use your themes CSS file to modify the form.

Note that ID selectors start with # and not .

#the_unique_id {
   background-color: red;
}

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.