Hello. This is a topic I have been searching through here and have found answers and helpful feedback, but I still can’t resolve the issue for myself. I have created a customized mutli-step form using Corvid (Velo) to gather various inputs from my site members. I have broken it down into a multi-step form that contains 5 pages. I used both external recommendations (https://mtechwizard.com/how-to-create-multi-page-form-on-wix/) as well as internal (https://www.wix.com/velo/forum/community-discussion/solved-multi-page-form-why-do-we-think-it-is-not-working), but still no avail. I have redone the code many times to match various suggestions and think I might actually have done that correctly, or pretty close (not receiving any errors and I am able to submit the form when in preview mode.) However, the database continues to create multiple rows for one submission entry. I will share my code if necessary, but don’t want to take up too much space right here. Any feedback is greatly appreciated!
Please share the relevant code - nicely formatted in a code block.
Page 1
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady( function() {
function randomNumber (len) {
var x;
var n = '';
for(var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
$w('#input25').value = randomNumber(10);
});
export function name_keyPress(event) {
$w("#button1").enable()
}
export function button1_click(event) {
session.setItem("formId", $w('#input25').value);
session.setItem("firstname", $w('#input10').value);
session.setItem("lastname", $w('#input9').value);
session.setItem("email", $w('#input7').value);
session.setItem("company", $w('#input8').value);
session.setItem("companyaddress", $w('#input11').value);
session.setItem("city", $w('#input15').value);
session.setItem("state", $w('#input14').value);
session.setItem("zipcode", $w('#input12').value);
session.setItem("phone", $w('#input26').value);
wixLocation.to("/Dataform2");
}
Page 2
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady( function() {
function randomNumber (len) {
var x;
var n = '';
for(var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
$w('#input25').value = randomNumber(10);
});
export function name_keyPress(event) {
$w("#button1").enable()
}
export function button1_click(event) {
session.setItem("formId", $w('#input25').value);
session.setItem("firstname", $w('#input10').value);
session.setItem("lastname", $w('#input9').value);
session.setItem("email", $w('#input7').value);
session.setItem("company", $w('#input8').value);
session.setItem("companyaddress", $w('#input11').value);
session.setItem("city", $w('#input15').value);
session.setItem("state", $w('#input14').value);
session.setItem("zipcode", $w('#input12').value);
session.setItem("phone", $w('#input26').value);
wixLocation.to("/Dataform2");
}
Page 3
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady( function() {
$w('#input27').value = session.getItem("formId");
});
export function email_keyPress(event) {
$w("#button3").enable()
}
export function button1_click(event) {
session.setItem("formId", $w('#input27').value);
session.setItem("wherewilluse", $w('#textBox1').value);
session.setItem("socialsharing", $w('#checkboxGroup1').value);
wixLocation.to("/dataform4");
}
Page 4
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady( function() {
$w('#input28').value = session.getItem("formId");
});
export function email_keyPress(event) {
$w("#button4").enable()
}
export function button1_click(event) {
session.setItem("formId", $w('#input28').value);
session.setItem("image1", $w('#uploadButton19').value);
session.setItem("image2", $w('#uploadButton16').value);
session.setItem("image3", $w('#uploadButton20').value);
session.setItem("image4", $w('#uploadButton15').value);
session.setItem("image5", $w('#uploadButton18').value);
session.setItem("image6", $w('#uploadButton14').value);
session.setItem("file1", $w('#uploadButton17').value);
session.setItem("file2", $w('#uploadButton13').value);
session.setItem("file3", $w('#uploadButton21').value);
session.setItem("file4", $w('#uploadButton22').value);
session.setItem("file5", $w('#uploadButton12').value);
session.setItem("file6", $w('#uploadButton22').value);
wixLocation.to("/dataform5");
}
Page 5
import wixData from 'wix-data';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
$w.onReady(function () {
$w('#input42').value = session.getItem("formId");
$w('#input30').value = session.getItem("avLink1");
$w('#input31').value = session.getItem("avLink2");
$w('#input32').value = session.getItem("avLink3");
$w('#input34').value = session.getItem("avLink4");
$w('#input35').value = session.getItem("avLink5");
$w('#input39').value = session.getItem("avLink6");
$w('#input37').value = session.getItem("avLink7");
$w('#input36').value = session.getItem("avLink8");
$w('#input38').value = session.getItem("avLink9");
$w('#input40').value = session.getItem("avLink10");
});
export function button1_click(event) {
$w("#dataset1").setFieldValues( {
"formId": $w('#input42').value,
"avLink1": $w('#input30').value,
"avLink2": $w('#input31').value,
"avLink3": $w('#input32').value,
"avLink4": $w('#input34').value,
"avLink5": $w('#input35').value,
"avLink6": $w('#input39').value,
"avLink7": $w('#input37').value,
"avLink8": $w('#input36').value,
"avLink9": $w('#input38').value,
"avLink10": $w('#input40').value
} );
$w("#dataset1").save();
wixLocation.to("/2ScanCodeDataForm");
}
You have a lot of code so it’s not so easy to go through it, but…
-
The random number function should not be inside of the onReady() function.
-
Why do you generate a different random number on the first two pages?
-
On the second page you replace the random number of the first page.
-
The second page you have new input fields that are saved over the input data from the first page. Why?
-
On the third page you do not need to get formid and then set formid again. It’s already in storage.
The idea is that on each page of the multi-stage form, you get input from that page, and you save it to storage. Finally, on the last page, you get all of the input that’s been accumulated in storage, and then use it as you need.
Hello again, YIsarel. More help from you, thank you for sharing your expertise. Your willingness to help those of us who are not code-saavy is so appreciated!!
I can’t really answer your questions as I, unfortunately, don’t understand enough about code to explain my usage. I cut and copied from another user who seemed to have helped another member work through a similar issue and then replaced the necessary inputs to match my site pages (I figured that much out correctly!)
Previously, I modified my code from an external site, which worked very well except for the fact that it created separate rows with the same form ID each time you hit the “next page” button (incorporated all the data collected from each page on a different row), which in my case, generates 5 different rows. So the database displaying the information became very cumbersome and hard to work with. I simply want to make the rows combine for one row per form ID. Any ideas on how to do this? Below is the general code I used to make this work as mentioned in this paragraph, I just modified the input elements to match my site.
Initial page code:
import {session} from 'wix-storage';
$w.onReady(function () {
let formId = session.getItem('formId');
if (formId === null)
{
//Generate an unique id for the multi-page form
formId = Math.random().toString();
//Save the form id to browser session memory
session.setItem('formId',formId);
}
//Assign formId in session memory to the form on page
$w('#formIdInput').value = session.getItem('formId');
});
Backend code
import wixData from 'wix-data';
export function combineRows (formId)
{
wixData.query("Contact").eq("formId", formId).find().then
(
(result) => {
let rows = result.items;
let rowIds = [];
//Collect ids of the rows that need to be removed from collection
for (let row of rows)
{
rowIds.push(row["_id"]);
}
//Go through each row, and add the row data to the first row
for (let index = rows.length - 1; index >= 1; index-- )
{
//Go through each field in each row, and add field value to the first row
for (let field in rows[index])
{
if (rows[index][field] !== null)
{
//Assign field data on each page to the same field on the first page
rows[0][field] = rows[index][field];
}
}
}
//Remove all the rows from collection
wixData.bulkRemove("Contact", rowIds)
//Insert the combined row (the first row) to collection
.then
(
(removeResult) => { wixData.insert("Contact", rows[0]); }
);
}
);
}
Then go back and replace page code with:
import {session} from 'wix-storage';
import {combineRows} from 'backend/multi-page-form';
$w.onReady(function () {
let formId = session.getItem('formId');
if (formId === null)
{
//Generate an unique id for the multi-page form
formId = Math.random().toString();
//Save the form id to browser session memory
session.setItem('formId',formId);
}
//Assign formId in session memory to the form on page
$w('#formIdInput').value = session.getItem('formId');
combineRows(formId);
});
@yisrael-wix or others, any thoughts on how to solve the row issues? Thanks!
My first suggestion is not to go to other pages.
add evrything on the same page but in different containers.
Expand only the first and collapse all others,
When they press the button, the container collapses and the next expands.
i use collapse and expand to avoid empty spaces on the page.
this way you always have all the data on your page and you can use all this data when submiting it to the database.
Kind regards,
Kristof.
Thanks for the feedback, Kristof. Is there special code (collapse/hide type of directions, etc) that you have to add when you go this route?
Nope you can just do $w(“YourElement”).collapse() or .expand()
it will do the same as hide except the elements below it wil move upwards to remove the space.
when you show/hide you keep the space of the container.
You can also use a Multistate Box . Instead of collapse/expand, just go from one state to another.
This example might help: Multi State Form
I have been working all day on this @YIsrael, trying to follow your examples to the T and make sure the code is correct. (I have some experience with Multistate Boxes). When I go to try to fill out the form to test it in both preview mode and live, clicking on the first “next page” button returns nothing whatsoever. The button turns black, but it does not proceed to the next page. Here the code. No obvious errors showing up in the code box that I am seeing.
// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
import wixData from 'wix-data';
$w.onReady(function () {
$w("#statebox8").changeState("state1");
});
// check fields in State1 to enable Continue button
export function firstname_input(event) {
checkContinue1();
}
export function lastname_input(event) {
checkContinue1();
}
export function email_input(event) {
checkContinue1();
}
export function company_input(event) {
checkContinue1();
}
export function companyAddress_input(event) {
checkContinue1();
}
export function city_input(event) {
checkContinue1();
}
export function state_input(event) {
checkContinue1();
}
export function zipcode_input(event) {
checkContinue1();
}
export function phone_input(event) {
checkContinue1();
}
function checkContinue1() {
if ($w('#firstname').value.length > 0 && $w('#lastname').value.length > 0 && $w('#email').value.length > 0) ($w('#company').value.length > 0 && $w('#companyAddress').value.length > 0 && $w('#city').value.length > 0) ($w('#state').value.length > 0 && $w('#zipcode').value.length > 0 && $w('#phone').value.length > 0)
$w('#button3').enable();
$w('#button3').disable();
}
export function button3(event) {
$w("#statebox8").changeState("state2");
saveFormData();
}
export function subscriptionplan_input(event) {
checkContinue2();
}
export function dropdown4_input(event) {
checkContinue2();
}
export function otherindustry_input(event) {
checkContinue2();
}
export function companywebsite_input(event) {
checkContinue2();
}
export function fintechurl_input(event) {
checkContinue2();
}
export function uploadlogo_input(event) {
checkContinue2();
}
function checkContinue2() {
if ($w('#subscriptionplan').value.length > 0 && $w('#dropdown3').value.length > 0 && $w('#otherindustry').value.length > 0 && $w('#companywebsite').value.length > 0) ($w('#fintechurl').value.length > 0 && $w('#uploadlogo').value.length > 0)
$w('#button7').enable();
} else {
$w('#button7').disable();
}
export function btnBack_click(event) {
$w("#statebox8").changeState("state1");
}
export function button7_click(event) {
$w("#statebox8").changeState("state3");
saveFormData();
}
// check fields in State3 to enable Submit button
export function where_Will_Use_ScanCode_input(event) {
checkContinue3();
}
export function want_Social_Share_input(event) {
checkContinue3();
}
function checkContinue3() {
if ($w('#textBox2').value.length > 0 && $w('#checkboxGroup2').value.length > 0
$w('#button4').enable();
} else {
$w('#button4').disable();
}
}
export function button9_click(event) {
$w("#statebox8").changeState("state2");
}
export function button4_click(event) {
$w("#statebox8").changeState("state4");
saveFormData();
}
// check fields in State4 to enable Submit button
export function image1_input(event) {
checkContinue5();
}
export function image2_input(event) {
checkContinue5();
}
export function image3_input(event) {
checkContinue5();
}
export function image4_input(event) {
checkContinue5();
}
export function image5_input(event) {
checkContinue5();
}
export function image6_input(event) {
checkContinue5();
}
export function file1_input(event) {
checkContinue5();
}
export function file2_input(event) {
checkContinue5();
}
export function file3_input(event) {
checkContinue5();
}
export function file4_input(event) {
checkContinue5();
}
export function file5_input(event) {
checkContinue5();
}
export function file6_input(event) {
checkContinue5();
}
function checkContinue5() {
if ($w('#uploadButton33').value.length > 0 && $w('#uploadButton28').value.length > 0 && $w('#uploadButton34').value.length > 0&& $w('#uploadButton27').value.length > 0&& $w('#uploadButton32').value.length > 0&& $w('#uploadButton26').value.length > 0&& $w('#uploadButton31').value.length > 0&& $w('#uploadButton25').value.length > 0&& $w('#uploadButton29').value.length > 0&& $w('#uploadButton24').value.length > 0&& $w('#uploadButton30').value.length > 0&& $w('#uploadButton23').value.length > 0
$w('#button5').enable();
} else {
$w('#button5').disable();
}
export function backbtn10_click(event) {
$w("#statebox8").changeState("state3");
}
export function button5_click(event) {
$w("#statebox8").changeState("state5");
saveFormData();
}
// check fields in State5 to enable Submit button
export function av_Link_1_input(event) {
checkSubmit();
}
export function av_Link_2_input(event) {
checkSubmit();
}
export function av_Link_3_input(event) {
checkSubmit();
}
export function av_Link_4_input(event) {
checkSubmit();
}
export function av_Link_5_input(event) {
checkSubmit();
}
export function av_Link_6_input(event) {
checkSubmit();
}
export function av_Link_7_input(event) {
checkSubmit();
}
export function av_Link_8_input(event) {
checkSubmit();
}
export function av_Link_9_input(event) {
checkSubmit();
}
export function av_Link_10_input(event) {
checkSubmit();
}
function checkSubmit() {
if ($w('#input53').value.length > 0 && $w('#input52'.value.length > 0 && $w('#input49').value.length > 0 && $w('#input48').value.length > 0 && $w('#input58').value.length > 0 && $w('#input57').value.length > 0 && $w('#input56').value.length > 0 && $w('#input55').value.length > 0 && $w('#input54').value.length > 0
$w('#button6').enable();
} else {
$w('#button6').disable();
}
}
export function button10_click(event) {
$w("#statebox8").changeState("state4");
}
export function button6_click(event) {
$w("#statebox8").changeState("state5");
saveFormData();
}
// action for Submit buttion
function saveFormData() {
let toSave = {
"firstname": $w('#firstname').value,
"lastname": $w('#lastname').value,
"email": $w('#email').value,
"company": $w('#company').value,
"companyAddress: $w('#companyAddress').value,
"city": $w('#city').value,
"state": $w('#state').value,
"zipCode": $w('#zipcode').value,
"phone": $w('#phone').value,
"subscription_Plan": $w('#subscriptionplan').value
"type_Of_Industry": $w('#dropdown3').value,
"other_Industry": $w('#otherindustry').value,
"company_Website": $w('#companywebsite').value,
"fintech_Url": $w('#fintechurl').value,
"company_Logo": $w('#uploadlogo').value,
"where_Will_Use_ScanCode": $w('#textBox2').value,
"want_Social_Share": $w('#checkboxGroup2').value,
"image1": $w('#uploadButton33').value
"image2": $w('#uploadButton28').value,
"image3": $w('#uploadButton34').value,
"image4": $w('#uploadButton27').value,
"image5": $w('#uploadButton32').value,
"image6": $w('#uploadButton25').value,
"file1": $w('#uploadButton31').value,
"file2": $w('#uploadButton25').value,
"file3": $w('#uploadButton29').value
"file4": $w('#uploadButton24').value,
"file5": $w('#uploadButton30').value,
"file6": $w('#uploadButton23').value,
"av_Link_1": $w('#input53').value,
"av_Link_2": $w('#input52').value,
"av_Link_3": $w('#input51').value,
"av_Link_4": $w('#input49').value,
"av_Link_5": $w('#input48').value,
"av_Link_6": $w('#input58').value,
"av_Link_7": $w('#input57').value,
"av_Link_8": $w('#input56').value,
"av_Link_9": $w('#input55').value,
"av_Link_10": $w('#input54').value,
};
wixData.save("FormSubmissions", toSave)
.then((results) => {
let item = results; //see item below
})
.catch((err) => {
let errorMsg = err;
});
}
});
I didn’t go trough the whole code but make sure you put brackets evrywhere.
This is the first i sa where you missed some.
function checkContinue1() {
if ($w('#firstname').value.length > 0 && $w('#lastname').value.length > 0 && $w('#email').value.length > 0) ($w('#company').value.length > 0 && $w('#companyAddress').value.length > 0 && $w('#city').value.length > 0) ($w('#state').value.length > 0 && $w('#zipcode').value.length > 0 && $w('#phone').value.length > 0)
$w('#button3').enable();
$w('#button3').disable();
}
If you look closer you see that you don’t use brackets after your if statement.
this should be better
function checkContinue1() {
if ($w('#firstname').value.length > 0 && $w('#lastname').value.length > 0 && $w('#email').value.length > 0) ($w('#company').value.length > 0 && $w('#companyAddress').value.length > 0 && $w('#city').value.length > 0) ($w('#state').value.length > 0 && $w('#zipcode').value.length > 0 && $w('#phone').value.length > 0)
{
$w('#button3').enable();
} else {
$w('#button3').disable();
}
}
also… You enabled and then disabled your button 3…? 
added } else { between it since on other functions you do it like that.
Kind regards,
Kristof.
old:
function checkContinue2() {
if ($w('#subscriptionplan').value.length > 0 && $w('#dropdown3').value.length > 0 && $w('#otherindustry').value.length > 0 && $w('#companywebsite').value.length > 0) ($w('#fintechurl').value.length > 0 && $w('#uploadlogo').value.length > 0)
$w('#button7').enable();
} else {
$w('#button7').disable();
}
new:
function checkContinue2() {
if ($w('#subscriptionplan').value.length > 0 && $w('#dropdown3').value.length > 0 && $w('#otherindustry').value.length > 0 && $w('#companywebsite').value.length > 0) ($w('#fintechurl').value.length > 0 && $w('#uploadlogo').value.length > 0)
{
$w('#button7').enable();
} else {
$w('#button7').disable();
}
}
old:
function checkContinue3() {
if ($w('#textBox2').value.length > 0 && $w('#checkboxGroup2').value.length > 0
$w('#button4').enable();
} else {
$w('#button4').disable();
}
}
new:
function checkContinue3() {
if ($w('#textBox2').value.length > 0 && $w('#checkboxGroup2').value.length > 0 )
{
$w('#button4').enable();
} else {
$w('#button4').disable();
}
}
Old :
function checkSubmit() {
if ($w('#input53').value.length > 0 && $w('#input52'.value.length > 0 && $w('#input49').value.length > 0 && $w('#input48').value.length > 0 && $w('#input58').value.length > 0 && $w('#input57').value.length > 0 && $w('#input56').value.length > 0 && $w('#input55').value.length > 0 && $w('#input54').value.length > 0
$w('#button6').enable();
} else {
$w('#button6').disable();
}
}
New:
function checkSubmit() {
if ($w('#input53').value.length > 0 && $w('#input52'.value.length > 0 && $w('#input49').value.length > 0 && $w('#input48').value.length > 0 && $w('#input58').value.length > 0 && $w('#input57').value.length > 0 && $w('#input56').value.length > 0 && $w('#input55').value.length > 0 && $w('#input54').value.length > 0)
{
$w('#button6').enable();
} else {
$w('#button6').disable();
}
}
What are the state IDs? Is it state1 or State1 ?
You have this:
$w("#statebox8").changeState("state1");
Maybe it should be this?
$w("#statebox8").changeState("State1");
@volkaertskristof Thank you very much for taking the time to go through all of the code!!! Little errors like that for a non-expert completely disrupt the process because we don’t know exactly what to look for! I am certainly learning a whole lot about coding though and, if nothing else, appreciate that I am gaining more insight. I implemented your changes but keeping getting a “parsing error, unexpected token else” on line 40 when I run preview mode. Thanks.
function checkContinue1() {
if ($w('#firstname').value.length > 0 && $w('#lastname').value.length > 0 && $w('#email').value.length > 0) ($w('#company').value.length > 0 && $w('#companyAddress').value.length > 0 && $w('#city').value.length > 0) ($w('#state').value.length > 0 && $w('#zipcode').value.length > 0 && $w('#phone').value.length > 0)
{
$w('#button3').enable();
} else {
$w('#button3').disable();
}
}
Hi @yisrael-wix , yes I did double-check the uppercase vs. lowercase of the state and I have it correct with state1. Thanks!
@flatthead Did you try running the example? Running the example will show you how it works.
You didn’t get the code correct. In one example, you do an enable followed by a disable. This is not what’s in my code.
function checkContinue1() {
if ($w('#firstname').value.length > 0 && $w('#lastname').value.length > 0 && $w('#email').value.length > 0) ($w('#company').value.length > 0 && $w('#companyAddress').value.length > 0 && $w('#city').value.length > 0) ($w('#state').value.length > 0 && $w('#zipcode').value.length > 0 && $w('#phone').value.length > 0)
$w('#button3').enable(); // first you enable
$w('#button3').disable(); // and then you disable - why?
}
So, as can be seen by the two lines that I added the comments in red, in the end, the button is disabled. You need to carefully follow the code in my example. Even more important, you need to understand the code so that you can use it correctly. It’s not enough to just copy-paste.
@yisrael-wix Yes, I have certainly been learning more about coding through this process and am gaining a much better understanding of how it all works, and the concepts behind the lines of code. Frustration, too, but that is part of the process!
When I tried the code yesterday with the “else” line of code, I kept getting a “parsing error: unknown else token” message. (It works in the other sections, but not in the first one.) I took it out and then think I forgot to try a different format since I wasn’t getting an error once I removed it. When I add back the else line as you had it, I continue to get the parsing error message. Thanks.