1. Quick Installation & Drag-and-Drop
Step 1: Open any Landing Page or Website Page inside your HubSpot CMS Editor.
Step 2: In the Left Sidebar panel, click on the "Add (+)" tab and search for QuizFlow Pro.
Step 3: Drag the module and drop it onto your preferred section on the page.
2. General Settings & Quiz Types
Access the General Settings group in the module sidebar to configure:
- Quiz Type: Select between Scored Quiz, Personality Quiz, Assessment Quiz, or Recommendation Quiz.
- Quiz Title & Description: Enter rich text headings and intro text for your quiz start screen.
- Auto Next Question: Enable to automatically slide to the next question upon option click.
- Progress Type: Choose between Dots, Progress Bar, or Numbers.
- Shuffling: Optionally randomize questions or answer options for each visitor.
3. Adding Questions & Options
Expand the Questions Repeater group to manage quiz content:
- Click + Add to create a new question (supports 2 to 20 questions).
- Enter Question Title and optional Rich Text Description or Image.
- Under Answer Options, add 2 to 6 options per question:
- Option Text: Label for the option.
- Score Value: Assign numeric score points.
- Aura Glow Color: Pick a glowing background aura color when selected.
- Jump to Question # (Optional): Enter question number (e.g. 5) for skip logic branching.
- Jump to Result Bucket # (Optional): Enter result index (e.g. 1) to skip directly to a specific result.
4. Configuring Result Buckets
Expand the Result Buckets group to set up outcome screens:
- Min Score / Max Score: Define score ranges (e.g. Min 6, Max 11 for Bucket 1; Min 12, Max 18 for Bucket 2).
- Result Title & Rich Text Body: Customized recommendations for matched visitors.
- CTA Text & Link: Set destination URL to redirect users to a product page, booking calendar, or checkout link.
5. Setting Up Lead Capture Forms
Expand the Lead Capture Settings group to connect your HubSpot Form:
- Form Position: Choose Before Quiz Starts, Before Showing Result, After Showing Result, or No Form.
- Select Lead Form: Pick any active form from your HubSpot account dropdown menu.
6. Customizing Design & Theme Fonts
Expand the Styling & Options group to adjust colors, padding, borders, and typography:
- Use Active Theme Fonts: Toggle to `ON` if you want the quiz to automatically inherit your website's active HubSpot theme fonts instead of Google Fonts.
- Colors & Spacing: Change section background, card background, font sizes, border radius, and card shadows seamlessly.
7. Technical Support & Assistance
If you need assistance with setup or custom styling, contact our technical support team at:
📧 Email: gmstudio253@gmail.com