{"success":true,"data":{"block":{"id":"contact-feedback","name":"Contact Feedback","title":"Contact Feedback","category":"Contact","categorySlug":"contact","description":"A simple feedback form with email and feedback message fields. Ideal for collecting customer feedback and suggestions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290811/nt3s30ijlt7ogzbmkkz5tqpr99xj/cleanshot-2026-02-25-at-02-02-57.png","mobile":"https://cdn.ing/assets/i/r/290810/7khdr7eo2qgq7qcd4zpdixjei4cr/cleanshot-2026-02-25-at-02-03-12.png"},"componentPath":"blocks/contact/contact-feedback.tsx","code":"\"use client\";\n\nimport { ContactFeedback } from \"@opensite/ui/blocks/contact/contact-feedback\";\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: \"Your Name\",\n    placeholder: \"Full Name (optional)\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"email\",\n    type: \"email\",\n    label: \"Email Address\",\n    placeholder: \"your@email.com (optional)\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"rating\",\n    type: \"radio\",\n    label: \"Overall Experience\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"5\",\n        label: \"Excellent\",\n        description: \"Exceeded expectations.\",\n      },\n      {\n        value: \"4\",\n        label: \"Good\",\n        description: \"Met expectations.\",\n      },\n      {\n        value: \"3\",\n        label: \"Average\",\n        description: \"Satisfactory.\",\n      },\n      {\n        value: \"2\",\n        label: \"Below Average\",\n        description: \"Needs improvement.\",\n      },\n    ],\n  },\n  {\n    name: \"feedback_type\",\n    type: \"checkbox-group\",\n    label: \"What would you like to provide feedback on?\",\n    placeholder: \"Select areas\",\n    required: false,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"product\",\n        label: \"Product Quality\",\n        description: \"Quality of our product/service.\",\n      },\n      {\n        value: \"service\",\n        label: \"Customer Service\",\n        description: \"Support team interaction.\",\n      },\n      {\n        value: \"website\",\n        label: \"Website/App\",\n        description: \"User experience and design.\",\n      },\n      {\n        value: \"pricing\",\n        label: \"Pricing\",\n        description: \"Value for money.\",\n      },\n      {\n        value: \"delivery\",\n        label: \"Delivery/Speed\",\n        description: \"Timeliness and delivery.\",\n      },\n    ],\n  },\n  {\n    name: \"would_recommend\",\n    type: \"radio\",\n    label: \"Would you recommend us to others?\",\n    required: false,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      {\n        value: \"yes\",\n        label: \"Yes, definitely\",\n      },\n      {\n        value: \"maybe\",\n        label: \"Maybe\",\n      },\n      {\n        value: \"no\",\n        label: \"No\",\n      },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Your Feedback\",\n    placeholder:\n      \"Tell us what you liked, what could be improved, or any other thoughts...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactFeedback\n      heading=\"We Value Your Feedback\"\n      description=\"Your opinion matters to us! Share your experience and help us improve. All feedback is reviewed by our team and used to enhance our products and services.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your valuable feedback! We appreciate you taking the time to help us improve.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Feedback\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.16}\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","feedback","survey","form","customer-feedback"],"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 feedback use case — name (optional), email (optional), overall experience rating radio, feedback category checkbox-group, and detailed feedback 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:40:40.611Z"}