# Style settings

You can apply different style settings to your quiz both locally (at the question and answer level), and also globally (to the entire quiz). 

## In this section

* [Global style settings](#global-style-settings)
  * [Button styles](#button-styles)
* [Page-specific controls](#page-specific-controls)

***

## Global style settings

These settings are applied to every page. 

<table><thead><tr><th width="144.8203125">Setting</th><th width="287.9609375">What you can style</th><th width="248.55078125">Best practicies</th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td>Use live theme fonts or pick custom fonts; separate font styles for headings, body, accent, and tooltips.</td><td>Stick to two fonts to keep your website loading fast.</td></tr><tr><td><strong>Colors</strong></td><td>General color palette, and specific colors for form fields and tooltips.</td><td>Use brand colors and high-contrast combinations to support accessibility.</td></tr><tr><td><strong>Buttons</strong></td><td>Button font, opacity, corners, colors. </td><td>Use a contrasting hover color to signal tap.</td></tr><tr><td><strong>Input fields</strong></td><td>Border radius, GDPR text alignment.</td><td>Keep placeholder copy friendly (“Your email here”).</td></tr><tr><td><strong>Tooltip</strong></td><td>Icon position, heading and description text alignment. </td><td>Use for clarifying terminology or next steps.</td></tr><tr><td><strong>Custom CSS</strong></td><td>Custom styling and overrides.</td><td>Use sparingly.</td></tr></tbody></table>

### Button styles

You can customize up to three different button styles to control how buttons look in your quiz: Primary, secondary and tertiary.&#x20;

You can:

* **Set styles globally** so all your pages use the same button styles
* **Customize styles locally** on individual questions or pages when you want a more nuanced level of customization

If you choose to customize only the global button styles, here's what they apply to throughout the quiz:

* **Primary** – answer buttons
* **Secondary** – start quiz button
* **Tertiary** – navigation buttons, like Next and Back

This setup helps you keep your quiz consistent, but still gives you flexibility when you need it.

***

## Page‑specific controls

Fine‑tune each step of the journey.

<table><thead><tr><th width="180.390625">Page</th><th>Adjustable elements</th></tr></thead><tbody><tr><td><strong>Intro</strong></td><td>Heading, subheading, button, and main image, custom JavaScript</td></tr><tr><td><strong>Questions</strong></td><td><p>Question format, options to show image and bullets, marketing property name, progress bar toggle, ability to select multiple answers, ability to skip the question, and custom JavaScript.</p><p></p><p>Question heading, description, bottom text, image, tooltip heading and description.</p></td></tr><tr><td><strong>Answers</strong></td><td>Image shape, color, size, style, text alignment, custom URL redirect checkbox.</td></tr><tr><td><strong>Forms and email</strong></td><td>Heading, description, bottom text, button label, image, tooltips, field type, name, placeholder, skip question toggle, hide field names toggle, GDPR checkbox, fake‑email validation, custom JavaScript.</td></tr><tr><td><strong>Results (General)</strong></td><td>Show/hide “Add to Bag”, “Add All”, “Retake Quiz”.</td></tr><tr><td><strong>Results (Products)</strong></td><td>Full‑width CTA, quantity picker, info toggles, variant display, and image rules.</td></tr><tr><td><strong>Progress indicators</strong></td><td>Layout, number of questions per step, navigation text, next/back buttons, show arrow checkbox.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.quizkitapp.com/building-a-quiz/styling-and-designing-your-quiz/style-settings.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.