video: Build a Multiple-Choice Quiz in HubSpot

Hi everyone. Thank you for tuning in. In this video, I would like to demonstrate a really cool functionality that Jka built inside hotspot by using a custom module, some final vanilla Jeff script and a hotspot forum. And this functionality is a multiple choice quiz. And quiz is going to allow you to retrieve data from your visitors in an interactive way. And by storing the answers in a hotspot form, you also have all the data available in your crm. Now, as bonus, we added a small additional functionality that is going to allow you to redirect the nstitute to a different thank you page depending on the answers that are being given. So that is really cool. Let's take a quick look at the quiz itself. So what we see here, right here is the quiz, and I'll quickly go through all the questions to show you how the module itself is working.

And after that I'll start showing the code. Of course, um, we have a button to start the quiz and once we clicked on that button, we get the first question. Now this is a really hard question for most of my US based trends, um, but my advice is give the little French twist and you should be fine. Um, when we are giving an answer, we'll see the next question straight away, but we do have the option to go back to the previous question and change the answer. And no matter how often we change the answer, the information will always be stored in the form that is in the last step. So if we give all answers in this specific quiz will be shown a form at the end. And this is going to allow us to, uh, store our contact details and submit the hotspot form because this little form that we see right here is a default hotspot form with a few custom properties to store the answers of the previous questions.

As you see right now, you see that all the answers that I've given in the quiz are stored in these properties, but I still have the option to go back. And if I give a few different answers, you'll see that the values in this form are updated as well. Now if I submit this form, depending on the answer that is given, I'll be shown a different thank you page. Um, and in this case, the last question is going to determine the thank you page that is being shown. So if my script is working correctly and I submit this forum, I should be redirected to a different page. So this is really nice. Now let's take a quick look at the module itself. So the module consists of a few different fields that, um, is going to allow you to configure this specific module. We have some default settings

To determine the label of the buttons. We have the option to set the content of the first slide, and then we have the questions itself and we have the option to set a subtitle, the question of course. And we also have the option to set the internal name of the contact property where we want to store the answer in. Then we have the option to give or set the answers for each question. And you can set as many answers as you want per question. Um, and this is going to be a pretty important setting because the value has to match the value of the property being used in the form. Now, if we want to store this information in a single line text, this isn't going to be a problem. But if you're using a dropdown select or multiple check boxes, then the value of each answer has to match the value of an option in your property.

Now you'll see that we also have the option to set a thank you page euro, and this option is available per answer. So in my questions, I can determine the thank you page depending on the answer being given. Um, so this are all, these are all the options that we have available in this specific module, but we also have the content for the last slide. Now you'll see that we have a little rich text editor to show a thank you message for participating in this specific quiz. And we have the option to select a HubSpot form, and this is the form that's being used to store all the information from the quiz in. Now let's take a quick look at the goat. Um, what we see here is the module HDL of this specific module. Uh, we have the section where we're showing the first step of the quiz, um, and that is going to allow you to start the quiz and we have a little cloth name that we're using in the JavaScript file to allow the user to start quiz.

And next we have a little four loop that is going to loop through all the slides that we have set in our module. Um, you'll see that we have the subtitle, we have the question available right here, and then we have a second for loop where we're looping through all the different questions. Um, now you'll see that we use data attributes to store the information that we want to use in our Jeffs script file. We're giving it a property, we're passing it a property, so the property of the field in a hotspot form where we want to store the information in. We are passing at the value of this specific answer, and we have the option to pass a different page, a different thank you page if this specific answer is given. And I'll show you how this works in a second. Um, then we have a little progress bar, which isn't that important, and we have the navigation, which is going to allow the user to go to next question or the previous question.

Now you'll see that at the last part of this module we'll have a default HubSpot form and the form can be selected through the module. Um, and this is the form where we're going to store the information. Now if we take a look at the quiz, you'll see that we're first retrieving the fair slide. Then we're going to retrieve all the other slides that are set through the repeater fuels, and then we're retrieving the form from the last slide. Now we have some default functionality to allow the user to navigate through each slide. Um, but the more most important part of this specific rift script is the event listener that is set on each answer that can be given at a specific question. So in our module html, we are not using, uh, any form elements like a radio button or a uh, uh, input field, but we're simply creating a diff with some styling to make it look like a radio button.

And whenever someone is clicking on an answer, we are going to retrieve the property, the value and the link for the thank you page if this is set for that specific answer. Um, and we're going to retrieve all the inputs with a matching property name from the hotspot forum. So this is going to allow you to store the, the information in a single line text or maybe a select property or whatever you want to be honest. Now, if a link is set for this specific answer being given, we are going to store the link in a uh, parameter called redirect two, um, and then we have the most important part of the script, and that is the part where we're going to store the information in the hotspot form. Now, if you want to store information in a HubSpot form, it is not sufficient to simply update the value of the input, but you also have to let the HubSpot form know that the value has changed.

And this is a really important part because if you do not add this in your JavaScript, then it might happen that the information set in the HubSpot form through JavaScript isn't stored correctly. So won't be shown in the form submission or in your crm, but you can make sure that the information is stored in the HubSpot form correctly by dispatching an event on the input. Um, and this is going to let the HubSpot form know that a new value is present. Now, at the end of the script, we have a event listener on the window and we're going to listen for a message event. And whenever a message event is triggered by whatever, um, we're going to check if it's a event sent by a hotspot form. And if that's the case and the event name is on form submitted, that is going to let us know that a form is submitted.

Make sense? Right? Um, we are going to redirect the user to the redirect two link that we stored here. So if someone is going to give an answer that has a thank you page link set in the module, we are going to redirect user to that link instead. So this is a really cool part of this specific script. Now, there are a lot of ways that you can build custom form behavior and HubSpot. You can build a custom HDML form and not use a HubSpot form at all. But in that case, you'll have to use the Form's mission API to store your information. But that's quite easy to use, to be honest. Or you can choose to, uh, create a script like I did and store the information in a HubSpot form directly by using f vanilla Jeffs script. Now, if you want to learn more about old cool stuff that you can do in hotspot in the CMS or crm, make sure to follow me or Bright Digital. Have a great.