Display Form Tabs below other form inputs

Hi,

Is it possible to have the form tabs widget display underneath other content instead of the very top?

I would like to have certain fields(name, email, address, etc) visible above the tabs, and other content in tabbed sections.

By default the Form Tabs Widget is more intended to show the tabs featurette at the top of your jotform. 

Do you mean something like this "http://form.jotformpro.com/form/43525556912963?" but you basically want the form tabs at the bottom of it? Or?

Can you confirm? If not then do you have a form url to a from you'd like to try to make it work on?

The form tabs does allow injected css so this might be possible. I'll need some more time to try to figure something out for this.

If you take a look at my 2-Door Unibody Cut Sheet you'll get a better understanding of what I'm trying to accomplish.

So basically, where I have the from collapses right now, I would like to have the tabs. It will look much cleaner than having those 5 blocks for the form collapse.

I have tried several different things, but did not have any luck. The tabs always include every aspect of the form.

Hopefully you will be able to help out with this.

The way to get the form tabs on your jotform is to use "pagebreaks" instead of collapses as seen in my example screenshot above since that's what it's associated with otherwise it's not going to work. This is mentioned in the description of the Form Tabs Widget. You can then use the included css option for it to make further adjustments if needed.

I understand that i need to use the page break option for the form tabs to work.

I need the form tabs to display where the form collapse is right now. And when switching tabs, the fields above do not disappear. 

Does that make sense?

I do apologize about any previous confusion that I had and yes I believe that I understand what you mean by that now. 

I've been trying to figure out a way to make that happen but I think the way you are trying to do it isn't going to work because of the current tab behavior which is reliant on the "pages" for the pagebreak. The most I think that could be done right now is to split it but the tabs would still be stuck at the top.

I remember once before in another thread I worked on I forced a logo above the form tab widget so I'll have to find and reference it to jog my memory with what I did before in it. Maybe I can mesh that to work with how you are asking somehow.

It's not a problem at all.If you would be able to figure that out, that would be great. In the meantime, I'll see if i can come up with a solution as well.

Thanks for you help KadeJM!

You are welcome and it's not much  at the moment but I finally remembered how I forced the form tab down. I didn't get it earlier because I was trying to figure it a different way which wasn't working.

Anyhow, this injected css code will shift it downward:

.tabs-list {margin-top: 200px !Important;}

You can manually adjust the number higher to push it further down your page depending on where you need it. Just be advised at the moment this will create a huge gap pushing everything else on your page further down as well. We'll have to push those back upwards with more css probably.

The way you have it in the picture above is how i would need it, with name, email and address above the tabs. Ans when selecting different tabs the information above does not move.

Hi,

Please try this CSS codes below and inject this CSS codes to your form. I think this would be help to you to put the tabs on the bottom of your form.

.tabs-list {position:absolute !important; bottom:20px;}

Please check this form on how it looks:

http://form.jotformpro.com/form/43553758774974

Hope this help.

Thanks.

Hi val,

Thank you for your input, but unfortunately that is not what I am trying to achieve. I do believe @KadeJM has an understanding of what i am trying to accomplish.

Thanks again!

Hi,

From what I was able to gather through the thread I presume that you are after this: http://form.jotformpro.com/form/43554375064962

Do let us know if that is correct or if not which parts should be changed and we would be happy to assist you.

This is the entire CSS code that was used to create that:

.form-all > ul:nth-child(2), .form-all > ul:nth-child(8) {
    display: block !important;
}
.tabs-list {
    position: relative;
    top: 940px;
}
#form-tab-1, #form-tab-7, .form-all > ul:nth-child(8) .form-pagebreak {
    display: none;
}
#cid_44 {
    visibility: hidden;
}

Now it might not be the same if you add the same fields to your jotform since they might get different IDs but do let us know and we can help you set it all up.

Basically what it did was:

1. move the tabs from the top:
2. hide the first tab since we need it (the one holding th first fields)
3. set it so that the tabs do not influence it (otherwise it would be hidden and tabs would always be shown at the bottom of others or in the middle of longer pages)
4. make separate page for submit
5. make it always shown as well (otherwise they would need to click on the last tab and then select submit)
6. set the back and next buttons on first tab and the last tab to hidden (the first tab being at the top and the last holding submit button).

If that is what you wanted to achieve I would suggest following these steps to clone the jotform to your own account: How to Clone an Existing Form from a URL

Best Regards,
Ben

Hey Ben,

This is exactly what I was looking for! thank you so much!

Hi,

Great to hear that and you are welcome. :)

Do let us know if you have any further questions or need any further assistance and we would be happy to help.

Best Regards,
Ben