{"success":true,"data":{"block":{"id":"contact-faq","name":"Contact FAQ","title":"Contact FAQ","category":"Contact","categorySlug":"contact","description":"A two-column contact form with an FAQ accordion sidebar. Displays frequently asked questions alongside a contact form so visitors can find answers before submitting inquiries. Falls back to a single-column centered layout when no FAQ items are provided.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290628/syz0j5igv48uywm52380gbk8yrz0/cleanshot-2026-02-21-at-15-39-10.png","mobile":"https://cdn.ing/assets/i/r/290627/bp3k3s0l1cczzifti4l6j7n6qwhq/cleanshot-2026-02-21-at-15-39-27.png"},"componentPath":"blocks/contact/contact-faq.tsx","code":"\"use client\";\n\nimport { ContactFaq } from \"@opensite/ui/blocks/contact/contact-faq\";\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\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"subject\",\n    type: \"checkbox-group\",\n    label: \"Subject\",\n    placeholder: \"What is this regarding?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"analytics\",\n        label: \"Analytics\",\n        description: \"Data insights and reporting.\",\n      },\n      {\n        value: \"automation\",\n        label: \"Automation\",\n        description: \"Workflow automation tools.\",\n      },\n      {\n        value: \"integration\",\n        label: \"Integrations\",\n        description: \"Connect with existing tools.\",\n      },\n      {\n        value: \"collaboration\",\n        label: \"Collaboration\",\n        description: \"Team communication features.\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Message\",\n    placeholder: \"Please describe your question in detail...\",\n    required: true,\n    rows: 5,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactFaq\n      heading=\"Have Questions?\"\n      description=\"Can't find what you're looking for in our FAQ? Send us a message and our team will get back to you within 24 hours.\"\n      formHeading=\"Send Us a Message\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n      }}\n      background=\"white\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={1}\n      faqHeading=\"Frequently Asked Questions\"\n      items={[\n        {\n          id: \"billing-cycle\",\n          question: \"When will I be charged?\",\n          answer:\n            \"Billing occurs on the same day each month or year, depending on your plan. You'll receive an invoice via email 3 days before each billing cycle.\",\n        },\n        {\n          id: \"refunds\",\n          question: \"What is your refund policy?\",\n          answer:\n            \"We offer a 30-day money-back guarantee. If you're not satisfied, contact us within 30 days of your initial purchase for a full refund.\",\n        },\n        {\n          id: \"upgrades\",\n          question: \"How do plan upgrades work?\",\n          answer:\n            \"Upgrades take effect immediately. You'll be charged a prorated amount for the remainder of your billing cycle at the new plan rate.\",\n        },\n        {\n          id: \"downgrade\",\n          question: \"Can I downgrade my plan?\",\n          answer:\n            \"Yes, downgrades take effect at the end of your current billing cycle. You'll continue to have access to your current plan features until then.\",\n        },\n      ]}\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},"formHeading":{"type":"object","description":"Form section heading","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of FAQ items to display alongside the contact form","items":{"type":"object","description":"","fields":{"question":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"answer":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"FaqItem"},"typeLabel":"FaqItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering FAQ items (overrides items array)","typeLabel":"React.ReactNode","required":false},"faqHeading":{"type":"object","description":"Heading for the FAQ section","typeLabel":"React.ReactNode","required":false},"formEngineSetup":{"type":"object","description":"Full form engine setup and props","typeLabel":"FormEngineProps","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},"formHeadingClassName":{"type":"string","description":"Additional CSS classes for the form heading","required":false},"faqHeadingClassName":{"type":"string","description":"Additional CSS classes for the FAQ heading","required":false},"faqContainerClassName":{"type":"string","description":"Additional CSS classes for the FAQ container","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"accordionItemClassName":{"type":"string","description":"Additional CSS classes for accordion items","required":false},"accordionTriggerClassName":{"type":"string","description":"Additional CSS classes for accordion triggers","required":false},"accordionContentClassName":{"type":"string","description":"Additional CSS classes for accordion content","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the two-column grid wrapper","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","faq","questions","inquiry","form","support","accordion","two-column"],"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 general contact use case with a subject checkbox-group — do not change the field set unless the site has clearly different requirements. Generate exactly 4 'items' for the FAQ accordion — the demo uses 4 items and the two-column layout (FAQ beside form) is calibrated for that count; use 3-6 items maximum. Only use real FAQ content from the system; do not fabricate questions or answers. 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:39:11.562Z"}