Step 1: Figuring Out the Mechanics

Logistically, I know how personality quizzes work. It’s essentially a form that you choose your answer, and based on which answers you pick, you get a different result. Figuring out exactly how to translate this into an online tool with functions and a bit of math proved to be a bit more mentally intensive than I would have thought. What got me caught up for a little while was how exactly to turn someone’s answers into an end result.

So I took a trip down memory lane and researched how people scored personality quizzes back in the olden days… I’m talking teen magazines. From my own (albeit limited) experience with teen magazine personality quizzes, you would usually choose between 3 options for each question, then each response would be given an associated numerical value, which you would then total up. Depending on how many points you scored, you would fall into one of three or four categories, usually labelled with something like “if you scored between 5-10, …” The other style was “if you scored mostly As, …”, however this could also be broken down into a total score as well.

Thankfully with the introduction of form builders and calculations, we won’t need to keep the answers in the same order every time. It gives the quiz a bit more unpredictability for the quiz-taker, which helps to get accurate results.

I took inspiration from popular teen magazines for how their quizzes were scored. Some had a “for every A, 1 point, for every B, 2 points, for every C, 3 points” system after you circled your answers. Others, like the example here, went for a “if you scored mostly As, etc.” approach.

Step 2: Writing the Quiz Questions

Looking back on the whole process, actually writing out the questions was the hardest part by far. I think I’m a fairly good writer, but it was challenging coming up with questions that alluded to the answers we wanted to get, but didn’t say them outright. In this example, we wanted to see how experienced our target market was with marketing by comparing it to a relationship status. The worst part about any personality quiz is when the answers point you in a very obvious direction. Sort of like every amateur “Which Hogwarts House are you?” quiz ever, where the questions basically boiled down to “Are you courageous? Are you smart? Are you evil? Are you kind?” and let the quiz taker manipulate their answer into whatever house they wanted to be in.

To combat this, we first came up with the concepts for each of the questions, such as “what/how many social media platforms do you use?” and “how often do you analyze your marketing?”, then came up with the answers for a beginner, intermediate, and advanced level as if it was a survey rather than a personality quiz. After that, we brainstormed what scenarios we could use that had similar levels of choice, so “what/how many social media platforms do you use?” turned into “how do you choose a restaurant for date night?”.

Once we had our 5 questions and their answers for each level, it was time to put it into Ninja Forms!

Step 5: Connecting to Convertkit

Once the form itself is built comes time to connect it into the rest of your marketing. For us, that meant adding people to segments and tags in Convertkit. We don’t actually use the “forms” feature since everything on our site is with Ninja Forms, but the Ninja Forms Convertkit add-on lets you add people to unlimited forms, sequences, tags, and segments (which is exactly what you want in an integration). For this example, we added people to the sequence for each segment result in Convertkit, and also tagged them with their result as well. The email sequence had a quick “hey here’s your result” email, and included an opt-in button for people who were not already on our list. This sequence and tag were duplicated for the other two outcomes.

Note: if you don’t see your updated sequences, tags, and forms available in Ninja Forms, don’t worry! Just go into your settings and refresh your API connection, there should be an easy button to press that does this for you. This is why we set everything up in Convertkit first and then connect it to Ninja Forms after.

Click the image to make it bigger! Here’s how many emails and actions this one quiz has. One success message and Convertkit connection conditionally formatted for the result, one Slack connection to notify our team, and a Store Submission to make sure we can troubleshoot if something isn’t working right. Since we have the Slack connection, I’ve disabled the Admin Email to keep our inbox client-focused.

Step 7: Setting Up Notifications in Slack

Ok so technically this one step could be a whole other tutorial (which I do plan on making eventually), but here are the basics.

We use Slack for 99% of our communications, so it only made sense to start getting form notifications in Slack as well. I set up a new bot for Quiz Takers (called the “Quiz Taker Fairy” – all of our bots are fairies), gave it a profile image and name, and added an incoming webhook – this is the part that connects it to your form. You’ll get a generated URL that you pass your data through to have it show up in Slack on whatever channel you want. For us, that’s an Email Notifications channel, but it could be a direct message to yourself as well.

In the Emails and Actions tab in Ninja Forms, I added a new Webhook and named it the Slack Quiz Taker Fairy so I’d be able to find it later. Then, I pasted the URL from Slack into the Remote URL field, and set the method to Post (that means it sends the info to that URL rather than grabbing it from the URL). Under Args (arguments), set the key to text, and the value to whatever you want to show up in Slack. For us, that meant an emoji, some information about the person, and finally a call out to @here to notify anyone who was online. If you’re new to Slack, make sure to use @here instead of @channel so you don’t start getting tons of notifications in the middle of the night! This Value is set up in markdown text, so read up on the formatting if you’re not familiar and want to add emojis or make things bold.

Here’s what our Value is: :sparkles: *{field:first-name}* ({field:email}) just took the *marketing relationship* quiz and got this result: *{field:segment-result}* :sparkles: <!here>

Note: you’ll want to create this Value string in a text editor or another window, since the Ninja Forms field doesn’t actually scroll. That way, you’ll also be able to use a tester to make sure your formatting shows up correctly in Slack, then add in the fields later.

Click the image to make it bigger! Here’s what the Webhooks set up looks like in Ninja Forms. Be sure to toggle the Advanced drop down and enable “Encode Args as JSON string”, otherwise your info won’t pass through!

Click the image to make it bigger! An example of what the notification looks like in Slack. There’s just something about a cute little fairy telling me my marketing is working that makes me want to do a happy dance.

Step 8: Creating the Webpage

FINALLY once all of the backend work is done, it’s time to create the page on which your quiz will live. When designing this page, be sure to keep it simple and focused on the quiz itself, and make sure you keep mobile users in mind. If you’ll be sharing this quiz on social media (which you should!), your audience will most likely be viewing your quiz on a mobile device. Your quiz shouldn’t scroll sideways or get cut off if you can help it, nor should it have a massive section that the user needs to scroll past to actually get to your quiz.