Page 1 of 1
FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 2:41 am
by 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?
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 6:04 am
by allan1412
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 9:37 am
by 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.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 9:44 am
by Jo Morg
Cerulean wrote:(...) 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
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 9:50 am
by 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.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 9:56 am
by 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.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 10:05 am
by Cerulean
Ahhh, didn't think of that... nice one.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Wed Aug 20, 2014 11:43 am
by 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.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Thu Aug 21, 2014 4:52 am
by 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.
Re: FormBuilder - achieving Bootstrap-styled forms
Posted: Sat Oct 18, 2014 9:19 pm
by 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