{"success":true,"data":{"block":{"id":"contact-volunteer","name":"Contact Volunteer","title":"Contact Volunteer","category":"Contact","categorySlug":"contact","description":"Volunteer registration form with availability, skills, and interests. Ideal for non-profits and community organizations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290831/99pnmteeidpqgf04muqgivygnnbs/cleanshot-2026-02-25-at-02-43-42.png","mobile":"https://cdn.ing/assets/i/r/290830/ah7l0m5hsv2ohoyhtfzj8kly55wh/cleanshot-2026-02-25-at-02-43-52.png"},"componentPath":"blocks/contact/contact-volunteer.tsx","code":"\"use client\";\n\nimport { ContactVolunteer } from \"@opensite/ui/blocks/contact/contact-volunteer\";\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: \"age_range\",\n    type: \"select\",\n    label: \"Age Range\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"under18\", label: \"Under 18\" },\n      { value: \"18-24\", label: \"18-24\" },\n      { value: \"25-34\", label: \"25-34\" },\n      { value: \"35-44\", label: \"35-44\" },\n      { value: \"45-54\", label: \"45-54\" },\n      { value: \"55-64\", label: \"55-64\" },\n      { value: \"65plus\", label: \"65+\" },\n    ],\n  },\n  {\n    name: \"availability\",\n    type: \"select\",\n    label: \"General Availability\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"weekdays\", label: \"Weekdays\" },\n      { value: \"weekends\", label: \"Weekends\" },\n      { value: \"both\", label: \"Both weekdays and weekends\" },\n      { value: \"flexible\", label: \"Flexible\" },\n    ],\n  },\n  {\n    name: \"interest_areas\",\n    type: \"checkbox-group\",\n    label: \"Areas of Interest\",\n    placeholder: \"Select all that apply\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"events\",\n        label: \"Event Support\",\n        description: \"Help organize and run community events.\",\n      },\n      {\n        value: \"fundraising\",\n        label: \"Fundraising\",\n        description: \"Assist with fundraising campaigns and activities.\",\n      },\n      {\n        value: \"mentoring\",\n        label: \"Mentoring\",\n        description: \"Mentor youth or adults in the community.\",\n      },\n      {\n        value: \"admin\",\n        label: \"Administrative\",\n        description: \"Office support, data entry, and coordination.\",\n      },\n      {\n        value: \"outreach\",\n        label: \"Community Outreach\",\n        description: \"Engage with community members and spread awareness.\",\n      },\n      {\n        value: \"education\",\n        label: \"Education & Tutoring\",\n        description: \"Teach classes or provide tutoring services.\",\n      },\n      {\n        value: \"construction\",\n        label: \"Construction & Maintenance\",\n        description: \"Help with building projects and property maintenance.\",\n      },\n      {\n        value: \"creative\",\n        label: \"Creative Services\",\n        description: \"Graphic design, photography, video, or writing.\",\n      },\n    ],\n  },\n  {\n    name: \"commitment\",\n    type: \"radio\",\n    label: \"Time Commitment\",\n    required: true,\n    columnSpan: 12,\n    layout: \"grid\",\n    options: [\n      {\n        value: \"one-time\",\n        label: \"One-Time Event\",\n        description: \"Single event or project.\",\n      },\n      {\n        value: \"occasional\",\n        label: \"Occasional\",\n        description: \"A few times per month.\",\n      },\n      {\n        value: \"regular\",\n        label: \"Regular\",\n        description: \"Weekly or bi-weekly commitment.\",\n      },\n      {\n        value: \"ongoing\",\n        label: \"Ongoing\",\n        description: \"Long-term commitment (6+ months).\",\n      },\n    ],\n  },\n  {\n    name: \"skills\",\n    type: \"textarea\",\n    label: \"Relevant Skills and Experience\",\n    placeholder:\n      \"Tell us about skills, experience, or qualifications that would help you as a volunteer...\",\n    required: false,\n    rows: 4,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Why do you want to volunteer with us?\",\n    placeholder:\n      \"Share what motivates you and what you hope to gain from volunteering...\",\n    required: true,\n    rows: 4,\n    columnSpan: 12,\n  },\n  {\n    name: \"background_check\",\n    type: \"checkbox\",\n    label: \"I consent to a background check if required for my volunteer role\",\n    required: false,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactVolunteer\n      heading=\"Join Our Volunteer Team\"\n      description=\"Make a difference in your community! Whether you have a few hours to spare or want to make a long-term commitment, we have opportunities that match your skills and interests.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage:\n          \"Thank you for your interest in volunteering! We'll review your application and reach out within a week to discuss available opportunities and next steps.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Volunteer Application\",\n          },\n        },\n      }}\n      pattern=\"dotPattern2\"\n      patternOpacity={1}\n      background=\"secondary\"\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","volunteer","registration","form","non-profit","community"],"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 volunteer sign-up use case — first/last name, email, phone, age range select, general availability select, areas of interest checkbox-group, skills/experience, and motivation 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:42:11.168Z"}