Hi all,
I’m trying to build a multi-page user input form for my company site, similar to Modsy’s user sign-up flow https://www.modsy.com/project/room , so people can customize and save their preferences. Ideally, their preferences would be saved into the same database, but Wix unfortunately doesn’t offer this feature right now. Has anyone been able to do this on their site through Corvid or some other method?
Any advice would be much appreciated!
This is doable using either Multi-State Boxes or Slideshows. You can save the data in the end using Wix Data Insert
If you need help with code debugging, please post your code and what error you are getting.
See the Multistage Form example .
Thanks Shan, I’m going to try this out!
Hi Yvonne, Try it out and let me know the code, even I want to do something similar
I didn’t know about the multistage box because I’m fairly new to this. But I needed to gather a lot of data for a form on my site, and I went with a similar method. It may be harder than just going with the above method for all I know, but it was a pretty cool thing to help me understand more of the wix api.
I used session data to store the info. And just set up a series of light boxes that said next at the bottom and linked it to the next step. In the final document, I called all the session data, and connected that form to a database. I had to give access to everyone to read and write this data, which I found confusing, but it should still be secure given that the data can only be populated by your current session data in the browser or edited with what you put in it while on the form. This gives the user the final ability to review all the data before final submission too. And I added a button to this page that submitted the data obviously. I didn’t have to register my users but that should easily be able to be applied for your use.
I had to allow the user a way to download that data as a pdf, which was a whole other thing on its own haha. Good luck though. I’ll be posting guide to how I did this very soon by the way. Not sure if it will help anyone, but again it was useful just to learn it. I’ll add a link in the comments when I post it. It was fairly simple to do too, but I’m new to this so it took me a while. But maybe it can work for you too.
thanks for sharing, Patrick! pardon my ignorance, but how did you “call all the session data”? i’m interested in trying to figure this out as quickly as possible so your thoughts are much appreciated. looking forward to checking out the guide too!
Here is an example. this is just one variable but you can more variables under the button click function and then just call them on the final page just like the example below.
Example of light box code:
import {session} from ‘wix-storage’; //this will be the exact same for you
export function button1_click(event) { //click event is assigned to button in the properties panel
session.setItem('userName', $w("#userName").value);
//set userName to be whatever but you need to call this later
// make sure #userName matches input id on page
//set this input id by click the input box you want to assign and right clicking for properties panel
}
$w.onReady(function () {
})
Example on final “call” page:
import {session} from ‘wix-storage’; //still exactly the same
$w.onReady(function () {
let userName = session.getItem(‘userName’);
// let userName can be set to anything, but needs to match the userName set equal to .value below
//the userName in the session.getItem(‘’) needs to be the name you set as the variable on lightbox
$w(‘#userName’).value= userName;
//#userName is again set to match id of a new user input element on the final page
//and finally the last userName is equal to the let userName above
});
I’m not sure what you mean by preferences, but you can also utilize this method, but replace session with local. this will store the data set as local, so that anytime a person comes to the page on that browser their info will be stored still. This is probably getting into some ethical grey area in some uses, but give you want them to be members, you can probably utilize both session and local depending on the information you want to remember permanently vs the sensitive info you want to store briefly until it is safely entered into your database.
@yvonnetleow @patrickoconrad Using lightboxes is not ideal for (1) speed, (2) newer mobile devices seem to have performance issues with lightboxes and for (3) user flow reasons.
Lightboxes in general are slow. Opening and closing a new lightbox each time may slow down the feel of the form.
Newer devices (like the iphone XR) perform differently with lightboxes. Some elements scatter around and become unclickable even though they are fine on older model mobile devices.
If a user clicks anywhere outside the lightbox area, the lightbox will close. Trying to get the user to continue where they left off would be challenging and involve uncessary code. In general, the more code you use then the slower your page becomes.
Wix posted a link (in the above comments) to a multi stage form example. This means a form that has several steps. You should consider following that tutorial.
Side note: There are mixed statistics on conversion rates when using multi step forms. On one side, it is said you can triple conversions by creating multi step forms (as it creates a sales funnel feel). On the other side, it is said having too many steps on a website may cause increase bounce rate (especially on mobile) <---- for the reason that people “want it now” and don’t want to “wait so long” for something. I recommend A / B testing to see what style of form performs better for you. Multi step vs single step (with perhaps conditional questions that only show up IF they answer a certain way, etc).
The goal should not be to create something that (technically speaking) works, looks pretty and is creative or unique. The end goal should be to create something that the end user can easily use, is not confusing or time consuming so that in turn can create higher conversions instead of higher bounce rates.
@code-queen thanks for the feedback!
Good news – we set up the multi-state box and it’s all being stored in a dataset. For the UX, do you know how I can link back from a separate webpage to the last state of a multi-state box? Since it’s only one URL, I can only link back to the beginning of the multi-state box.
Good news – we successfully set up a multi-state box that’s storing all the data in one dataset. Relatedly though, do you know how I can link back from a separate webpage to the last state of a multi-state box? Since it’s only one URL, the button is only going back to the first state of the multi-state box.
@code-queen Thanks for this information! I’ve been following a lot of your tutorials, so I really appreciate the personal support! For my site I’m actually using both a multi-step form and a form to fill out all data. Hadn’t considered running a test to see if I should just focus on the one method, but that is probably something I’ll end up doing. One thing that I have realized is how slow the light-boxes have been. I’m definitely going to look at implementing this instead. Any chance you know of how to fix issues with not redirecting to the “my-account” section on login? I followed your tutorial, but it just won’t redirect and the page needs to be refreshed to show that someone even logged in. I need a login that doesn’t allow users to register as they will be signed up by the company. I’d also like to direct them to set up a password on first time login. Any suggestions as to a thread or anything would be great. I feel like i’ve already started too many haha.