Onchange event for data-toggle="wizard-checkbox" checkbox not working

$(document).on("change", "input[id='stay']", function () {
alert("FECK");
});

Please provide code if you have.

Hi There!

I would like to change the colour of the button, navbar, etc with a custom HEX code but I cannot find where to do so. I've changed the values of the "red" theme to my custom HEX but it has not changed. What should I do to change that?

Also I would like to change the background colour of the card, is there a way I can do that?

Thanks

Hi @timcreative,

very impressive project you've made, I'm very enthousiastic about Material Kit and this bootstrap wizard enhancement!

I did however struggle a lot to get this to play nice with a project I'm working on, and this seems to be related to some code rot in this repo.

• the data-color attribute only seems to change the positional slider color, but not the colors of the button classes
• when using it with your material-kit, things look even worse: positioning of the append-icons doesn't work, font sizes become way to small, input-groups are not being stretched to the col-* width's
• the image-container class makes everything dark when not setting a background-image which is really hard to detect
• there's no package.json in this repo to change the color scheme in this library (this worked perfectly in material-kit) so there seems no way to adjust the color scheme at all
• using it with BS4 doesn't work either: allthough the positioning issue of the input addon's disappeared, other issues appeared, similar to the issues with using your material kit separately

TL;DR;
Is it possible to override the color schemes? I'm really disliking the pink as primary color!

Thanks again!

Erik

Hi,

First of all I want to thank you for your work and share it with us !

I use your product in my project and I try to adapt it according to my needs.
The goal being after clicking the next button, this make an 'Ajax Post' to another PHP page that returns data. Until this step I have no worries. However, I would like the next tab doesn't appear until the Ajax call is not full successed. And then populate an textarea in the second tab for example.

I suppose it will be necessary to add a loading as long as the request ends, however there is nothing complicated with that.

Would you be kind enough to help me with this problem, please ?

PS: I didn't find a forum so I allow myself to open an issue, hoping that you have no objection.

Best Regards and thank you for the support.

As per the issue no. #36, I am also not getting any response on checkbox onChange. I tried adding onChange and as following:

$('#dental_type_id_1').change(function () {
    alert($this.value);
 });

$('input[type=checkbox]').change(function () {
    alert('changed');
});

nothing work. Please need help.

Hi,
I would like to disable the radio button function from the form because it conflicts with another main plugin i use.

I work on wp.

Knows someone how to?
Thanks

When i fill an input (text) using jquery/javascript the label does not float. so the value and the label are overlapped. However if i type directly, the label floats.

Is there anyway around this?

Hi Creative Tim,

I really love the material bootstrap you guys made!
But I think there's a bug :(
When you use 4 tabs and open the page on a mobile phone,
the tab buttons don't align..

Hi Creative Tim,

Thank you for a great plugin..

While trying to use your material-bootstrap-wizard with angular 6, i am facing a problem with the display..
kindly help me out..

console

Wizard has some issue with iphone radio buttons are not working and some responsive issue also.
Please help me out because i designed dynamic steps on it. and how i can validate radio buttons.

Hi,

When we select the radio buttons and send the data, I is not selecting anything. What's the problem

Thank's :)

when the modal popup shows, if the user clicks somewhere outside of the modal window, the modal window goes away. if the user shows the modal again, it remembers the last data entry and the active tab it was on. What do I need to do so the modal doesnt remember anything and acts as if this is the first time user has clicked on it

Hi, I am using Bootstrap.v3.Datetimepicker with an input text control.
<div class="form-group label-floating"> <label class="control-label"> <span id="Birthday"></span> </label> <input name="Birthday" type="text" id="txtBirth" class="form-control"> </div>

However after I selected a date by datetimepicker, the div still display is-empty
<div class="form-group label-floating is-empty"> <label class="control-label"> <span id="Birthday">生日</span> </label> <input name="Birthday" type="text" id="txtBirth" class="form-control valid" value="11/29/2017" aria-required="true" aria-invalid="false"> <span class="material-input"></span></div>

