Customize the primary color - Declarative Forms

If you have not created a form before, start with Create a form.

form.yaml

version: 1
title: "Brand survey"
description: "A form styled with a custom primary color."

# Set the primary color used for buttons, focus rings, and accents.
theme:
  primary: "#4F46E5"

sections:
  - id: section_1
    title: "Section 1"
    fields:
      - id: question_1
        type: short_text
        label: "Question 1"
        validators:
          - required

      - id: question_2
        type: single_select
        label: "Question 2"
        options:
          - "Option 1"
          - "Option 2"
          - "Option 3"
        validators:
          - required

    next: done

Add a theme block at the top level of your YAML to override the default form styling. The primary property accepts any hex color value (#RGB or #RRGGBB) and applies it to buttons, focus rings, and active states. The button text color is automatically set to light or dark for contrast.

Show a conditional thank-you page Add conditional navigation