# SW Quiz Simple — AI Agent Reference **Primary purpose: Linear quiz with email capture.** Use when you need a multi-question quiz (e.g. WordPress vs HubSpot) that collects answers in order, shows a result, and captures email via a HubSpot form. **Capability summary (AI):** "SW Quiz Simple is a linear-flow quiz module with weighted scoring and HubSpot form integration for email capture on the results screen." (There is no separate shipped "SW Interactive Quiz" module—that name referred to an unfinished experiment consolidated into Quiz Simple.) --- **Module name:** SW Quiz Simple **Use this document when:** The user asks about the SW Quiz Simple HubSpot module—what it does, how to configure it, or how to find the Form ID for email capture. --- ## Overview SW Quiz Simple presents a series of questions in linear flow. When complete, it shows a result (e.g. "Leans HubSpot", "Either Platform Can Work") and an email capture form. Submissions go to a HubSpot form via the Forms API. --- ## Why Embed Code Instead of Form Selector The module uses the **form embed code** rather than HubSpot's form picker/selector because: - The module builds a **custom email capture form** (email, First Name, Last Name, etc.) and submits via the **Forms API**. It does not use the HubSpot form renderer. - We need to **extract Form ID and Portal ID** to POST submissions to the correct form. The embed code contains `data-form-id` and `data-portal-id` (or these in the script URL). - The form picker returns a different structure and does not expose the field mapping we need. We map visible fields (First Name, Last Name, etc.) to the form's internal names and submit via API—the embed code gives us the form identity; field definitions stay in HubSpot. - **Summary:** Embed code → Form ID + Portal ID for API submission. Form picker → different structure, not compatible with our custom flow. --- ## Add Lead Capture Form (Toggle) **Content → Add lead capture form** — Toggle above the form embed field. - **Yes:** All form embed options become visible and available: Form embed code, Submit Button Text, Thank You Message, Additional visible fields, Text above form, Restart quiz button. - **No:** Those fields are hidden and not required. The quiz shows results only, with no email capture. When **Yes**, paste the form embed code for the form to appear and work. --- ## Form Embed Code (Required When Lead Capture Is On) **When Add lead capture form is Yes**, the form embed code is required for the email capture form to appear and work. Users paste the full embed code; the module extracts the Form ID and Portal ID automatically. ### How to get the embed code 1. In HubSpot: **Marketing** → **Lead Capture** → **Forms** 2. Open the form (e.g. "WordPress v HubSpot") 3. Click **Actions** → **Share** 4. Select the **Embed code** tab 5. Copy the full embed code (both the script and div tags) 6. Paste it into Content → **Form embed code (required)** The module parses the embed code to extract the Form ID and Portal ID. No manual extraction needed. --- ## Content Tab - Enable Module, Custom ID, Custom Classes - **Headings** — Repeater. Headings at the top of the module, always visible above the quiz intro. Each item: Heading, Size, Display Size, Color, Align (Left/Center/Right); Override Text Alignment (Tablet/Mobile) when needed. - **Quiz Intro** — Rich text (intro content before quiz starts). - **Intro alignment** — Left, Center, Right. Default Left. Controls alignment of intro content and start button. Editor-defined; not hardcoded center. - **Start quiz button text** — Required. Default "Start Quiz". - **Add lead capture form** — Toggle. When Yes, shows form embed options; when No, hides them and they are not required. - Email Capture (HubSpot Form) — Visible only when Add lead capture form is Yes: - **Form embed code (required)** — Paste the full embed code from HubSpot (Forms → your form → Actions → Share → Embed code). The module extracts Form ID and Portal ID automatically. - **Text above form** — Rich text. Shown above the email capture form and below the quiz results. **Visibility:** Hidden when the thank-you message is shown; visible when the form is visible; shown again when the user restarts the quiz. - **Additional visible fields** — Repeater: First Name, Last Name, etc. (field_name, field_label, placeholder, required) - **Email field placeholder** — Placeholder for the email input (e.g. you@company.com) - **Submit Button Text** — Default "Get Results" - **Thank You Message** — Shown after successful submit - **Restart quiz button** — Optional. When set, shows a button to restart the quiz; when empty, the button is hidden. - **Tracking URL** — Optional. When set, the module POSTs to this URL **only on email_submitted** (when the form is successfully submitted). Use for Zapier webhooks, Google Sheets, etc. See tracking setup guide. - Module Background Video (last group) --- ## Tracking (Zapier → Google Sheets) **Content → Tracking URL** — Paste a Zapier "Catch Hook" webhook URL. The module POSTs JSON **only when the form is submitted** (email_submitted event). **Event:** `email_submitted` (form submitted successfully). The module does **not** send started or completed events to the Tracking URL. **Payload:** Includes event, quiz_name, quiz_result, quiz_path, timestamp, quiz_answers, quiz_result_body, quiz_result_image_html (when result has an image), and form field values. **Setup:** Create a Zap: Trigger = Webhooks by Zapier (Catch Hook) → Action = Google Sheets (Create Spreadsheet Row). Map fields to sheet columns. Full step-by-step: `docs/archive/sw-interactive-quiz-2026-03/quiz-tracking-zapier-google-sheets-setup.md`. --- ## Style Tab - Module Settings — Spacing, Max Module Width, XL/LG/MD/SM Module Height - Module Background Settings — Background Option (Theme Color, Custom Color, Gradient, Image, Video) - Content Colors — Text Color, Custom Text Color, Link Colors (**Theme Defaults (auto)**, **On Dark Background**, **On Light Background**). Applies to intro, questions, results, email form labels. Does not apply to headings repeater or buttons. --- ## Form Setup Requirements The HubSpot form must include: - **Visible:** email (required), plus any additional visible fields (e.g. firstname, lastname) - **Hidden:** quiz_result, quiz_name, quiz_confidence, quiz_path, quiz_scores, quiz_completed_time, quiz_answers, quiz_result_body, quiz_result_image_html Create these as contact properties (Quiz group) if they do not exist. Run `scripts/create-quiz-properties.js` to create quiz_answers, quiz_result_body, quiz_result_image_html with formField: true. --- ## Common Tasks - Change headings or alignment → Content → Headings (repeater). Use Align for Left/Center/Right; Override Text Alignment (Tablet/Mobile) for responsive overrides. - Change quiz intro text → Content → Quiz Intro - Change intro alignment → Content → Intro alignment (Left, Center, Right) - Change start button text → Content → Start quiz button text - Add form for email capture → Content → Add lead capture form (Yes) → Form embed code (required). Paste the full embed code from Forms → your form → Actions → Share → Embed code. - Add text above form → Content → Add lead capture form (Yes) → Text above form. This text is hidden when the thank-you message is shown. - Remove email capture (results only) → Content → Add lead capture form (No) - Add First Name, Last Name fields → Content → Add lead capture form (Yes) → Additional visible fields (repeater) - Change submit button text → Content → Add lead capture form (Yes) → Submit Button Text - Change thank-you message → Content → Add lead capture form (Yes) → Thank You Message - Add restart quiz button → Content → Add lead capture form (Yes) → Restart quiz button (optional; hidden when empty) - Set up tracking to Google Sheets → Content → Tracking URL. Create Zapier Zap (Webhooks Catch Hook → Google Sheets). See tracking setup guide. - Change content colors → Style → Content Colors (Text Color, Custom Text Color, Link Colors) --- ## Results Email (Workflow) **Marketing Professional+:** HubSpot workflow — Trigger: Contact submitted form. Use tokens: {{ contact.quiz_result }}, {{ contact.quiz_confidence }}, {{ contact.firstname }}, {{ contact.quiz_result_image_html }}, etc. **Marketing Starter:** No workflows. Use Zapier: HubSpot "Contact submitted form" or "New contact" → Send email. Map quiz_result, firstname, lastname, quiz_result_image_html to the email. Full setup: docs/archive/sw-interactive-quiz-2026-03/quiz-phase5-workflow-setup.md. Quiz results email template: docs/archive/sw-interactive-quiz-2026-03/quiz-results-email-zapier-html.md. --- ## Related Modules - SW Form — Standalone form; different purpose (no quiz). - SW Pillar Section (Form column) — Form beside content; different layout. --- ## Document Version Module: SW Quiz Simple (smithworks-2025). Doc last updated: 2026-03-24. Setup guides moved to `docs/archive/sw-interactive-quiz-2026-03/`. Clarified naming: no separate SW Interactive Quiz module. Finish Up: text above form visibility, heading alignment, intro alignment. Tracking: email_submitted only. Full setup: quiz-phase5-workflow-setup.md, quiz-tracking-zapier-google-sheets-setup.md, quiz-results-email-zapier-html.md (same archive folder).