I'm looking for a way to force the page to refresh when closing modal pop-up. I found several solutions but none of them works (or I cant' implement it into my code probably because of syntax problems)...

Hello, I've encountered a problem when using the select2 jQuery plugin inside your form.

Select2 creates another <li>-tag. The wizard now get's confused because refreshAnimation(), or in more detail total_steps = $wizard.find('li').length; counts the <li> created by select2 as well, resulting in total_steps being 1 more than actual <li>-tags.

console.log($wizard.find('li')); in Chrome:

I fixed it by changing
total_steps = $wizard.find('li').length;
to
total_steps = $wizard.find('.wizard-navigation').find('li').length;

Maybe you want to apply this as well. Cheers.

Hello,

I want to add image with text in tab. is that possible?

hi, is any way to get to not first step in this form https://demos.creative-tim.com/material-bootstrap-wizard/wizard-book-room.html? Some direct link or post parameters?

I'm using this wizard with the Material Dashboard Pro Angular 2 template. I'm modifying it to have validations in every tab. Since the default code has only one form for all tabs, I couldn't pass to the other second tab because it isn't valid.

I proceeded to do a single form for each tab and validate depending the index.

onNext()

onNext: function (tab, navigation, index) {
	var $valid, j;
	switch (index) {
		case 1:
			j = $('#accountinfo form');
                        var $valid = $('#accountinfo form').valid();
			break;
	         case 2:
			j = $('#personalinfo form');
			var $valid = $('#personalinfo form').valid();
		default:
			break;
	}
	console.log("onNext", $valid, index, j);
	if (!$valid) {
		$validator.focusInvalid();
		return false;
	}
	else
		return true
},

onTabClick()

                      onTabClick: function (tab: any, navigation: any, index: any) {
				var $valid;
				switch (index + 1) {
					case 1:
						var $valid = $('#accountinfo form').valid();
						break;
					case 2:
						var $valid = $('#personalinfo form').valid();
					default:
						break;
				}
				console.log("onTabClick: ", $valid, index)
				if (!$valid) {
					return false;
				} else {
					return true;
				}
			},

Pug Code

.wizard-container
	#wizardProfile.card.card-wizard(data-color='purple')
		//- You can switch " data-color="primary" "  with one of the next bright colors: "green", "orange", "red", "blue"
		.card-header.text-center
			h3.card-title
				| Build Your Profile
			h5.card-description This information will let us know more about you.
		.wizard-navigation
			ul.nav.nav-pills
				li.nav-item
					a.nav-link.active(href='#accountinfo', data-toggle='tab', role='tab')
						| Account Info
				li.nav-item
					a.nav-link.active(href='#personalinfo', data-toggle='tab', role='tab')
						| Personal Info
				li.nav-item
					a.nav-link(href='#address', data-toggle='tab', role='tab')
						| Address
		.card-body
			.tab-content
				#accountinfo.tab-pane.active
					form([formGroup]='accountGroup')
						h5.info-text  Let's start with the basic information (with validation)
						.row.justify-content-center
							.col-sm-10.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%")
										input#exampleemalil(matInput='', placeholder='Email', [formControl]='emailFormControl', type='email', name='email', required)
							
							.col-sm-10.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", [ngClass]="displayFieldCss(accountGroup, 'password')")
										input(matInput='', placeholder='Password', formControlName='password', type='password', name='password', required)

							.col-sm-10.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", [ngClass]="displayFieldCss(accountGroup, 'passwordConfirm')")
										input(matInput='', placeholder='Confirm Password', formControlName='passwordConfirm', type='password', name='passwordconfirm', required)

							.col-sm-3.mt-3
								mat-form-field
									mat-select(placeholder='Suffix', name='suffix')
										mat-option(*ngFor='let s of suffixes', [value]='s.value')
											| {{ s.viewValue }}
								
							.col-sm-7.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", )
										input(matInput='', placeholder='Job Title', type='text', name='jobtitle')

				#personalinfo.tab-pane
					form([formGroup]='personalGroup')
						h5.info-text something
						.row.justify-content-center
							.col-sm-12.col-md-6.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", [ngClass]="displayFieldCss(personalGroup, 'firstName')")
										input(type='text', name='firstname', matInput='', placeholder='First Name', formControlName='firstName', required)
							.col-sm-12.col-md-6.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", )
										input(type='text', name='middlename', matInput='', placeholder='Middle Name')
							.col-sm-12.col-md-6.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", [ngClass]="displayFieldCss(personalGroup, 'firstLastName')")
										input(type='text', name='firstlastname', matInput='', placeholder='First Last Name', formControlName='firstLastName', required)
							.col-sm-12.col-md-6.mt-3
								.input-group.form-control-lg
									mat-form-field.example-full-width(style="width: 100%", )
										input(type='text', name='secondlastname', matInput='', placeholder='Second Last Name')

