Forums

Form Tab Navigation

eryabo 27 Dec, 2012
I am trying to set up a form with multiple tabs across the header for navigation. Currently I have containers set up inside the custom elements. I am able to get a vertical style bold text to display the particular form once selected. The problem here is that the user is unable to determine where they are within the form (as the vertical text does not indicate any selection). I would like to either have a way to set the tabs across the header (horizontal alignment) and provide some indication that a tab was selected or to leave the existing framework with a workout for the current text so that it allows users to know where they are on the form.

Also, wish there was a save feature for users while completing the form!

Thanks,

RyAbO
GreyHead 27 Dec, 2012
Hi RyAbO,

I can't tell what you have actually done here. The built-in tabs may need some CSS added depending on the template you are using. Usually they show quite clearly, see the demo forms linked from this FAQ.

Saving is more complicated, it may be possible to use Ajax to save when a user changes tabs though I've never worked out quite how to do that. My personal preference it to break a long form into several short pages as a multi-page form and to save the data after each page is completed.

Bob
eryabo 28 Dec, 2012
Bob,

I followed the directions in the link provided when I was setting up the form. I like the demo that you had with the tabs above. That was exactly what I was looking for. There was a problem when I got to:

Open the file media/system/js/tabs/js and add the line shown here to the initialise section (I put it at line 66):

I did not know where to input the line as I was not able to locate file media/system/js/tabs/js. My goal was to have the exact same navigation that you have in the demo.

Thanks,

RyAbO
GreyHead 28 Dec, 2012
Hi RyAbO.

Sorry my typo - that should read media/system/js/tabs.js

Bob

PS I've updated the FAQ.
eryabo 28 Dec, 2012
I am still having some difficulty locating: media/system/js/tabs.js where exactly is it located in the form admin section or other location?
GreyHead 28 Dec, 2012
Hi eryabo,

It's not a ChronoForms file; it's a Joomla! one. Start from your site root folder and track down the path.

Bob
This topic is locked and no more replies can be posted.