Page 1 of 1

Multi steps form on Bootstrap modal

Posted: Sat Jun 09, 2018 8:18 am
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.

Re: Multi steps form on Bootstrap modal

Posted: Sat Jun 09, 2018 4:28 pm
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.

Re: Multi steps form on Bootstrap modal

Posted: Sat Jun 09, 2018 8:10 pm
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.

Re: Multi steps form on Bootstrap modal

Posted: Sat Jun 09, 2018 8:38 pm
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/

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 8:16 am
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.

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 11:52 am
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.

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 11:55 am
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.

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 12:02 pm
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.

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 12:26 pm
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).

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 12:51 pm
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.

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 12:53 pm
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

Re: Multi steps form on Bootstrap modal

Posted: Sun Jun 10, 2018 1:06 pm
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

Re: Multi steps form on Bootstrap modal

Posted: Mon Jun 11, 2018 8:19 am
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.

Re: Multi steps form on Bootstrap modal

Posted: Mon Jun 11, 2018 2:15 pm
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.

Re: Multi steps form on Bootstrap modal

Posted: Mon Jun 11, 2018 6:44 pm
by w00t
Finally guys I stopped on this variant of the multiple steps form.