UPDATE: with this code, $valid is true, I don't know why it doesn't change the tab.

First of all, sorry for spamming your bug tracker, but this is the last one (hopefully).

I don't know whether or not you guys ever intended your wizard to be used as a modal, but that's how I'm using it. I achieve this with:

<div class="modal fade" id="wizard" tabindex="-1" role="dialog" hidden="true">
<div class="wizard-container modal-dialog" style="display: block;">
<div class="card wizard-card" data-color="purple" id="wizard">
...

However, by doing that, the width of .moving-tab get's set wrong, resulting in it only being 25px. This happens because $wizard.width() equals 100, therefore step_width becomes 25 (100 /4).

I actually tried to understand why this happens, because in your demo the width of $wizard(<div class="card wizard-card" data-color="red" id="wizard">) is also 100%, but it doesn't happen there.

However, I changed $wizard.width() in function refreshAnimation($wizard, index) to $wizard.closest('.wizard-container').width().

With this change it works whether you use a modal or you use it the way you guys intended, because if you use a modal you apply the .modal-dialog class to the .wizard-container div and therefore sets the correct width. If you don't use a modal .wizard-container inherits the width of its parent which in your case is <div class="col-sm-8 col-sm-offset-2">.

So it works either way. Just thought maybe you want to implement this little change because it makes your wizard working properly when using it as a modal.

Cheers.

Hi,

First of all, thank you for such an amazing product.

I want to move to the next tab programmatically, without having to press the next button. Example, when someone selects value 1 from dropdown, move to next tab.

Hi. Hope you are fine. I used this theme its just remarkable and worked for me. Its good but i am getting problem in style while use my program on diffrent browser. Screenshot of these are given below. I tested it on chrome and opera. I am really worried about it please help me i wold be really thankful to you for such kind of favour

Hi, the creativetimofficial/material-bootstrap-wizard is fantastic I have to admit. I am not familiar with JQuery and JavaScript. I would like the image to be cropped to a square before it can be sent to the php processing script. Is there an easy way to do this. The profile pictures on my website display well when the images are square. Thank You!

Hello, I noticed that some of CSS breaks if you simply use the wizard together with the kit. I downloaded both the wizard and the kit files, and simply added the kit css and js files to the wizard index file in correct order. Here's the whole file:

