Contact Section

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "contact_section",
  "display_name": "Contact Section",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "headline": {
      "type": "text",
      "pos": 0,
      "display_name": "Headline",
      "description": "Contact section heading",
      "required": true
    },
    "intro": {
      "type": "textarea",
      "pos": 1,
      "display_name": "Intro",
      "description": "Short context text"
    },
    "submit_label": {
      "type": "text",
      "pos": 2,
      "display_name": "Submit Label",
      "description": "Submit button text",
      "required": true
    },
    "include_company": {
      "type": "boolean",
      "pos": 3,
      "display_name": "Include Company Field",
      "default_value": true,
      "description": "Show company name field"
    },
    "include_phone": {
      "type": "boolean",
      "pos": 4,
      "display_name": "Include Phone Field",
      "default_value": false,
      "description": "Show phone field"
    },
    "include_topic": {
      "type": "boolean",
      "pos": 5,
      "display_name": "Include Topic Select",
      "default_value": false,
      "description": "Show inquiry topic dropdown"
    },
    "success_message": {
      "type": "text",
      "pos": 6,
      "display_name": "Success Message",
      "description": "Message after successful submit"
    }
  },
  "preview_field": "headline"
}

# Contact Section

## Purpose
Contact form section with heading, descriptive text, and configurable fields.

## Storyblok Schema Fields
- `headline` (text, required): Contact section heading
- `intro` (textarea): Short context text
- `submit_label` (text, required): Submit button text
- `include_company` (boolean): Show company name field
- `include_phone` (boolean): Show phone field
- `include_topic` (boolean): Show inquiry topic dropdown
- `success_message` (text): Message after successful submit

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface ContactSectionProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

# @bloktastic/contact-section

Contact form section with heading, descriptive text, and configurable fields.

## Installation

```bash
bloktastic add @bloktastic/contact-section
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| headline | text | Yes | Contact section heading |
| intro | textarea | No | Short context text |
| submit_label | text | Yes | Submit button text |
| include_company | boolean | No | Show company name field |
| include_phone | boolean | No | Show phone field |
| include_topic | boolean | No | Show inquiry topic dropdown |
| success_message | text | No | Message after successful submit |

## Notes
- Category: `forms`
- Tags: `contact`, `form`, `lead`, `support`