{"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}},"defaultProps":{},"dependencies":["@opensite/ui","@page-speed/forms"],"tags":["contact","interview","scheduling","form","recruitment","hr"],"performance":{},"importantUsageNotes":"DO NOT USE this block unless the site is conducting interviews or hiring — this is a highly contextual block. 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 an interview scheduling use case — first/last name, email, phone, LinkedIn profile, position applying for select, and additional details — 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:38:35.311Z"}