Progress Bar styling

By: Lasse Kornerup | Asked: 09/26/2022
ForumsCategory: How-toProgress Bar styling
Lasse Kornerup asked 2 years ago
Hello all, Anyone knows how to style/design the progress bar when using Conversational form mode? When i use this form mode, i only can change color of the progress bar. (I would like it to be larger, and if possible in the bottom instead og the top of the form)
3 Answers
Bobby Clapp answered 2 years ago

There aren't a lot of options really. Here is what you have to work with:

Lasse Kornerup replied 2 years ago

I was worried about that 🙂
Problem are, that if you turn the form into Conversational mode all the design options are not possible.
(Pagnation turns off)

Lasse Kornerup answered 2 years ago

Mayby another method is avalible.This is what i want to build- Test with 10-12 questions and multiple answers- Automatic advance - no next buttom etc. - Total score redirects to URL- Automatic redirect after last question- Progress bar with % or steps shown- Progress bar shown under questions- Progress bar at 50px or something Any good ideas? :-)

Bobby Clapp replied 2 years ago

A painful option would be to roll your own and insert the HTML into an HTML field wherever you want it to show up on the page.

Victor Font answered 2 years ago

The automatic advance may be possible by triggering a form submit with jQuery on the blur event of the individual fields. I say "may be possible" because I haven't tried this myself and don't now if there are any "gotchas" with this approach, but since the next button is a form submit button, it may work.

Progress bars and rootlines are HTML list objects (ul/li) formatted with CSS. Each li element wraps an input field used for triggering page turns. You can format the progress bar to your specification with your own creative CSS that overrides Formidable's.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community