Building an Interactive Quiz on the HubSpot CMS

Hi everyone. Thank you for tuning in. In this video I would like to demonstrate a really cool functionality that you can build inside HubSpot by using a custom module, some vanilla Jeff script and a HubSpot form. And this functionality is a multiple choice quiz. And a quiz is going to allow you to retrieve data from your visitors in an interactive way. And by storing the answers in a HubSpot form, you also have all the data available in your CRM. Now, as a bonus, we added a small additional functionality that is going to allow you to redirect the visitor 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 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 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 friends, but my advice is give it a little French twist and you should be fine. 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. 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, we'll be shown a form at the end and this is going to allow us to store our contact details and submit the HubSpot form. Because this little form that we see right here is a default HubSpot 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. 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 form, 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 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. 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 drop down select or multiple checkboxes, 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 URL. And this option is available per answer. So in my questions I can determine the thank you page depending on the answer being given. So 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 code. What we see here is the module HTML of this specific module. We have the section where we're showing the first step of the quiz and that is going to allow you to start the quiz. And we have a little class name that we're using in the JavaScript file to allow the user to start a quiz. And next we have a little for loop that is going to loop through all the slides that we have set in our module. 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. Now you'll see that we use data attributes to store the information that we want to use in our JavaScript file. We're giving it a property, we're passing it a property. So the property of the field in the HubSpot form where we want to store the information in, we're passing it 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, and I'll show you how this works in a second, 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 the next question or the previous question. Now, you 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. 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 first slide. Then we're going to retrieve all the other slides that are set through the repeater field, 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. But the most important part of this specific 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 any form elements like a radio button or an input field, but we're simply creating a div 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. And we're going to retrieve all the inputs with a matching property name from the HubSpot form. So this is going to allow you to store the information in a single line text, or maybe a slack 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 parameter called redirect2. 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 HubSpot 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 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 an event listener on the window and we're going to listen for a message event. And whenever a message event is triggered by whatever, we're going to check if it's a event sent by a HubSpot 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. Makes sense, right? We are going to redirect the user to the redirect to 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 the 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 in HubSpot. You can build a custom HTML form and not use a HubSpot form at all. But in that case, you'll have to use the form Submission API to store your information. But that's quite easy to use, to be honest. Or you can choose to create a script like I did and store the information in a HubSpot form directly by using Vanilla Jef script. Now, if you want to learn more about all cool stuff that you can do in HubSpot in the CMS or CRM, make sure to follow me or Bright Digital. Have a great day.