Newsletter signup

Schema

{
  "name": "Newsletter signup",
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "Subscribe to our newsletter"
    },
    {
      "type": "inline_richtext",
      "id": "subtext",
      "label": "Subtext",
      "default": "Get the latest updates on new products and upcoming sales"
    },
    {
      "type": "text",
      "id": "email_placeholder",
      "label": "Email placeholder",
      "default": "Enter your email"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Subscribe"
    },
    {
      "type": "text",
      "id": "success_message",
      "label": "Success message",
      "default": "Thanks for subscribing!"
    },
    {
      "type": "header",
      "content": "Klaviyo integration"
    },
    {
      "type": "text",
      "id": "klaviyo_list_id",
      "label": "Klaviyo list ID",
      "info": "Enter your Klaviyo list ID to add subscribers to a specific list"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Desktop width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "range",
      "id": "padding",
      "label": "Padding",
      "min": 0,
      "max": 60,
      "step": 5,
      "unit": "px",
      "default": 30
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#f5f5f5"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#151515"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button background",
      "default": "#151515"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button hover background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "input_border_color",
      "label": "Input border",
      "default": "#cccccc"
    },
    {
      "type": "color",
      "id": "success_color",
      "label": "Success message",
      "default": "#008060"
    },
    {
      "type": "color",
      "id": "error_color",
      "label": "Error message",
      "default": "#D82C0D"
    },
    {
      "type": "header",
      "content": "Typography"
    },
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "default": 24
    },
    {
      "type": "range",
      "id": "text_size",
      "label": "Text size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Container border radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 8
    },
    {
      "type": "range",
      "id": "input_border_radius",
      "label": "Input border radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 4
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "label": "Button border radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 30
    }
  ],
  "blocks": [],
  "presets": [
    {
      "name": "Newsletter signup"
    }
  ]
}