Posted by jeffporten on Fri, Nov 01, 2019 - 6:37pm

I have a couple places on my site where I'm intending to break down complex forms into various tabs. I can grok how to do this with additional nav menus and various block placements, but I would really like to have a standard UI visual indicator of what's going on, and I would really really like to not have to build one. (Especially since grokking Backdrop CSS is still on my to-do list, and hence I don't want to put anything fancy into that bucket.)

Any suggestions for out-of-the-box treatments? (Out of the box could mean installing new layouts or D7 modules known to work; I'm cool with that, but hoping to avoid any whack-a-mole with D7 modules that sort-of-but-not-really work.)

 

Most helpful answers

Excellent @themetman! ...I

Excellent @themetman! ...I have a feeling that the Views Accordion module won't work in @jeffporten's case though, where he needs to use forms.

Comments

jenlampton's picture

Fri, Nov 01, 2019 - 6:54pm by jenlampton

I used to use the QuickTabs module in Drupal 7, but all the sites I've upgraded from Drupal to Backdrop have decided to remove their tabbed blocks. I had planned to port it at one point, but it turned out not to be necessary. 

I have another upgrade I'll start Dec 1 that will need this module, and I'll be working on it then if someone else doesn't beat me to it.

Fri, Nov 01, 2019 - 7:53pm by jeffporten

That looks like a cool UI that I may use elsewhere when it's available, but I'm looking for something like this:

...which I assume is at the top of a block, but I don't much care about the mechanism here—that can also be what looks like tabs, but are actually links to other pages. In my ideal tabbed-block world where everything is unicorns and rainbows, all the content loads at once and the tabs switch inline without a page reload.

Hmm. Also occurs to me that since I'm planning on using this for complex form entry, this might not be an out-of-the-box thing at all: clicking a tab has to be both a form submit and a UI action, else I'm risking data loss due to browser behavior.

Sat, Nov 02, 2019 - 7:55am by stpaultim

I think you will need to be a little more specific about what you are trying to do, before we can provide any more specific solutions. 

It sounds like you are trying to do this:

You have several forms on different pages, for example:

site/forms/form-1
site/forms/form-2
site/forms/form-3

Then you will have one master page with all the forms in tabs:

site/forms (which has tabs for: form-1, form-2, and form-3)

Is this anywhere close to what you are describing?

Do you need different forms in tabs or could you have a single multi page form with the ability to move easily between pages in the form?

Sun, Nov 03, 2019 - 6:32pm by jeffporten

The idea in my head isn't necessarily the best approach, so modifications to what I'm asking are welcome.

The premise (for this instance; there will be other places I might use it) is that every user is going to have a very long profile form, for which they provide information to us and the other users, control various site settings, set preferences for how they work with the nonprofit, etc. This is insane to put all on one page without a UI to make it manageable, but a single page load is preferable because I think breaking it into multiple pages (in a way that's obvious to the user) will prevent them from sitting down to do one section moving on to the next—which I'd like to encourage.

So these sections include:

  • A checklist workflow of "how to get involved as a member" which provides a linear stepping-through of parts of the site
  • Contact information and granular controls on what's exposed to other users
  • A bio textarea and uploaded photo that can go into a full text search (again, either for us or other users, or picked up from the database if they become an officer and have their bio published on that page)
  • A page listing all the various projects and programs that are currently active, to allow members to set their interest levels (used to direct funds already donated), with links to detailed information about each
  • Information pulled from the other website (run on D8 at a different URL, because combining it with Backdrop or D7 was impossible after months of trying), so they don't have to go looking in two places for it
  • Settings for various features of the site, i.e. "when I search for events, these are the cities and regions I consider my home base"

There are a bunch of ways to skin this cat, and yes, the easiest is just to do it as different forms on different pages. But visually, doing it as a tabbed UI will lead people to fill out more information in one sitting, I think. And if I do something like that, I'd want some kind of structure where a tab isn't a full page load—which would be AJAX on most systems but I gather here should be done with clever Views or some such?

The corollary question being, obviously the "tabs" are a secondary nav menu, so when I provided the picture of Chrome, what I really meant was that I was hoping that somewhere there's a turnkey module or such that takes a nav menu and makes it look like tabs.

Clearer? Thanks.

themetman's picture

Thu, Nov 07, 2019 - 2:38am by themetman

I have created a Tabbed View using the method I found here The main algorithm from there is this

1) create page with path "parent" and with content that you would normally have for default tab, don't set up menu settings
2) create page with path "parent/child1" and with content that you would normally have for default tab (SAME as "parent"), set it to be default tab and tell views Parent menu item: Already exists
3) create page with path "parent/child2" and with content you want, set it to be menu tab
4) repeat step 3

This works fine as a page, but I cannot get it to work as a Block.

I have had a look at /views but there are no issues reported there.

Anyone else had this problem?

klonos's picture

Sun, Nov 10, 2019 - 3:44am by klonos

I never had the need for anything like this, but it seems to me that for @jeffporten's use case (large forms), it may be quicker to implement them within fieldsets, in the same page. That way, it would still be a single form, and it would be segmented by the fieldsets. No page reloads.

Also, have you tried to implement this as a multi-step webform?

PS: another module that might do what you're after is https://www.drupal.org/project/webform_accordion (not ported to backdrop yet).

themetman's picture

Sun, Nov 10, 2019 - 4:28am by themetman

I have got an Accordion to work as you suggest with the Views Accordion Module which  has been ported.

klonos's picture

Sun, Nov 10, 2019 - 12:51pm by klonos

Excellent @themetman! ...I have a feeling that the Views Accordion module won't work in @jeffporten's case though, where he needs to use forms.