`
<!doctype html>

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png" />
<link rel="icon" type="image/png" href="assets/img/favicon.png" />

<!--     Fonts and icons     -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

<!-- CSS Files -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/material-kit.css" rel="stylesheet" />
<link href="assets/css/material-bootstrap-wizard.css" rel="stylesheet" />

<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />

Creative Tim

	<!--  Made With Material Kit  -->
	<a href="http://demos.creative-tim.com/material-kit/index.html?ref=material-bootstrap-wizard" class="made-with-mk">
		<div class="brand">MK</div>
		<div class="made-with">Made with <strong>Material Kit</strong></div>
	</a>

    <!--   Big container   -->
    <div class="container">
        <div class="row">
	        <div class="col-sm-8 col-sm-offset-2">
	            <!--      Wizard container        -->
	            <div class="wizard-container">
	                <div class="card wizard-card" data-color="red" id="wizard">
	                    <form action="" method="">
	                <!--        You can switch " data-color="blue" "  with one of the next bright colors: "green", "orange", "red", "purple"             -->

	                    	<div class="wizard-header">
	                        	<h3 class="wizard-title">
	                        		Book a Room
	                        	</h3>
								<h5>This information will let us know more about you.</h5>
	                    	</div>
							<div class="wizard-navigation">
								<ul>
		                            <li><a href="#details" data-toggle="tab">Account</a></li>
		                            <li><a href="#captain" data-toggle="tab">Room Type</a></li>
		                            <li><a href="#description" data-toggle="tab">Extra Details</a></li>
		                        </ul>
							</div>

	                        <div class="tab-content">
	                            <div class="tab-pane" id="details">
	                            	<div class="row">
		                            	<div class="col-sm-12">
		                                	<h4 class="info-text"> Let's start with the basic details.</h4>
		                            	</div>
	                                	<div class="col-sm-6">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="material-icons">email</i>
												</span>
												<div class="form-group label-floating">
		                                          	<label class="control-label">Your Email</label>
		                                          	<input name="name" type="text" class="form-control">
		                                        </div>
											</div>

											<div class="input-group">
												<span class="input-group-addon">
													<i class="material-icons">lock_outline</i>
												</span>
												<div class="form-group label-floating">
		                                          	<label class="control-label">Your Password</label>
		                                          	<input name="name2" type="password" class="form-control">
		                                        </div>
											</div>

	                                	</div>
	                                	<div class="col-sm-6">
	                                    	<div class="form-group label-floating">
	                                        	<label class="control-label">Country</label>
                                        		<select class="form-control">
													<option disabled="" selected=""></option>
                                                	<option value="Afghanistan"> Afghanistan </option>
                                                	<option value="Albania"> Albania </option>
                                                	<option value="Algeria"> Algeria </option>
                                                	<option value="American Samoa"> American Samoa </option>
                                                	<option value="Andorra"> Andorra </option>
                                                	<option value="Angola"> Angola </option>
                                                	<option value="Anguilla"> Anguilla </option>
                                                	<option value="Antarctica"> Antarctica </option>
                                                	<option value="...">...</option>
	                                        	</select>
	                                    	</div>
											<div class="form-group label-floating">
	                                        	<label class="control-label">Daily Budget</label>
                                        		<select class="form-control">
													<option disabled="" selected=""></option>
                                                	<option value="Afghanistan"> < $100 </option>
                                                	<option value="Albania"> $100 - $499 </option>
                                                	<option value="Algeria"> $499 - $999 </option>
                                                	<option value="American Samoa"> $999+ </option>
	                                        	</select>
	                                    	</div>
	                                	</div>
	                            	</div>
	                            </div>
	                            <div class="tab-pane" id="captain">
	                                <h4 class="info-text">What type of room would you want? </h4>
	                                <div class="row">
	                                    <div class="col-sm-10 col-sm-offset-1">
	                                        <div class="col-sm-4">
	                                            <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="This is good if you travel alone.">
	                                                <input type="radio" name="job" value="Design">
	                                                <div class="icon">
	                                                    <i class="material-icons">weekend</i>
	                                                </div>
	                                                <h6>Single</h6>
	                                            </div>
	                                        </div>
	                                        <div class="col-sm-4">
	                                            <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this room if you're traveling with your family.">
	                                                <input type="radio" name="job" value="Code">
	                                                <div class="icon">
	                                                    <i class="material-icons">home</i>
	                                                </div>
	                                                <h6>Family</h6>
	                                            </div>
	                                        </div>
											<div class="col-sm-4">
	                                            <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if you are coming with your team.">
	                                                <input type="radio" name="job" value="Code">
	                                                <div class="icon">
	                                                    <i class="material-icons">business</i>
	                                                </div>
	                                                <h6>Business</h6>
	                                            </div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            <div class="tab-pane" id="description">
	                                <div class="row">
	                                    <h4 class="info-text"> Drop us a small description.</h4>
	                                    <div class="col-sm-6 col-sm-offset-1">
                                    		<div class="form-group">
	                                            <label>Room description</label>
	                                            <textarea class="form-control" placeholder="" rows="6"></textarea>
	                                        </div>
	                                    </div>
	                                    <div class="col-sm-4">
	                                    	<div class="form-group">
	                                            <label class="control-label">Example</label>
	                                            <p class="description">"The room really nice name is recognized as being a really awesome room. We use it every sunday when we go fishing and we catch a lot. It has some kind of magic shield around it."</p>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                        </div>
                        	<div class="wizard-footer">
                            	<div class="pull-right">
                                    <input type='button' class='btn btn-next btn-fill btn-danger btn-wd' name='next' value='Next' />
                                    <input type='button' class='btn btn-finish btn-fill btn-danger btn-wd' name='finish' value='Finish' />
                                </div>
                                <div class="pull-left">
                                    <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />

									<div class="footer-checkbox">
										<div class="col-sm-12">
										  <div class="checkbox">
											  <label>
												  <input type="checkbox" name="optionsCheckboxes">
											  </label>
											  Subscribe to our newsletter
										  </div>
									  </div>
									</div>
                                </div>
                                <div class="clearfix"></div>
                        	</div>
	                    </form>
	                </div>
	            </div> <!-- wizard container -->
	        </div>
    	</div> <!-- row -->
	</div> <!--  big container -->

    <div class="footer">
        <div class="container text-center">
             Made with <i class="fa fa-heart heart"></i> by <a href="http://www.creative-tim.com">Creative Tim</a>. Free download <a href="http://www.creative-tim.com/product/material-bootstrap-wizard">here.</a>
        </div>
    </div>
</div>

<script src="assets/js/jquery-2.2.4.min.js" type="text/javascript"></script> <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> <script src="assets/js/jquery.bootstrap.js" type="text/javascript"></script> <script src="assets/js/material.min.js" type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="assets/js/material-kit.js"></script>
<script src="assets/js/material-bootstrap-wizard.js"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="assets/js/jquery.validate.min.js"></script>

`

