{"success":true,"data":{"block":{"id":"contact-support","name":"Contact Support","title":"Contact Support","category":"Contact","categorySlug":"contact","description":"Customer support form with name, email, and message fields. Simple and effective for general support inquiries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290595/w0z3gqaep69jncp8xy2fej1qw42r/contact-support-desktop.png","mobile":"https://cdn.ing/assets/i/r/290596/uvxgo9tc6k93kn50lk2em6clzq6j/contact-support-mobile.png"},"componentPath":"blocks/contact/contact-support.tsx","code":"\"use client\";\n\nimport { ContactSupport } from \"@opensite/ui/blocks/contact/contact-support\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"name\",\n    type: \"text\",\n    label: \"Full Name\",\n    placeholder: \"Full name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"account_id\",\n    type: \"text\",\n    label: \"Account ID or Username\",\n    placeholder: \"Your account identifier\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"issue_type\",\n    type: \"select\",\n    label: \"Issue Type\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"technical\", label: \"Technical Issue\" },\n      { value: \"billing\", label: \"Billing Question\" },\n      { value: \"account\", label: \"Account Access\" },\n      { value: \"feature\", label: \"Feature Request\" },\n      { value: \"bug\", label: \"Report a Bug\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"priority\",\n    type: \"select\",\n    label: \"Priority Level\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"low\", label: \"Low - General question\" },\n      { value: \"medium\", label: \"Medium - Issue affecting work\" },\n      { value: \"high\", label: \"High - Critical issue\" },\n      { value: \"urgent\", label: \"Urgent - Service down\" },\n    ],\n  },\n  {\n    name: \"subject\",\n    type: \"text\",\n    label: \"Subject\",\n    placeholder: \"Brief description of your issue\",\n    required: true,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Describe your issue\",\n    placeholder: \"Please provide as much detail as possible including steps to reproduce the issue, error messages, and what you expected to happen...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n  {\n    name: \"attachments\",\n    type: \"file\",\n    label: \"Attachments (Optional)\",\n    placeholder: \"Upload screenshots, logs, or other helpful files...\",\n    required: false,\n    accept: \"image/*,.pdf,.txt,.log\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 5,\n    multiple: true,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactSupport\n      heading=\"We're Here to Help\"\n      description=\"Having trouble? Our support team is standing by to assist you. Describe your issue below and we'll get back to you as soon as possible.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Your support ticket has been created! You'll receive a confirmation email with your ticket number. We typically respond within 2-4 hours during business hours.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Support Ticket\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for the card","required":false},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","support","help","form","customer-service"],"performance":{},"importantUsageNotes":"Ensure to follow the form implementation requirements properly (correct field types, labels, validation, and submit handling). The form fields shown in the demo are calibrated for a customer support ticket use case — full name, email, account ID/username (optional), issue type select, priority level select, subject, detailed description textarea, and optional screenshot file upload — do not change the field set unless the site has clearly different requirements. Ensure to only supply a valid set of contact data points (email, phone, address, etc), DO NOT make up any contact data. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:38:45.719Z"}