Advanced

Six theming recipes

Every FormKrafter style flows through --fk-* CSS custom properties. The same form below, themed six different ways — each card shows the exact code that produces it.

Loading the builder…

View the spec

Open in the playground

{
  "type": "panel",
  "id": "column",
  "name": "Form",
  "configs": {
    "key": "contact"
  },
  "children": [
    {
      "type": "input",
      "dataType": "string",
      "id": "text",
      "name": "Name",
      "configs": {
        "key": "name",
        "label": "Full name"
      },
      "validations": [
        {
          "validator": "required"
        }
      ]
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "email",
      "name": "Email",
      "configs": {
        "key": "email",
        "label": "Email"
      },
      "validations": [
        {
          "validator": "required"
        },
        {
          "validator": "email"
        }
      ]
    },
    {
      "type": "input",
      "dataType": "string",
      "id": "textarea",
      "name": "Message",
      "configs": {
        "key": "message",
        "label": "Message"
      },
      "validations": [
        {
          "validator": "minLength",
          "value": 10
        }
      ]
    }
  ]
}