Multi steps form on Bootstrap modal

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Locked
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Multi steps form on Bootstrap modal

Post by w00t »

Hi, guys. I've created template in Form Builder and tried use on bootstrap modal window but when a user push to the "Next" button the page just refreshes. Can somebody knows how to fix this issue and get the Next button to work correctly on Bootstrap modal window? I'm really stuck on this.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1073
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Multi steps form on Bootstrap modal

Post by DIGI3 »

That may be hard using FormBuilder's built-in multipart form functionality. It might be easier to use a javascript solution to break up the steps instead, perhaps just separating them with fieldsets in FormBuilder.
Not getting the answer you need? CMSMS support options
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Re: Multi steps form on Bootstrap modal

Post by w00t »

DIGI3 wrote:That may be hard using FormBuilder's built-in multipart form functionality. It might be easier to use a javascript solution to break up the steps instead, perhaps just separating them with fieldsets in FormBuilder.
Thank for reply. Can you give an example of a template? In particular, I'm interested code of "Next" button.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1073
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Multi steps form on Bootstrap modal

Post by DIGI3 »

I've used this a few times on CMSMS sites. I don't have a FormBuilder template for it but shouldn't be too hard to adapt (Might be easier to use CGSimpleForms though)

https://tympanus.net/Tutorials/FancySlidingForm/
Not getting the answer you need? CMSMS support options
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3304
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Multi steps form on Bootstrap modal

Post by velden »

I think it can be done using javascript with ajax.

It's not only for multi step forms but also for usual forms as you want to be able to 'catch' error and success messages.

I once wrote a guest article here: https://cmscanbesimple.org/blog/formbui ... modal-view

Although it might be over-complicated the basics are the same.
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Re: Multi steps form on Bootstrap modal

Post by w00t »

Thank you guys I'll try to make the form without formbuilder but honestly it's sad that the project is no longer developing.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3304
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Multi steps form on Bootstrap modal

Post by velden »

w00t wrote:Thank you guys I'll try to make the form without formbuilder but honestly it's sad that the project is no longer developing.
Excuse me?

The FormBuilder module actively maintained. And you'd need to ADD ajax and javascript to your webpage/template together with the FormBuilder form.

Making something work in a modal box sure isn't the task of the module but the task of the web developer. And the article I posted the link to is using FormBuilder too.
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1802
Joined: Mon Jan 29, 2007 4:47 pm

Re: Multi steps form on Bootstrap modal

Post by Jo Morg »

velden wrote:The FormBuilder module actively maintained.
Yes. It's just health and work issues that have been delaying a new release. But FormBuilder works fine and you need to know HTML and eventually how forms and AJAX work in order to go beyond the basics with any of the platforms.
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Conduit | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge | Yet another blog about CMSMS
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Re: Multi steps form on Bootstrap modal

Post by w00t »

I only wanna say that the last update of the module 2017-02-17, i.e. already passed more than one year. I mean that the project doesn't improve at all. Besides the link that you posted related with Fancy 1.x which stale too and with 2.x it doesnt works (this can be seen from the comments for this article below). If you know how this can be done easily, please help with the template? Some examples..? I don't even know how to generate the "Next" button code in the templates and add a class (without overwrite my css code).
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3304
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Multi steps form on Bootstrap modal

Post by velden »

I don't have a working Bootstrap example/template.

The article is just an example to show how you could use jQuery ajax together with FormBuilder. Note there are often multiple ways to make things work.

I posted the link to:
a. show that it is possible to do something like that with FormBuilder in CMSMS
b. show you some example code which you could learn from and apply in your project

I think it's important to understand how it works and then create the template yourself. It's very useful knowledge and as CMSMS templates are highly customizable I don't think it would be easy to find a one-size-fits-all-modal-bootstrap-with-formbuilder-template.
User avatar
Jo Morg
Dev Team Member
Dev Team Member
Posts: 1802
Joined: Mon Jan 29, 2007 4:47 pm

Re: Multi steps form on Bootstrap modal

Post by Jo Morg »

