Custom Form Template based on Bootstrap

[darkroast]

Ok, this will probably fall into the category of "stupid questions" - but here goes.

I have a form for which I would like to create a custom layout. I've been using the Bootstrap template, which works fine, except for the layout (I'd like to format the address fields as "City, STate ZIP" instead of one per line.

There are multiple groups in this form, one of which is a repeating group.

If I should use a copy of the 'bootstrap' template, I can't figure out how this should all work. (The tutorials are all geared for a copy of the "contacts_custom" template).

I did try to use a copy of the contacts_custom template, copying it into the /components/com_fabrik/views/form/tmpl directory (not the tmpl25 directory), but when I do that, none of the fields show up. Looking at the generated code, the <div> statements for the various elements show up like this:

<div style="clear:both;width:100%;" class="fabrikElementContainer plg-radiobutton fb_el_hs_cases___productType fabrikDataEmpty fabrikHide">

If I remove the fabrikHide class, they do show up...

How do I do this?

 

[troester]

The easiest way:
one more group, set to 3 columns, assigned to City, State, Zip

 

[darkroast]

That will work great for that specific section (and it's the perfect solution for that specific set of fields). I do have some other groups I'd like to "adjust" as well. I can, of course, do the same thing for them. But is there a way to do this through the templating system (specifically with the Bootstrap template), as we can for the contact form? Might be something to put together some documentation for.

 

[troester]

I think you have to split the
"foreach ($this->groups as $group) : ..."
in default.php and then merge the appropriate group template code (also with single elements instead of "foreach ($this->elements as $element) :...") into default.php

Yes, maybe a "custom form example" could be added(sometime).
The problem with a custom template is that it has to be updated manually if there's a (esential) change in the original bootstrap template.
So if you can get your layout with the bootstrap template (with group settings and/or custom CSS) this is the better way.

 

[downunder]

Maybe you need to look at my example under the recent post Custom Template - not able to edit (SOLVED)
Basically duplicate the bootstrap folder (in components>com_fabrik>views>form>tmpl), rename folder, and edit the default_group.php in your new folder (standard layout) and add any html you need instead of the existing foreach loop. You can see in the example that using...

$elements = $this->elements;
echo "<pre>";
print_r($elements);
echo "</pre>";

at the top of the file will allow you to identify the array group elements, and you can place them anywhere in your custom form. Just don't forget to add ID (hidden) field as I did. Your renamed template will appear in the FORMS under LAYOUT>Front End>Template. Select it and your good to go. You can use groups to segregate the form fields, but this will probably lead to slow forms, especially on IE.
You will need to add CSS to style the form, so you will need to use Firebug or equivalent to get the classes etc. I have attached how my form with fieldsets ended up, and works great. Also attached the default_group.php as a text file.
Doing it this way will confine your form to a single file (default_group.php), so changes to the bootstrap default.php in the future will only require the replacement of your single custom file. Future updates should not alter the folder you have created.

P.S. The <div class="fabrikErrorMessage"> </div> will probably not work, and you will need to setup all the validation before making your template (via PRE) as the container classes will be wrong.

 

[darkroast]

Troester and Downunder ... thank you both for the insights. I tried the multi-column group idea, and while it worked reasonably well, I wasn't entirely happy with the results.

Downunder, your suggestion looks like it would be pretty workable, albeit with a good bit of coding. A couple of issues that I'd need to think through, and maybe y'all can give me some advice...

First, one of the groups is set to be a repeating group. I saw that you said "edit the default_group.php in your new folder (standard layout) and add any html you need instead of the existing foreach loop" and "doing it this way will confine your form to a single file (default_group.php)". In order to handle the repeating group, would I need to simply incorporate the appropriate parts from the default_repeatgroup.php into that default_group.php file?

Second, some of the groups are hidden or shown using javascript in various elements, so that they display or hide based on selections made by the user. Since the form ends up being a single "group," this wouldn't be possible, would it?

If not, or if the repeating groups can't be implemented using the approach(s) above, it's not a killer - I can live with the standard "bootstrap" template. I can tell my boss, "some things are a compromise..." and he'll live with it. But if I can get this working, well, I'll look like a genius.

 

[troester]

As I've said it is better to stay with the original bootstrap (structure) as long as possible (especially if you want to use repeat groups, javascript, groups with ACL added ...).

You can do a lot with custom CSS added to the bootstrap template.
As downunder is saying

You will need to add CSS to style the form, so you will need to use Firebug or equivalent to get the classes etc.

 

[downunder]

What I provided was the ability to show a flat form in a special way. Great for duplicating forms you may already have.

When it comes to repeating elements, you probably are better of with the standard structure, although I am now working on an invoice template that will require flat and repeating groups for this functionality. If I discover that a customised repeating template is required for my project, I will get back to you with the details. The FABRIK system is great for 90% of the forms, but really difficult for the other 10%, which reduces its appeal. I'm sure the DEVS are working on this. Being able to assign elements to different fieldsets is what I am thinking, and having a number of "common templates" that are styled for you would be nice. Sounds like a template club would be the go.

 

[troester]

Being able to assign elements to different fieldsets is what I am thinking,

That's what groups are for.

 

[downunder]

Yes but are they fully accessible to custom CSS, and do they behave like fieldsets?

 

[troester]

Yes, you'll get
<fieldset id="group1"...>
<fieldset id="group63"...>