How To Create Conditional Logic Form For Your Wix Website & Save Form Data In Database – Custom Form

hello guys in this video i’m going to show you how you can create a form with conditional logic and based on the user selection you can redirect them to either one page or another page now user redirection is just an option you can take other actions as well in place of redirecting a user to a page but for this video we’re going to be sticking with the redirection function first of all let’s go ahead and build your form all right if first of
all if you don’t have if you never worked with pixmelo before hover on the top of your website over dave moon and click on turn on the import after this click on add go to input and here you’ll have a variety of input selection bars so i’m going to use the free text input element and i’m going to create three of them to capture some user information and then for my conditional logic i’m actually going to use a drop down so this is the drop down
and then finally i’ll have a button and then this is my button over here now let’s go ahead and rename these uh these input elements so let’s say i’m capturing the username so f name l name first name last name email and then the option now i’m going to go ahead and change the placeholder text so the user knows what information to enter i’m going to change this type to email and then your selection all right under your selection let’s add two
selections let’s say black and blue all right so we have two selections over here black and blue and based on this user selection we’re gonna redirect them to a page so before we get started let’s finish up labeling everything and changing the ids of the buttons and then let’s go ahead and actually make the page called black and blue so first i’m going to create the black page and then the blue page all right now at the same time we also want to
save this to a database so what i’m going to do i’m going to create a new data set collection with four values first name last name email and option now let’s give the database a name from database what’s this sub collection for let’s say form submission and then create collection once your collection has been created which might take a while depending on your network connection you’re going to see a window like this now over here let’s create
some new fields so click on that plus sign over here and write down first name now notice that we’ll be using the field key not the field name for your code so remember what the field key is going to be we have first name last name email and then selection all right since our database is now ready we go ahead and start putting the form over here now in order for this form to be more secure we’re gonna enter the form data from the end so click on
code files in the left and right create a new jsw module called submission now under this import the wix data api and then if you go to the 4-bit reference below reference now by the time you’re watching this video go to wix data and under which data go to wix data query and under query fine and then over here you see that pix data find has this options uh this variable called options which will allow you to suppress authorization and hooks now
we don’t need it because since our data this is already set to uh submit by any user but still it’s good to know that if you have a database which is secure and you want to enter data from the backend you need to use this options variable object even over here so go ahead and create an export function data submission now this will be the payload which will pass from the front end and then return wix data dot insert then the database id which is
form data base and this will be the payload and then another comma and then options to override any authorizations so over here let’s go ahead and import this function from the backend on the page so import function name from backend slash submission now let’s create a on click event handler for your button so click on your button and under event handlers click on on click now let’s run some validation before we allow this data to be submitted so
if fname is valid which means it has a valid value l name is valid and email is valid along with the selection sorry option then we allow the data to be submitted else we’re gonna print an error on the browser console all right perfect so we have some conditional logic now which will allow you to check whether the user entered data is valid or not now after this we’re going to create the submit function so we have to let’s open up the database
again and check what the field keys work because we have to assign uh the user entered values to the exact field keys as we have it in the database so the field keys are first name and then class name and then email and selection which will be in small letter so that payload is equal to first name and then the value will be what the user enters last name again value will be what the user enters email and then the selection which is option on the
page now we call the submission function from the back end we send this payload and then we wait for it once the submission has happened we run another validation check to see which option was selected so if option dot value is equal to black we’re going to redirect to the black page as the blue page now in order to redirect we need to import the fix location module so there you have it the wx location module so wix location dot 2 slash lag page
and then the blue page i mean the type over here should be dash not equal to sign all right let’s go ahead and check it so i enter my name and then i should enter blue then i click on submit and as you can see i have been redirected to the blue page so that’s how the conditional logic i know that the conditional logic is working and if you see the database you can see that my form has been submitted the values from my form has been submitted so
that’s how you make a form with some conditional logic and then you save the data and take some action based on the user entered value now the redirection is only an example you can do a lot of things like send a conditional email send a custom email based on the values they selected in your form etc so it’s entirely up to you what kind of creativity you’d like to use so this is basically how you use a form for conditional logic