• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 15 posts ] 
Author Message
 Post subject: Multi steps form on Bootstrap modal
PostPosted: Sat Jun 09, 2018 8:18 am 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sat Jun 09, 2018 4:28 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 403
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sat Jun 09, 2018 8:10 pm 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sat Jun 09, 2018 8:38 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 403
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 8:16 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3007
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 11:52 am 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
Thank you guys I'll try to make the form without formbuilder but honestly it's sad that the project is no longer developing.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 11:55 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3007
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 12:02 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Mon Jan 29, 2007 4:47 pm
Posts: 1734
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!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 12:26 pm 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
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).


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 12:51 pm 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3007
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 12:53 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Mon Jan 29, 2007 4:47 pm
Posts: 1734
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:
Quote:
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:
<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!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Sun Jun 10, 2018 1:06 pm 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
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.
Quote:
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...
Quote:
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Mon Jun 11, 2018 8:19 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3007
Location: The Netherlands
Quote:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Mon Jun 11, 2018 2:15 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Feb 25, 2009 4:25 am
Posts: 403
Location: Victoria, BC
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Multi steps form on Bootstrap modal
PostPosted: Mon Jun 11, 2018 6:44 pm 
Offline
Forum Members
Forum Members

Joined: Wed Jun 19, 2013 10:25 am
Posts: 12
Finally guys I stopped on this variant of the multiple steps form.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 15 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting