Save Visitor Conditional with airSlate SignNow

Save visitor conditional

this answer is powered by ask quest EECOM get help with your Squarespace questions or tasks on demand we've been looking at how to add conditional logic to your form on your Squarespace site so here we have a form where we've already added that conditional logic if the user answers the question here do you need a scholar is the answer yes then they can go ahead and complete the rest of the details on the farm however if they select no then it just says thank you alright so that's what we're gonna do today with our farm so here's what it looks like by default so rather the end users less yes or no to get to the first question they're still apps to kind of completely rest of the form and we're going to stop that option if they select no for do you need a scholarship and we'll just display a thank you message and if they say yes then they can completely rest of the form so that's what we're gonna work with today so the first thing we're gonna do is to enter the backend of this site click where it says second let's go to advanced and next click where it says code injection now here in the header portion we're going to first add some CSS that's gonna hide these additional fields that we don't want the user to submit so to get those fields are getting IDs for those fields what we're gonna do is just right click on the label go to inspect element and this will show us the well it'll show us the div pretty title but we want to hide both the div and also be the input field so for any name field in Squarespace it has like a first name my last name laid out like this it's actually covered in a field set and the ID we want this ID here that says name - Yui and so forth because we want to get the element that's gonna cover both the first and last name fields and we want to hide the entire thing label fields and even you know right so say our first name last name and this feels that pretty mean covers everything so we're gonna grab this ID here by just double-clicking and we're gonna hit ctrl C to copy and then in our header code first you're gonna add our spell tags opening it and closing spell types and they will add hashtag and control V to get our name type and we'll do the same thing for email this right click on the label go to inspect element and here instead of a field set because it's just one input field whereas the name was - it's using a div and we want to get this ID that's here so we're just gonna double click on that starting with email crunch we'll see I'm in our code again you'll type hashtag ctrl V and we're gonna do the same thing for the subject and all the other fields that we want hidden again double click where it says taps on the ID and hash I can feel really taste better and the very same thing for the message right click on the label inspect element and here's our ID that covers the entire message that's are going to double click on that ctrl C X I control V and those are all the elements because here's its submit form so I'm just going to close this and as we're gonna hide those so we're gonna add our curly braces opening and closing curly braces and between that we're gonna type display:none so we're gonna save those changes and as you can see all of the fields name email subject message field those are all hidden and we just have our first question and it's submit button so now that that's done we need to add that logic to the yes and no fields for the first question and we're gonna do that by adding some JavaScript and some jQuery into the footer section of the site and your JavaScript code it should always go into the footer so the first thing we're gonna do is to introduce or to link some jQuery the decorate package to your Squarespace site so you're gonna visit the website code jQuery comm slash jQuery and I typically use the one that says jQuery core and I always use the minified version so we're gonna click on that and we're going to copy the code integration and I'm going to hit ctrl C to copy and here in our further session I'm going to hit control V to paste that in we can hit save so we save those changes and we've now introduced jQuery into the site and the next step would be to add some JavaScript that's gonna actually take effect when you click on either yes or no so we're gonna start typing that so we're going to add our script types okay and closing script tags and we're also going to add our on click code which is just dollar sign curly bracket start clicked and we are dysfunction and our curly braces in the closing brackets and we're going to add some single quotes here I'm greatly cleaning this code we're gonna add the regular linking radio input buttons but we need to get the ID for these radio buttons so to do that you right click on where it says either one of these in labels and go to inspect element right and that will take us directly to the radio buttons and what we're looking for is that this the div that surrounds the entire radial field and what we need is the ID so it's not this one because this doesn't have an ID at all and what we're looking for it is this this one that starts with ID equals radio - so we're going to double click on that and hit ctrl C to copy no clothes or so and we're going to add our hash tag print will Rita piece space and then input because you want to target only where the person hits the input field that's in that radial button section radial element section so whenever someone clicks yes or no the first thing we want to do is to get the value of what the person selected so we can type here selection equals this top so this gets the value of whatever the person selected and we can test it out by typing alert selection just to make sure we've got it all right so far we're gonna hit save here and now if we hit yes it'll let us know the presence laughter yes if we hit no it'll let us know that as well so that's working perfectly so we can take this out and proceed with our code so let's or them do if selection equal to yes then we want to show the form icons that are currently hidden so to do that we'll type a dollar sign dot show and between hair we're going to type dot farm - item and I don't show all of the elements that are hidden you wants that we hid right above here it'll just show all these alright so once you've done that we're gonna now add some code that says else if selection equals no then what we want to do is to replace me in the contents of the form so we no longer wanted to submit anything we'd no longer want them to see this content here we just want to replace this section with the message so what we're gonna add is dollar sign we've got HTML our single quotes here and what we're gonna see is replace the form contents we MLR the all of the form contents with our message and the message will appear really under this pipe thank or you can type any message here so let's hit save and we're gonna test that out so first if the person slept yes you'll see all the form of well-formed fuels if they hit no that form this replaces a message that just says thank you all right so that's exactly what we want to happen so it's working perfectly was this helpful ask a square space question now ask Westie calm