{"success":true,"data":{"block":{"id":"contact-consultation","name":"Contact Consultation Booking","title":"Contact Consultation Booking","category":"Contact","categorySlug":"contact","description":"A consultation booking form with service selection, duration preferences, budget range, and detailed information fields. Perfect for professional services and consulting businesses.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290565/poh0jfqdqhy96hf5lr8ho9nijrrn/contact-consultation-desktop.png","mobile":"https://cdn.ing/assets/i/r/290566/mksngqmna22t3zwkj7r83zychnec/contact-consultation-mobile.png"},"componentPath":"blocks/contact/contact-consultation.tsx","code":"\"use client\";\n\nimport { ContactConsultation } from \"@opensite/ui/blocks/contact/contact-consultation\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"first_name\",\n    type: \"text\",\n    label: \"First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"last_name\",\n    type: \"text\",\n    label: \"Last Name\",\n    placeholder: \"Last 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: \"phone\",\n    type: \"tel\",\n    label: \"Phone Number\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"company\",\n    type: \"text\",\n    label: \"Company Name\",\n    placeholder: \"Your company\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"industry\",\n    type: \"select\",\n    label: \"Industry\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"technology\",\n        label: \"Technology\",\n      },\n      {\n        value: \"healthcare\",\n        label: \"Healthcare\",\n      },\n      {\n        value: \"finance\",\n        label: \"Finance\",\n      },\n      {\n        value: \"retail\",\n        label: \"Retail\",\n      },\n      {\n        value: \"manufacturing\",\n        label: \"Manufacturing\",\n      },\n      {\n        value: \"education\",\n        label: \"Education\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n      },\n    ],\n  },\n  {\n    name: \"consultation_type\",\n    type: \"radio\",\n    label: \"Consultation Type\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"strategy\",\n        label: \"Strategy Session\",\n        description: \"Long-term planning and roadmap.\",\n      },\n      {\n        value: \"technical\",\n        label: \"Technical Consultation\",\n        description: \"Architecture and implementation review.\",\n      },\n      {\n        value: \"discovery\",\n        label: \"Discovery Call\",\n        description: \"Initial project exploration.\",\n      },\n      {\n        value: \"followup\",\n        label: \"Follow-up Session\",\n        description: \"Continue previous discussion.\",\n      },\n    ],\n  },\n  {\n    name: \"preferred_date\",\n    type: \"date-picker\",\n    label: \"Preferred Date\",\n    placeholder: \"Select a date\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"time_preference\",\n    type: \"select\",\n    label: \"Preferred Time\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      {\n        value: \"morning\",\n        label: \"Morning (9 AM - 12 PM)\",\n      },\n      {\n        value: \"afternoon\",\n        label: \"Afternoon (12 PM - 5 PM)\",\n      },\n      {\n        value: \"evening\",\n        label: \"Evening (5 PM - 7 PM)\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"What would you like to discuss?\",\n    placeholder: \"Tell us about your goals, challenges, and what you hope to achieve from this consultation...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactConsultation\n      heading=\"Schedule a Free Consultation\"\n      description=\"Book a 30-minute strategy session with our experts. We'll discuss your goals, challenges, and how we can help you succeed.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for booking! We'll confirm your consultation time within 24 hours and send you a calendar invite.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Book Consultation\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below the 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 wrapper","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","consultation","booking","form","services","professional","advisory"],"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 free consultation booking use case — first/last name, email, phone, company, industry select, consultation type radio (strategy/technical/discovery/follow-up), preferred date picker, preferred time select, and goals textarea — 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:41:23.206Z"}