How to Add a Quiz to Your Squarespace Website with Interact

If you've been wanting to add a quiz to your website as a lead generation tool, but you're not quite sure how to go about it — how to build it, or how to actually get it onto your website — no worries. Today's post is for you.

The wonderful Cara walks through my favourite quiz-building software, Interact, step by step in the video below. By the end, you'll know exactly how to build a fully functioning, email-list-generating quiz for your own site. This is the same type of quiz we use on our own website — ours is built to match visitors with how they'll best find clients, since that's the exact thing our ideal audience is trying to figure out. Before you build yours, spend a minute thinking about what topic would genuinely interest your ideal client. That's the whole quiz built from there.

Watch Cara build the whole thing from scratch below — this one's much easier to follow along with than to read about.

Choosing your quiz type

Inside Interact, you'll start a new quiz from scratch — that's where you get the most design freedom. You'll be asked to choose a quiz type: an assessment has one correct answer per question, a scored quiz weights each answer to land on a result (think "what's your marketing IQ?"), and a personality quiz matches answers to an outcome ("what kind of marketing superhero are you?"). Personality quizzes tend to be the most engaging as lead magnets, since they feel more like the fun quizzes people already take for enjoyment.

Customising colours and fonts

Once you've chosen a quiz type, you can fully brand it — background colour, button colour, fonts, cover image, all of it. Cara walks through matching the button colour to something that pops against your background, and pulling fonts straight from Google Fonts to match your existing brand.

NOT SURE WHICH FONTS TO USE? If picking fonts for your quiz (or anywhere else on your site) has you stuck, grab the Squarespace & Canva Font Pairing List — it's a free guide to pairings that work well together across both platforms.

Writing your questions, results, and result correlations

This is the part that takes the most thought. You'll write your questions and answer options, then build out your result options separately — each with its own description and, if you want, a call-to-action button that sends people to book a call, view an offer, or grab another lead magnet. The last step is going back into your questions and telling Interact which answers should point to which result. It sounds fiddly written out, but it's genuinely a few minutes of clicking once you see it done.

Setting up your opt-in and connecting your email platform

The opt-in form appears after the last question and before the results are revealed — this is the moment you're capturing name and email. I don't recommend allowing people to skip this step if lead generation is the whole point of the quiz. From there, you'll connect Interact to whichever email platform you use (Cara connects to ConvertKit in the video) so new quiz-takers land straight on your list.

Embedding the quiz on your Squarespace site

Once published, Interact gives you a JavaScript embed code. In Squarespace, you'll add a new blank page, add a code block, paste that code in, and turn source code off. From there it's just a matter of resizing and centring the block on the page — and your quiz is live.

WANT TO HAND THIS OFF ENTIRELY? If you'd rather skip the DIY and have it done for you, that's exactly what my team and I do. We've spent a decade writing the book on Squarespace design (quite literally) and have trained over 4,500 designers along the way — we also love designing for clients ourselves, primarily taste-led brands, interior designers, wedding professionals, boutique businesses, and personal brands who want their website to be as strategic as it is stylish. If you're done losing dream clients to a website that undersells you, tell us about your project — we'd love to hear from you.

Having a quiz is great — but if you don't have any traffic going to that quiz or your website, you're going to have a problem.

Watch this next:

---

Build the quiz, connect it to your list, and then go get eyes on it. That's the whole game.

Read this next

• How to Get Web Design Clients by Making Friends — Not Cold Pitching
• The #1 Way to Get Web Design Referrals (+ Upwork Tips You'll Wish You Tried Sooner)
• What If You Didn't Have to Post on Instagram to Get Clients? — Erin's Story
• Complete List: All Fonts That Are In Both Squarespace & Canva
• Website Redesign: The 5-Step Process I Use on Every Project