w00t wrote:I only wanna say that the last update of the module 2017-02-17, i.e. already passed more than one year. I mean that the project doesn't improve at all.
Still doesn't mean that it doesn't work.
w00t wrote:If you know how this can be done easily, please help with the template? Some examples..? I don't even know how to generate the "Next" button code in the templates and add a class (without overwrite my css code).
There is documentation on the module, and on the template page itself you can find the following:
You can access your form fields either using the $fields array or by directly accessing fields by their names (e.g., {$myfield->input} )
Assuming that you have a text field named myfield and/or with the alias myfield you can use either {$myfield->name} or {$myfield->alias} as the id for the input... as an simple example:

Code: Select all

<input
  type="text"
  name="{$actionid}{$myfield->input_id}"
  value="{$myfield->value}"
  id="{$myfield->name}"
  class="whatever-class-you-want"
>
Keep in mind that the {$actionid} part on the field name is very important for the submission to work.

Also, besides AJAX, DIGI3's suggestion is simpler and pretty much does the same, the difference being that it loads the full form at once and displays the 'pages' in a wizard kind of display. Also doable with FormBuilder but in this case the next button doesn't submit the form as is the case in the native pagebreak form control.
As you probably should have figured out already the next button is nothing else than a submit button but with a special meaning to FormBuilder.
HTH
"There are 10 types of people in this world, those who understand binary... and those who don't."
* by the way: English is NOT my native language (sorry for any mistakes...).
Code of Conduit | CMSMS Docs | Help Support CMSMS
My developer Page on the Forge | Yet another blog about CMSMS
GeekMoot 2015 in Ghent, Belgium: I was there!
GeekMoot 2016 in Leicester, UK: I was there!
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Re: Multi steps form on Bootstrap modal

Post by w00t »

velden wrote:I don't have a working Bootstrap example/template.

The article is just an example to show how you could use jQuery ajax together with FormBuilder. Note there are often multiple ways to make things work.

I posted the link to:
a. show that it is possible to do something like that with FormBuilder in CMSMS
b. show you some example code which you could learn from and apply in your project
I'll try to create a template and post it here.
I think it's important to understand how it works and then create the template yourself. It's very useful knowledge and as CMSMS templates are highly customizable
Yes, it's true but at this time I don't understand how it works. I'll learning...
I don't think it would be easy to find a one-size-fits-all-modal-bootstrap-with-formbuilder-template.
It would be great, bcuz all almost all modern templates are unified on the bootstrap framework (at least all my projects are 100% on bootstrap) if describe it in one phrase as a motto - faster,easy and accurate.

P.S. Jo Morg, thank you! I'll try mow
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3304
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Multi steps form on Bootstrap modal

Post by velden »

Also, besides AJAX, DIGI3's suggestion is simpler and pretty much does the same, the difference being that it loads the full form at once and displays the 'pages' in a wizard kind of display. Also doable with FormBuilder but in this case the next button doesn't submit the form as is the case in the native pagebreak form control.
I don't fully agree as it is only true for initial form display, but on submit the page will be reloaded anyway, so e.g. in case of invalid data/errors the form will not be displayed in the modal box. Neither does the success message.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1073
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Multi steps form on Bootstrap modal

Post by DIGI3 »

The issue isn't that you're using Bootstrap, it's that you're using a modal. This adds a layer of complexity to any form, as you can't have a traditional post action if you want the modal to stay open. It all needs to be done via ajax, whether it's FormBuilder or anything else.

It can be done, it just takes a bit of work figuring out the ajax. I haven't done it with a multi-step form, but here's an example of using it for a simple form to show search results within a modal (Foundation, but same idea): https://easythemes.ca/demos/portage/ (click on the search icon and try a search). You can view the source and see the javascript at the bottom.
Not getting the answer you need? CMSMS support options
w00t
Forum Members
Forum Members
Posts: 14
Joined: Wed Jun 19, 2013 10:25 am

Re: Multi steps form on Bootstrap modal

Post by w00t »

Finally guys I stopped on this variant of the multiple steps form.
Locked

Return to “Modules/Add-Ons”