In 2015, Zenni Optical, an online eyeglasses retailer, launched a quiz called “You’ve Been Framed” with the help of Internet Marketing, Inc. Within six months, the quiz had generated 29,410 leads, over $1 million in revenue, and had a 9655% return on investment. Two years later, as I write this post, the quiz has been taken over 807,000 times and that number continues to rise. This is just one of many excellent examples of how powerful and effective interactive content can be for a business.
Interactive content is so successful because, as SnapApp puts it in their Introduction to Interactive Marketing, people “have a natural desire to assess, compete, compare themselves, share their opinions, and win.”
Pretty much any piece of content can be made interactive, but for this article I’ll be focusing specifically on calculators, assessments, quizzes, or anything else where a user is inputting information in exchange for a response. These pieces of content are especially powerful because at their heart, they are all forms. While filling out information on a static form may not be an especially appealing process, if that form is packaged as an interactive quiz or assessment, the user’s experience suddenly becomes fun.
Creating Interactive Content
For web development, it is important to separate the purposes of HTML, CSS, and Javascript. In a broad overview, HTML provides the content and structure of the site, CSS provides the visual style of this content, and Javascript tells the browser how to react to certain events, and can be used to change the content, structure, or style of the site dynamically. With this in mind, a good understanding of Javascript is key to building appealing interactive content.
The specific functionality of your content will be determined by its purpose, its audience, which devices it will be viewed on, and other variables. However, one element that pops up often in interactive content is carousel motion. If your quiz has 10 questions, putting all of those onto the page at once can be overwhelming and distracting. However, if your user first sees only one question and choosing an answer animates the next one into place, they are now focused on a single area of the screen, but that area is dynamic enough to prevent their attention from drifting away.
Additionally, an animated progress bar can go a long way in keeping the user focused on completing the task at hand. (For those of you who enjoy psychology, I highly recommend this blog post by Kiss Metrics for a great in-depth look at what makes progress bars so successful–and why Tetris is so addicting.)
Aside from the visual aspect of these forms, you’ll also need to know how you want to calculate results and where to store them. You’ll want to calculate these before the form data is submitted, so they can be saved and stored with the user’s information. Depending on the quiz in question, there are different ways to go about this process, but, in general, you should know how to use the current values of fields to generate a value to write into a hidden field.
Bringing HubSpot Forms to Life
Because so many of our clients at Stratus are on the HubSpot COS, I want to make sure to briefly discuss bringing the default HubSpot form module to life.
The form module is rendered onto the page by Javascript brought in automatically by HubSpot. This makes the actual form’s HTML a bit more removed from the site’s creator than many other modules, and can make adding interactivity more difficult. However, this is nothing that a bit of Javascript isn’t able to get around. And, because we’re specifically talking HubSpot now, jQuery is included on the page already, so we can take advantage of that.
The basic idea here is that you will be using Javascript to alter the HTML structure and CSS class names of the form rendered by HubSpot to allow for more customization. Because you will be performing these operations on an element that is itself being rendered by a script, make sure to wrap your custom Javascript in a “$(window).onload()” event. This guarantees that the form has loaded before the script begins its work.
Again, this step will be customized depending on what exactly you are building, but some useful Javascript and jQuery functions for changing the structure of the form are:
- .wrap() and .wrapAll()
- Wrap existing HTML elements in new ones
- .addClass()
- Add a class to an element or group of elements to allow for more specific targeting in CSS
- .append() and .prepend()
- Add HTML elements after or before other elements
- .parent(), .children(), .find(), and .closest()
- Traverse the DOM vertically, going from parent elements to children elements and vice versa
- .slice()
- Take a subsection of an array of elements
- Can be used in conjunction with .wrapAll() to create neatly packaged chunks of the form
Now, that section of the page is going to look pretty ugly as the form takes on new shapes, structures, colors, or anything else your Javascript may do. So, hide the form until it is ready to be seen and put in an animated preloader in the meantime. There are many resources out there to generate free preloaders for commercial and non-commercial use, with my personal favorite being loading.io.
Finally, if you are manipulating HubSpot form fields with Javascript, make sure to use “.change()” when giving a field a new value. If you’re testing code in the browser console, this rule won’t apply, but as soon as it’s moved to a script tag or external .js file, those functions will break without “.change()”.
Conclusion
Building interactive content isn’t as easy as building static content, but it’s also a great way for every member of your team to showcase their creative abilities. Your marketing team gets to come up with an inventive new way to engage your audience, while your designers and developers work together to create a smooth, enjoyable, and unique user experience. And, if you build your content guided by thoughtful and careful research, the ROI that it brings in should be well worth the extra work in the end.
Note: In January 2017, a HubSpot employee stated that they are looking into potentially altering the Forms API to accept CORS AJAX requests this year, because this endpoint does not require authentication. If this happens, it means you could write a custom HTML form from scratch, host it on your COS page, and send the data via a client-side request to the Forms API, instead of using the method discussed above.
