{
  "type": "form-basic",
  "title": "Contact Form",
  "icon": "form",
  "category": "site",
  "render": "client",
  "runtime": true,
  "keywords": ["form-basic", "form", "contact", "email", "message", "subscribe"],
  "description": "A lightweight name / email / message form. Submissions are sent by email through the REST API with honeypot and rate limiting.",
  "sections": [
    { "id": "fields", "label": "Fields", "tab": "content" },
    { "id": "submit", "label": "Submit", "tab": "content" },
    { "id": "email", "label": "Email", "tab": "content" },
    { "id": "field_style", "label": "Fields", "tab": "style" },
    { "id": "button_style", "label": "Button", "tab": "style" }
  ],
  "controls": [
    { "id": "name_label", "type": "text", "label": "Name label", "tab": "content", "section": "fields", "default": "Name" },
    { "id": "email_label", "type": "text", "label": "Email label", "tab": "content", "section": "fields", "default": "Email" },
    { "id": "message_label", "type": "text", "label": "Message label", "tab": "content", "section": "fields", "default": "Message" },
    { "id": "show_labels", "type": "switch", "label": "Show labels", "tab": "content", "section": "fields", "default": true },
    { "id": "gap", "type": "slider", "label": "Field spacing", "tab": "content", "section": "fields", "responsive": true, "units": ["px"], "range": { "px": [0, 60] }, "default": { "size": 16, "unit": "px" }, "css": [{ "selector": "{{WRAPPER}}", "property": "gap" }] },

    { "id": "button_text", "type": "text", "label": "Button text", "tab": "content", "section": "submit", "default": "Send message" },
    { "id": "button_align", "type": "choose", "label": "Button alignment", "tab": "content", "section": "submit", "responsive": true, "default": "flex-start", "options": [{ "value": "flex-start", "label": "Start", "icon": "align-left" }, { "value": "center", "label": "Center", "icon": "align-center" }, { "value": "flex-end", "label": "End", "icon": "align-right" }, { "value": "stretch", "label": "Full", "icon": "align-justify" }], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button", "property": "align-self" }] },
    { "id": "success_message", "type": "textarea", "label": "Success message", "tab": "content", "section": "submit", "default": "Thanks! Your message has been sent.", "rows": 2, "labelBlock": true },
    { "id": "error_message", "type": "text", "label": "Error message", "tab": "content", "section": "submit", "default": "Something went wrong. Please try again." },

    { "id": "recipient", "type": "text", "label": "Recipient email", "tab": "content", "section": "email", "default": "", "placeholder": "Defaults to the site admin email", "description": "Kept on the server only: never printed in the page HTML." },
    { "id": "subject", "type": "text", "label": "Subject", "tab": "content", "section": "email", "default": "New message from the website" },

    { "id": "field_color", "type": "color", "label": "Text color", "tab": "style", "section": "field_style", "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__input", "property": "color" }] },
    { "id": "field_bg", "type": "color", "label": "Background", "tab": "style", "section": "field_style", "states": ["focus"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__input", "property": "background-color", "stateTarget": "target" }] },
    { "id": "field_border", "type": "border", "label": "Border", "tab": "style", "section": "field_style", "states": ["focus"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__input", "stateTarget": "target" }] },
    { "id": "field_padding", "type": "dimensions", "label": "Padding", "tab": "style", "section": "field_style", "units": ["px", "em"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__input", "property": "padding" }] },
    { "id": "label_color", "type": "color", "label": "Label color", "tab": "style", "section": "field_style", "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__label", "property": "color" }] },
    { "id": "label_typography", "type": "typography", "label": "Label typography", "tab": "style", "section": "field_style", "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__label" }] },

    { "id": "button_color", "type": "color", "label": "Text color", "tab": "style", "section": "button_style", "states": ["hover"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button", "property": "color" }] },
    { "id": "button_bg", "type": "color", "label": "Background", "tab": "style", "section": "button_style", "states": ["hover"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button", "property": "background-color" }] },
    { "id": "button_typography", "type": "typography", "label": "Typography", "tab": "style", "section": "button_style", "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button" }] },
    { "id": "button_padding", "type": "dimensions", "label": "Padding", "tab": "style", "section": "button_style", "units": ["px", "em"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button", "property": "padding" }] },
    { "id": "button_border", "type": "border", "label": "Border", "tab": "style", "section": "button_style", "states": ["hover"], "css": [{ "selector": "{{WRAPPER}} .zx-form-basic__button" }] }
  ]
}