{"success":true,"data":{"block":{"id":"contact-interview","name":"Contact Interview Scheduling","title":"Contact Interview Scheduling","category":"Contact","categorySlug":"contact","description":"Interview scheduling form with position, availability, and candidate information. Perfect for HR and recruitment teams.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290819/xh2lnayz5r3qx1qq9yxqwwvb3wyu/cleanshot-2026-02-25-at-02-11-07.png","mobile":"https://cdn.ing/assets/i/r/290818/43wvdxtxob5rracqvjyg2vvyf8jr/cleanshot-2026-02-25-at-02-11-20.png"},"componentPath":"blocks/contact/contact-interview.tsx","code":"\"use client\";\n\nimport { ContactInterview } from \"@opensite/ui/blocks/contact/contact-interview\";\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: \"linkedin\",\n    type: \"text\",\n    label: \"LinkedIn Profile\",\n    placeholder: \"https://linkedin.com/in/yourname\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"position\",\n    type: \"select\",\n    label: \"Position Applying For\",\n    required: true,\n    columnSpan: 12,\n    options: [\n      {\n        value: \"senior-engineer\",\n        label: \"Senior Software Engineer\",\n        description: \"Full-stack development role.\",\n      },\n      {\n        value: \"product-manager\",\n        label: \"Product Manager\",\n        description: \"Lead product strategy and development.\",\n      },\n      {\n        value: \"ux-designer\",\n        label: \"UX/UI Designer\",\n        description: \"Design user experiences and interfaces.\",\n      },\n      {\n        value: \"marketing-manager\",\n        label: \"Marketing Manager\",\n        description: \"Drive marketing campaigns and growth.\",\n      },\n      {\n        value: \"sales-executive\",\n        label: \"Sales Executive\",\n        description: \"Build relationships and close deals.\",\n      },\n      {\n        value: \"other\",\n        label: \"Other Position\",\n        description: \"Specify in additional details below.\",\n      },\n    ],\n  },\n  {\n    name: \"experience_years\",\n    type: \"select\",\n    label: \"Years of Relevant Experience\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"0-2\", label: \"0-2 years\" },\n      { value: \"3-5\", label: \"3-5 years\" },\n      { value: \"6-10\", label: \"6-10 years\" },\n      { value: \"10+\", label: \"10+ years\" },\n    ],\n  },\n  {\n    name: \"location\",\n    type: \"select\",\n    label: \"Work Location Preference\",\n    required: true,\n    columnSpan: 6,\n    options: [\n      { value: \"remote\", label: \"Remote\" },\n      { value: \"hybrid\", label: \"Hybrid\" },\n      { value: \"onsite\", label: \"On-site\" },\n    ],\n  },\n  {\n    name: \"resume\",\n    type: \"file\",\n    label: \"Resume/CV\",\n    placeholder: \"Upload your resume...\",\n    required: true,\n    accept: \".pdf,.doc,.docx\",\n    maxSize: 5 * 1024 * 1024,\n    maxFiles: 1,\n    columnSpan: 6,\n  },\n  {\n    name: \"portfolio\",\n    type: \"file\",\n    label: \"Portfolio/Work Samples\",\n    placeholder: \"Upload work samples (optional)...\",\n    required: false,\n    accept: \".pdf,.doc,.docx,.zip\",\n    maxSize: 10 * 1024 * 1024,\n    maxFiles: 3,\n    multiple: true,\n    columnSpan: 6,\n  },\n  {\n    name: \"salary_expectations\",\n    type: \"text\",\n    label: \"Salary Expectations\",\n    placeholder: \"e.g., $80,000 - $100,000\",\n    required: false,\n    columnSpan: 12,\n  },\n  {\n    name: \"content\",\n    type: \"textarea\",\n    label: \"Cover Letter / Additional Information\",\n    placeholder:\n      \"Tell us why you're interested in this position and what makes you a great fit...\",\n    required: true,\n    rows: 6,\n    columnSpan: 12,\n  },\n];\n\nexport default function Demo() {\n  return (\n    <ContactInterview\n      heading=\"Join Our Team\"\n      description=\"We're always looking for talented individuals who are passionate about what they do. Apply now and take the next step in your career.\"\n      formEngineSetup={{\n        api: demoFormEngineApi,\n        fields: formFields,\n        successMessage: \"Thank you for applying! We've received your application and will review it carefully. If your qualifications match our needs, we'll reach out within 1-2 weeks to schedule an interview.\",\n        formLayoutSettings: {\n          submitButtonSetup: {\n            submitLabel: \"Submit Application\",\n          },\n        },\n      }}\n      pattern=\"circles\"\n      patternOpacity={0.9}\n      background=\"muted\"\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}},"exampleProps":{"heading":"Schedule Your Interview","description":"Choose a date and time that works for you and we'll confirm shortly.","formEngineSetup":{"formConfig":{"endpoint":"/api/interview","format":"json"}}},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","interview","scheduling","form","recruitment","hr"],"performance":{},"importantUsageNotes":"formEngineSetup is required to enable form submission.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["contact_form","contact_info"],"mediaSlots":{},"propConstraints":{"formEngineSetup":{"note":"Must include a valid formConfig.endpoint"}}}}},"timestamp":"2026-06-28T21:48:21.276Z"}