Jump to content

Multi Step Form Customization

Recommended Posts

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?

Link to comment
Share on other sites

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;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...