2

I've a fairly simple question. Due to a given CSS I need to wrap the <input>-field (as well as <select> or <textarea>) of webform-component with a custom <div>-wrapper.

Change the follwoing ->

<div class="webform-component webform-component-textfield webform-component--title">
    <label for="edit-submitted-title">Name</label>
    <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
</div>

to ->

<div class="webform-component webform-component-textfield webform-component--title">
    <label for="edit-submitted-title">Name</label>
    <div class="my-custom-class">
         <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
    </div>
</div>

I tried this snippet (changing #prefix and #suffix with hook_form_alter()), but it wraps the whole webform-componoent in a custom div.

Result is like this:

<div class="my-custom-class">
    <div class="webform-component webform-component-textfield webform-component--title">
        <label for="edit-submitted-title">Name</label>
        <input type="text" id="edit-submitted-title" name="submitted[title]" value="" size="60" maxlength="128" class="form-text required">
    </div>
</div>

I also tried to modify #field_prefix and #field_suffix with, but it doesn't result in any output at all. It seems, that these doesn't allow to have any custom html in it.

Any suggestions? Thanks.

1

Use hook_form_alter and add "'#title_display' => 'none'," and use label in prefix. e.g.

if($form_id == "content_type_node_form"){
   $form['field_name']['#prefix'] = '<label for="edit-submitted-title">name</label><div class="newclass">';
   $form['field_name']['#suffix'] = '</div>';
}

I have not tested it but this can work.

0

It is not supported currently - not in any easy way - and you should not need it. Creating div for only one element provides no benefit over adding a class to that element, you should be able to style it however you feel like if you will use hook_form_alter with something like:

$field['#attributes']['class'][] = 'my-custom-class';

And then just attach whatever styles you want directly to input - it should be possible to achieve whatever look you need that way.

  • As I said I need to wrap the input field due to given CSS. The page has a custom design, but uses some parts of twitter bootstrap element styling, in this case forms. As you can see in the bootstrap documentation it's a common approach to style forms like this. Since I don't want to completely rewrite the CSS, for me the most straight foward way is to change the output of webform. I thought, using hook_form_alter() is the easiest way. Maybe there is another way like building a custom *.tpl.php. I have no idea. – ichderfisch Dec 17 '14 at 9:35
0

if you exactly mention your field name as in content type that will add the div in that field

add this in form alter for that particular form.

if($form_id == "content_type_node_form"){
    $form['field_name']['#prefix'] = '<div class="newclass">';
    $form['field_name']['#suffix'] = '</div>';
}

this is how i used to add and wrap div hope it will help you.

0

You can customize all input template files ( and maybe that need some work), another simpler solution is using jquery

use jquery wrap function and try something like

$("input.edit-submitted-title").wrap("<div class='my-custom-class'></div>");

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.