{"success":true,"data":{"block":{"id":"contact-locations","name":"Contact Locations","title":"Contact Locations","category":"Contact","categorySlug":"contact","description":"Multi-location contact form with location selection and contact information. Ideal for businesses with multiple offices or stores.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290571/xrkgiyv104axb1boedaytia8g9wa/contact-locations-desktop.png","mobile":"https://cdn.ing/assets/i/r/290572/6aej3lh7likzx89badz2596nrnlu/contact-locations-mobile.png"},"componentPath":"blocks/contact/contact-locations.tsx","code":"\"use client\";\n\nimport { ContactLocations } from \"@opensite/ui/blocks/contact/contact-locations\";\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: \"Enter your name\",\n    required: true,\n    columnSpan: 12,\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: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"location\",\n    type: \"select\",\n    label: \"Preferred Location\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"new-york\",\n        label: \"New York, NY\",\n        description: \"Our flagship location.\",\n      },\n      {\n        value: \"san-francisco\",\n        label: \"San Francisco, CA\",\n        description: \"West coast headquarters.\",\n      },\n      {\n        value: \"chicago\",\n        label: \"Chicago, IL\",\n        description: \"Midwest regional office.\",\n      },\n      {\n        value: \"austin\",\n        label: \"Austin, TX\",\n        description: \"Southern regional office.\",\n      },\n      {\n        value: \"remote\",\n        label: \"Remote / Virtual\",\n        description: \"Connect with us online.\",\n      },\n    ],\n  },\n  {\n    name: \"inquiry_type\",\n    type: \"radio\",\n    label: \"How Can We Help?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"sales\",\n        label: \"Sales Inquiry\",\n        description: \"Learn about our products and services.\",\n      },\n      {\n        value: \"support\",\n        label: \"Customer Support\",\n        description: \"Get help with an existing account.\",\n      },\n      {\n        value: \"partnership\",\n        label: \"Partnership\",\n        description: \"Explore collaboration opportunities.\",\n      },\n      {\n        value: \"visit\",\n        label: \"Schedule a Visit\",\n        description: \"Plan an in-person meeting.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Message\",\n    placeholder: \"Tell us more about your inquiry...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactLocations\n      heading=\"Visit Us\"\n      description=\"We have offices across the country. Find the location nearest you or schedule a virtual meeting with our team.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for reaching out! We'll get back to you within 1 business day.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Send Message\",\n          },\n        },\n      }}\n      background=\"white\"\n      pattern=\"dots\"\n      patternOpacity={0.3}\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","locations","multi-location","form","offices"],"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 multi-location contact use case — name, email, phone, preferred location select, inquiry type radio, and message textarea — do not change the field set unless the site has clearly different requirements. Only populate the location select options with real locations from the system; do not invent office addresses or city names. 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:41:09.154Z"}