Quiz Module storing result as contact custom property

[Mrafey]

Hi!

I am looking to creating a quiz module via HubSpot Deisgn Manager that will essentially entail of 5 questions. Once a user has answered all 5 questions they are presented with a last screen that asks them to enter their email address to recieve their quiz results. The result of the quiz is identifying which endagered animal they are based on the answers they provided in the quiz.

My question is, is it possible to store the result of the quiz onto a contact as a custom property? If yes, how can I go about doing that?

For example; after completing the quiz, lets say the endagered animal they were was an owl. How can I store that value onto the contact as a custom property.

The reason I would like to do this is so then I can segement these contacts based on their endagered animals via HubSpot lists, and also be able to create workflows on HubSpot to send out their quiz result email based on the endagered animal they are.

[erindigsmusic]

@Jnix284 you bring up a really good point! The problem lies in the fact that the above code does not check that the HubSpot forms code sent the event message. Therefore, theoretically anyone could send a matching message to your page and do something malicious, because the code fails to validate the origin of the MessageEvent.

So to remedy this we can modify the code above slightly to check to make sure that the event trigger is coming from the same place:

window.addEventListener("message", function(event) {
  if (event.data.type === "hsFormCallback" &&
    event.data.eventName === "onFormSubmit" &&
    event.origin === document.location.origin) {
    // do something
  }
});

If you don't want to manipulate a HubSpot form, the alternative that I use most often is a custom module combined with a serverless function. Essentially, the module handles building the form HTML and has some JS so that when the form is submitted it sends a payload to a serverless function. The serverless function can then securely connect to the HubSpot API to modify the object (in this case a contact record but this method will work for any object).

I have a custom form module that I've been working on for over a year now that functions this way! It's one of my favorites because like you said there are truly so many use cases for this.

[Jnix284]

Thank you @erindigsmusic your explanation is really helpful!

I've typically worked with a developer to go the custom module route (I imagine they coded it with a serverless function / API as you suggested), I've also found a workaround for simple quizzes that uses hidden form fields.

@Mrafey I don't know how complex your quiz is, it might be too much to sort through with 5 questions, could be worth a shot though.

What I do is create a mapping of the question and answer paths, for each path I create a dedicated landing page with a simple form that asks the user for the basics (name, email) and leverages hidden form fields to submit the answers to each of the questions from the path.

It doesn't require any coding and is best for simpler quizzes where you're asking something like:

Are you one of: A, B, C

Which of these is most important to you: X, Y, Z

And then you have a landing page for AX, AY, AZ, BX, BY, BZ, CX, CY, CZ

The landing pages are identical, it's the form on the LP that is unique to capture the hidden quiz values.

It can be setup in 30-45 minutes once you have your LP design and if you keep your form very simple (low ask) it has a very high conversion rate while capturing the results you want/need to nurture them.

[Mrafey]

Hello @Jnix284 ! Do you have a working example of this? I would like to see how it looks and works.

[Jnix284 · Accepted solution]

Hi @Mrafey unfortunately I don't have a client example I have permission to share - I can share the demo site for the theme we used that has the quiz module so you can see how the functionality of the module itself works.

The last button click is linked to their theme in the marketplace, but that's the step where it would go to the dedicated landing page instead.

That LP would have a form with the email/name properties and the quiz answers would be passed as hidden form properties like this (with a much clearer label of course):

[erindigsmusic]

Yes, you can do this! You'll need 2 things: 

• a custom property on the contact record to store the value set as a hidden field on your form
• a JS function that fires onFormSubmit to calculate the result and pass it to the hidden field before the form is submitted to HubSpot

Your code could look something like this:

let hidden_field_name = "endangered_animal_quiz_results";
let get_results = function() {
    let result;
    // calculate the results based on user inputs
    // return the value that you want to store
    return result
};

window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
        let result = get_results(),
            target_input = $(`input[name='${hidden_field_name}']`);
        target_input.val(result).change();
    }
});

[Mrafey]

Hello @erindigsmusic !

I have tried your solution and unfortunetly it isn't updating the property with the quiz result value.

// Event to capture user quiz results and assign endagered animal into "animal" property
form.addEventListener('submit', e => {
	e.preventDefault();
	
	const userAnswers = [form.q1.value, form.q2.value,form.q3.value, form.q4.value, form.q5.value];
	const n = userAnswers.length;
	
	const finalRes = mostFrequent(userAnswers, n)
	
	if(finalRes == 'A') {
		animal = "Owl"
	} else if(finalRes == 'B') {
		animal = "Bear"
	} else if(finalRes == 'C') {
		animal = "Orca"
	} else if(finalRes == 'D') {
		animal = "Moose"
	}
	
	quiz.classList.add('q-none');
	lastSlide.classList.remove('hidden')
})

This function above is created for the quiz submit button which takes the users answers from the quiz checks their answers and assigns them a animal based on the conditional check I have placed.

Following this is the snippet of code which is for the HubSpot form that is going to capture the email and update the hidden input "endangered_animal_quiz_result" and assign it the value that is within the animal global property.

// HubSpot form submit event to store endangered animal result value into contact property
let hidden_field_name = "endangered_animal_quiz_result";
window.addEventListener('message', e => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit' && event.orgin === document.location.orgin) {
		let target_input = $(`input[name='${hidden_field_name}']`);

		target_input.val(animal).change();

	}
})

After filling out the quiz and submitting the HS form in the end, when checking the contact property information on HubSpot I receive the following message "submitted quiz-test-form  on quiz-test-form . No properties updated."

I am 100% sure the animal property is not undefined as I logged it within the function to see its value and it shows up. Its just when trying to assign the value to the hidden input field it isn't occuring.

What could be the possible issue that the input field is not getting the updated value? 

Thank you!

[Mrafey]

Hello @erindigsmusic !

Where did you initialize the variable "target_input"?

[Jnix284]

@erindigsmusic I've always heard it was possible with JS, but was advised against it by other developers due to security risk of capturing it on the front-end - I know the bare minimum about JS, can you help me understand how this works and confirm whether it's safe to do it this way?

I'd love to use a solution like this, there are so many use cases! Appreciate any insight you can offer!

[SteveHTM]

@Mrafey - is your quiz designed around or look like a form? I'm trying to understand the cnstraints you are imposing on a sokution.

Steve

[Mrafey]

Hello Steve!

Yes the quiz is a form. Here is a online video example I found when researching into building this module.

Let me know if this helps!