Note: I removed the Material Core functions from jquery.bootstrap.js since they get loaded with material.min.js. Look at the result in latest Chrome version:

Edit: I don't know why it doesn't parse the code correctly in here, but here is a pastebin: http://laravel.io/bin/aN8q8

when i submitted the form, radio gave nothing. could you give me an advice to that?
thank you

How can I change the size of the search window? (width and height)

I need to make 3 independent tab fields. I mean, it should not be sequenced, and I need to switch to the third tab without filling the first two. How could I make it? Please, help. I need to navigate between tabs as in this example (https://demos.creative-tim.com/material-bootstrap-wizard/wizard-book-room.html?_ga=2.54815083.1308090822.1614635936-1005027927.1614536127)

How to force "white container" (https://demos.creative-tim.com/material-bootstrap-wizard/wizard-book-room.html) to be centered no matter of col-offset and of screen width? And how to determine maximum width of the same "white container"?

autofocus native HTML5 attribute doesn't work with material-bootstrap-wizard.
If i commented $.material.init(); works autofocus, but other features are not working.
I noticed that autofocus is working only on jquery-2.2.4.min.js but not working with latest jQuery.

Hi!

First of all, thank you for such an amazing product. So, I was trying to set 2 different radio options on my tab, something like:

<col1>
    <colxs1>
         <radio1>
    </colxs1>
    <colxs2>
         <radio1>
    </colxs2>
</col1>
<col2>
    <colxs1>
         <radio2>
    </colxs1>
    <colxs2>
         <radio2>
    </colxs2>
</col2>

Then I noticed this block of code on material-bootstrap-wizard.js:

$('[data-toggle="wizard-radio"]').click(function(){
        wizard = $(this).closest('.wizard-card'); // THIS ONE
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
        $(this).addClass('active');
        $(wizard).find('[type="radio"]').removeAttr('checked');
        $(this).find('[type="radio"]').attr('checked','true');
});

This way, all the radios on the current tab get overwritten so you can only have 1 group of radios checked. And as you may have guessed, I changed it into:

$('[data-toggle="wizard-radio"]').click(function(){
        //wizard = $(this).closest('.wizard-card');
        wizard = $(this).parents().eq(1); // 2 levels up the DOM!
        wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
        $(this).addClass('active');
        $(wizard).find('[type="radio"]').removeAttr('checked');
        $(this).find('[type="radio"]').attr('checked','true');
    });

This way you can handle multiple radio inputs on same tab. I know It's not suitable for every case, but at least it helped me! Maybe worth mentioning it on the docs/readme?
:)

Hi,

Any plan to convert it to angular 2 without jquery?

for example <input type="radio" name="gender" value="male"> doesnt work inside a div with a class "choice" and a data toggle "wizard-radio". I know this is the problem of your end because I tried making radio button outside the div and then upon submitting post request of the form, it fetches the data of the radio button. I went into your docs and found out it still has the bug because when I try to inspect element, the input radio is outputted outside the body of the html (where the form doesn't have the coverage) even though it was inside of the div. Please create a solution to this because this kind of front-end style doesn't make a friendly-meet with the back end.

Hi,

I just changed the default purple theme to blue, but the button remains purple... Any idea?

Thx,

Balazs

have upgraded to 4.0 plan?

Hello is there a way how to display error when radio button isn't checked i tried to add a line to material-bootstrap-wizard.js but it didn't work.

Hi Creative Tim,

Thank you for a great plugin, i love all your plugins..

While using your material-bootstrap-wizard i am facing a problem..
i hide one of the tab after wizard initialize
$('.wizard-card').bootstrapWizard('hide', 4);
$('.wizard-card').bootstrapWizard('resetWizard');
but when next button clicked on index 3..the moving-tab displaying the hidden tab name..

Before Hiding Tab

then hidden tab 4 [Previous Institute Details]

Its Successfully Hidden
But When press Next button on index 3..Ita automatically jumping to next tab..

Please give me solution for this

Thank You

I load the radio buttons through an Ajax response, when this done it does not respond to click events.
Below is how the radio buttons are generated

Javascript

for (const key in data) {
                if (Object.hasOwnProperty.call(data, key)) {
                    const element = data[key];
                    console.dir(element)
                    var html = "<div class='col-sm-4'><div class='choice' data-toggle='wizard-radio' rel= 'tooltip' title data-original-title='This is good if you travel alone.'><input type='radio' name='operators' value ='" + element.op_code + "'><div class='icon'><i class='material-icons'> airplane_ticket</i></div><h6>" + element.op_name + " </h6></div> </div>";
                    $('#details_content').prepend(html);
                }
            }

HTML

 <div class="tab-pane" id="details">
                                        <h4 class="info-text">Select the Airline Operator</h4>
                                        <div class="row">
                                            <div class="col-sm-10 col-sm-offset-1" id="details_content">


                                            </div>
                                        </div>
                                    </div>

Hello,

Is there a recomenden way to put the wizard on a modal, I mean about css classes.

thanks in advance

Hi,

Thanks for your great project :)

I have changed the finished button type to submit and the form method to get. But When I fill the form and submit the data, it sends only the country not other inputs. What's the problem ?

Thank's :)

is there any options for right to left or changing direction of steps.
[ next, back, finish ] ?

Hey there?

Love your Wizard thing. Just amazing! Is there any possibility to mold your wizard like this listed below:
https://fundraiseup.com/#demo-donate

One step at a time? Or may be any quick fix? Otherwise, It will take time to fix it for me

Thanks

How to run validation when click the finish button?