Discussion on Ajax HTML5 jQuery Multi-Step Form


desw does not currently provide support for this item.

60 comments found.

Can this plugin integrate pay pal or stripe.com to pay for packages after filling out the form and when they click on submit it goes directly to paypal or strip to pay with credit card.

For example take a look at this video, id use the plugin thats in the video but your plugin is what i need:


I have answered this before. You can integrate Paypal with this plugin. All you have to do is go to the post.php file and modify your php code to redirect to the Paypal page with the details of payment by feeding from the posted values.

You can modify any section either in Both, Email or Database section which ever you choose.

Feel free to share your source so I can help you out

Presale Question:

I have an application form that people submit basic information into, then that information is “POST”ed to a PHP form that calculates how much is due. Each button has an ID. I have multiple issets like this: (isset($_POST[‘calc_1’])) { to determine which calculation to load, depending on which button was clicked.

My question is can I use this current method and have it display the PHP calculation on the summary, before they submit? I also send emails the same way with multiple (isset($_POST[‘tax_calc_1’])) {

Hello? Is anyone here to answer my question? Basically I want to know if I can display a PHP calculation on summary, by using the inputted data on first section

Oh yes you can, you just need to capture the posted values of the particular input and then make your calculations. You will do this in the post.php file

What you will do is Modify the multi_step_form.js and in the Load_Final_Section function load your calculated values through Ajax. once the calculation is returned add the values or results to the Summary

$(”.buttonClicked”).click(function() { $.ajax({ cache: false, type: ‘POST’, url: ‘post.php’, data: {post_type: type, data_table: table, data_fields: fields, data_values: values}, success: function(data) { if(data){ LoadFinalSection(final_section, data); } } });


add the var data to the LoadFinalSection

function LoadFinalSection(sectionObject, data){

Finally add to the Summary

confirmed_values += data;

And you will be good to go


leo3 Purchased

Purchased this. Can’t get it to do what I want it to do… Is it possible to just have it submit to a php file? I need this function so that I can make it send to my CRM. The php file picks up the names of the inputs and sends it to CRM. Just need a simple post to a file…

Yes you just have to put the value “Database” in the post_type input and it will only post to the database

Yes you can just change the post_type input values to “Database” and it will only post the values to the database.

Can I use this in wordpress? I know it’s not a plugin.

Oh yes I have a wordpress version of this but has not yet been approved by Envato theme. But if you need it we can make a private arrangement

Oh yes I have a wordpress version of this but has not yet been approved by Envato theme. But if you need it we can make a private arrangement

I am sending a message via the contact form of this site.

Pre Purchase question: Can I set the form into: 5 questions with a short text, then possible answers are “Yes”, “No”, I don’t know”, at least there’s a overview/summary with all the answers and then clients are able to send this form to us and a copy to the client??

Is it possible to integrate it into Wordpress??

Thanks a lot.

Sorry for the delayed response, but you do exaclty that just set up your form with radios and the summary will automatically generated for you. To send to more than one receipients you can modify the post.php file

I already have a wordpress version but has not been approved by Envato but can provide it to you on a separate arrangement

I’m trying to do inline validation for a username. In the validate function, if the data_format == ‘username’, I’ve got an ajax call to my php file. If the username already exists in the database a message of ‘unavailable’ is returned. If this occurs then an error message is shown on the form and the error variable is incremented. Everything works in that the error message and corresponding css displays, and the class ‘invalid’ is applied. However, I’m still able to click the next button and the next step of the form is displayed. How can I prevent this? On other steps of the form I’m not able to click next if a validation fails.

Sorry for the delayed response, add a css class called none to display:none; and then give it to the next button as default class. then remove the class only when all the errors are clear by calling $(’.’+next_button).removeClass(“none”);

I have added a html editor CKeditor to the script – but somehow when i get to the summary section the content is back to the previous… what am I missing?

I dont see anything you have done wrong but I would suggest you try the script before putting the Editor then try it again after including the editor then you will be able to tell if there is something conflicting

Hi! I am wondering if you can help me add a function that resets the form to the beginning after a second or so of being completed successfully.

At the last section of the LoadFinalSection function write the code below to reset to the first page //Add a funtion

function loadFirstSection(){ $(section).each(function(){ $(this).animate({“height”: “toggle”, “opacity”: “0”}, “slow”); }); }

var intervalID = setInterval(loadFirstSection, 1000);
setTimeout(loadFirstSection, 1000);

I bought your script. When I try to add google web font to my html page. The final step which is the summary doesn’t show up. There might be some conflict between your script and google web font. Do you have any idea how to fix this?

Now, i know what’s the problem is. It’s securityError in FF. Do you have any solution for this

You have to disable the Cross Browser Security in FireFox

I’m trying to test the default form/functions on my current server, I have changed the email address in the .js file, added the correct coding into the .html file and from review nothing needs changed on the ‘LoadFinalSection’ in the .js file. However it will not send to email, am I missing something here that is not on the documentation? Any help would be greatly appreciated.

Have you set the post_type to Email and also changed the email account in the Email on the form html please check these and try again?

Hi, I have purchased this code but when i am trying to send data to database I am getting following error Column count doesn’t match value count at row 1 can you tell me solution for this

This means that the number of fields set are not matching the posted values please check if the form field names are named correctly

Can I have multiple multi-step forms? I need to have 1. short multi-step form to collect minimal information 2.Collect Paypal payment at the end short multi-form submit 3.Long multi-step form: short multi-step form picked by the user for additional data such as images upload and add more custom form elements 4. Long multi-step form is submitted to Paypal payment to collect balance amount. Can this be done? Also, I am trying to use this plugin with CodeIgniter. Is that OK?

I have not yet tested this Plugin on Paypal or CodeIgniter but just in case I would suggest that you setup the form in sections and Label them appropriately

I like your form. Some prepurchase questions: 1. Can your form results be exported to an Excel sheet after it’s sent to the server?

2. I hoping that one should be able to attach passport photo or other document forms during filling of forms and that the results can all be saved and exported with Excel.

thanks but i haven’t explored the excel bit but if you have a script that exports posted data then i can help you integrate it

Can this script print the client info that caputre?


upsjups Purchased


Thank you for this form.

How can I change the subject of the email to be the name the user puts in the form. I cannot get it to work.


mishelo Purchased

Hi desw ;) Form is great but how can I send email to email adress from form input? Thank you!

Presell question, will this form save data to mysql on each step or only on submit?

Thank you


tborges Purchased

Based on your live example, I want to eliminate the steps and replace the “next” button with the “Submit” button (I want to receive only the First Name, Last Name, Gender and Mobile Number) ...I want to keep it very simple. How can I do that?

Hi. It seems your progress bar is connected to the clicking of the next/back buttons, and not to the amount of the form that is actually filled out.

Do you plan to correct this problem?


tborges Purchased

How can I customize the style from the email that I’m receiving? Which file is this? Where should I go? Please help