{"success":true,"data":{"block":{"id":"contact-referral","name":"Contact Referral","title":"Contact Referral","category":"Contact","categorySlug":"contact","description":"Referral form for recommending friends or colleagues. Includes referrer and referee information with incentive details.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290825/fng6evy4t7eigg4auwiqmd8qtw8z/cleanshot-2026-02-25-at-02-19-07.png","mobile":"https://cdn.ing/assets/i/r/290824/ilzuibpc3yz7brcfiee8wjkwp27h/cleanshot-2026-02-25-at-02-19-19.png"},"componentPath":"blocks/contact/contact-referral.tsx","code":"\"use client\";\n\nimport { ContactReferral } from \"@opensite/ui/blocks/contact/contact-referral\";\nimport { demoFormEngineApi } from \"@/lib/form-demo-data\";\nimport type { FormFieldConfig } from \"@opensite/ui\";\n\nconst formFields: FormFieldConfig[] = [\n  {\n    name: \"your_first_name\",\n    type: \"text\",\n    label: \"Your First Name\",\n    placeholder: \"Your first name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_last_name\",\n    type: \"text\",\n    label: \"Your Last Name\",\n    placeholder: \"Your last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_email\",\n    type: \"email\",\n    label: \"Your Email\",\n    placeholder: \"your@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"your_phone\",\n    type: \"tel\",\n    label: \"Your Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_first_name\",\n    type: \"text\",\n    label: \"Referral's First Name\",\n    placeholder: \"First name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_last_name\",\n    type: \"text\",\n    label: \"Referral's Last Name\",\n    placeholder: \"Last name\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_email\",\n    type: \"email\",\n    label: \"Referral's Email\",\n    placeholder: \"their@email.com\",\n    required: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_phone\",\n    type: \"tel\",\n    label: \"Referral's Phone\",\n    placeholder: \"+1 (555) 000-0000\",\n    required: false,\n    columnSpan: 6,\n  },\n  {\n    name: \"referral_company\",\n    type: \"text\",\n    label: \"Referral's Company\",\n    placeholder: \"Company name\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"service_interest\",\n    type: \"checkbox-group\",\n    label: \"Which Services Might They Need?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"web_design\",\n        label: \"Web Design\",\n        description: \"Website design and development.\",\n      },\n      {\n        value: \"seo\",\n        label: \"SEO/Marketing\",\n        description: \"Search optimization and digital marketing.\",\n      },\n      {\n        value: \"consulting\",\n        label: \"Consulting\",\n        description: \"Strategy and business consulting.\",\n      },\n      {\n        value: \"branding\",\n        label: \"Branding\",\n        description: \"Logo and brand identity.\",\n      },\n      {\n        value: \"content\",\n        label: \"Content Creation\",\n        description: \"Copywriting and content strategy.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other\",\n        description: \"Something else.\",\n      },\n    ],\n  },\n  {\n    name: \"relationship\",\n    type: \"select\",\n    label: \"Your Relationship\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"friend\", label: \"Friend\" },\n      { value: \"colleague\", label: \"Colleague\" },\n      { value: \"family\", label: \"Family Member\" },\n      { value: \"business\", label: \"Business Partner\" },\n      { value: \"client\", label: \"Client/Customer\" },\n      { value: \"other\", label: \"Other\" },\n    ],\n  },\n  {\n    name: \"urgency\",\n    type: \"select\",\n    label: \"How Soon Do They Need Help?\",\n    required: false,\n    columnSpan: 6,\n    options: [\n      { value: \"immediate\", label: \"Immediately\" },\n      { value: \"week\", label: \"Within a week\" },\n      { value: \"month\", label: \"Within a month\" },\n      { value: \"exploring\", label: \"Just exploring options\" },\n      { value: \"not_sure\", label: \"Not sure\" },\n    ],\n  },\n  {\n    name: \"contacted\",\n    type: \"radio\",\n    label: \"Have They Given Permission to Be Contacted?\",\n    required: true,\n    columnSpan: 12,\n    layout: \"stacked\",\n    options: [\n      { value: \"yes\", label: \"Yes, they're expecting a call\" },\n      { value: \"no\", label: \"No, please reach out carefully\" },\n    ],\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Additional Details\",\n    placeholder: \"Tell us why you think they'd be a good fit, what challenges they're facing, or anything else that would help us serve them better...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactReferral\n      heading=\"Refer a Friend & Earn Rewards\"\n      description=\"Know someone who could benefit from our services? Refer them and you'll both receive exclusive rewards when they become a client.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for the referral! We'll reach out to them soon and keep you updated on the status. Your rewards will be processed once they become a client.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Referral\",\n          },\n        },\n      }}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\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","referral","recommendation","form","rewards","incentive"],"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 referral submission use case — the referring person's name/email/phone AND the referral's name/email/phone/company, plus a service interest checkbox-group and optional notes — do not change the dual-person field structure 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:38.524Z"}