FormBuilder - achieving Bootstrap-styled forms

[Cerulean]

Bootstrap requires forms to be marked up as follows to receive Bootstrap styling:

Code: Select all

<div class="form-group">
    <label for="input1">My Label</label>
    <input type="text" class="form-control" id="input1">
</div>

Note the classes "form-control" on the input and "form-group" on the div wrapper.

FormBuilder allows a class for the div wrapper, but I can't see a way to get a class onto the input elements. Any suggestions?

[allan1412]

Have you tried this?

http://stickywicketdesigns.com/uploads/ ... tstrap.tpl

[Cerulean]

Thanks, but this template doesn't get a class onto the inputs as required.

Having looked into it some more, it seems that FormBuilder doesn't provide the type of control over the generated form that's needed. The form template allows some customisation, but whole chunks of HTML are still output via variables like {$entry->input} that are not customisable without editing the module files.

[Jo Morg]

(...) but whole chunks of HTML are still output via variables like {$entry->input} that are not customisable without editing the module files.

Not quite... there are two ways you can add a class to the entry:

• - using Javascrip or JQuery to add a class;
• - using smarty replace modifier, for instance: {$entry->input|replace:'class="':'class="addedclass '}

HTH

[Cerulean]

jQuery is the only solution I could find.

The replace modifier doesn't help in this case because FormBuilder renders the inputs without any class tag at all.

[Jo Morg]

Find a common fixed part to replace, for instance:

Code: Select all

{$entry->input|replace:'id=':'class="addedclass" id='}

or something similar. I know it works because I use it all the time.

[Cerulean]

Ahhh, didn't think of that... nice one.

[psy]

FormBuilder gives you the option to write your own form templates on the 'Form Template' tab when editing the form.

Just leave all the logic that applies to errors etc and remove the foreach loop for the fields. Then you can hand-code the template fields stuff to suit Bootstrap (or zurb or whatever). The tab help gives you all the options and you can find your field info on the 'Submission Template' tab.

[Cerulean]

FormBuilder gives you the option to write your own form templates on the 'Form Template' tab when editing the form.

Good point - it is possible to get every form field by name and build the template field by field. Although this becomes a lot of work if you have a large number of fields and forms, and you have to keep the template and form in sync if you add/remove fields.

[jac]

Hello Jo Morg ,
I try to work with cmsms but it is very hard .
I found very interesting your tip .
I try to put in place and I do not.
I searched but I'm stuck .
Can you give me a better explanation ..
I am newbie in cmsms .
But I 'm a fan .
Thank you in advance