Jump to content
  • 0

Back button in Multi Step Form




I have a multi-step registration form. I followed the steps on this article: https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-create-a-multi-page-form/

I was wondering  why there is no back button included. For example, I want to change or edit some information in my previous page, without back button I cannot do it.

Can someone give me some advice on how to achieve this? I hope you can help me. 


- MyMelody

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
On 10/22/2018 at 6:43 AM, LunaLovegood said:

Hi @MyMelody,

You can add this code to the footer of your DataPage: 


— Luna —

How would this work with the way Caspio does multi step forms? If you used this as a previous button for the first step, wouldn't you be submitting two records? 

Say you already clicked the next button after the first step (which is a submission form, not an update form). Then go back and change something and click next again. Those clicks would both create new records, so now there would be one half-finished record in the table. Right? And if you went to the next step, everything you filled out would be gone, because those values would be on a different record.

Link to comment
Share on other sites

  • 0
22 minutes ago, NiceDuck said:

I think of something, However, you would need another single update form. When you press the back button or link, you will be redirected to a single update form which contains the values on your first submission form. Hmmm You may refer to this picture for elaboration.

Thanks, @NiceDuck. That seems like it would work. It kinda sucks I would have to use 4 DataPage slots for a single 3 step form... But if this is the only way to do it I'll give it a shot. Thanks again.

Link to comment
Share on other sites

  • 0

Another way to try it...

If you didn't want the first form to actually make a submission to your table, you could set up that first form as virtual fields an then pass the entries to the second form as parameters.  The second form would then receive those parameters and enter them into the actual entry fields, which you'd hide (since the user has already "entered" them in the first form).  When the user fills out the new fields he/she sees in the second form, the entries for both the first and second form are then entered into your data table in one go.

To enable a user to go back to the first form prior to submitting the second form, create the back button as an actual link back to the first form, (or try the back button javascript) and set up the first form to also receive parameters so that it "catches" the same parameters it sent to the second form.  This then pre-populates the fields in the first form with the info the user already put in.

One complication is ensuring that that you don't run into a situation where old parameters are sitting around and appearing in the first form's field uninvited.  You can use the ?cbResetParam=1 when first directing the user to the first form, which will clear any parameters before the user sees the form.  However, if you do this, the link from the second form to the first form will need to be a url link that doesn't have this parameter clearing instruction.  If you use the javascript "back" button, it's the same as hitting the browser back button and the first form page url will still have the ?cbResetParam=1 which will clear the entries.

I have not tested this approach for your use, but I've used a similar setup for another purpose. 

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.

Answer this question...

×   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...