Multi Step Form Customization

[kpcollier]

The way Caspio tells you to set up a multi step form leads to an app that looks outdated by 7 years. I have been trying to make a form that looks as if it was actually made in 2019. 

Here is what I have been working on. https://codepen.io/kpcollier/pen/gOOMBQe

How can I get my datapages to work in this workflow? I am stuck on a few things:

How to make the first step of the form 'submit' when you press the Next button.

How to make the 2nd step of the form (single record update) pull up the just submitted record, also while that Next button was clicked.

The ability to go back with a 'Previous' button.

Of course, Caspio tells me that this is possible with their datapages but I need custom coding that will come at a $2,000 charge. 

Can anyone help me out with this, and if so recommend a way to make caspio multi step forms look good?

[Hastur]

Hello @kpcollier
You can implement a similar workflow if you create datapages "on the fly".
It can be done if your datapages use AJAX. All datapages are AJAX by default. 

First of all, you should create a wrapper div where you will load a new step datapage.

On each step of submission, you need to define the custom event to clear wrapper and load new datapage. This event should be fired on click of next/prev buttons.

Example of the function:

function createPage() {
 var dataPage = document.createElement('script');
 dataPage.src = 'https://your_domen.caspio.com/dp/your_app_key/emb?param1=' + val1 + '&param2=' + val2;
 document.getElementById('wrapper').appendChild(dataPage);
}

 

[kpcollier]

Thanks for the response, @Andrew! I'll take this and run with it - I'll update if I get anywhere.