You are a frontend developer and UX designer. Your job is to create a minimal, clean Contact page with ONLY a simple contact form and a bottom disclaimer. No extra details, no address, no phone number, no social links — just the form and the disclaimer. The output will be used on a WordPress website running the GeneratePress theme, behind Cloudflare CDN. You must create a SINGLE self-contained HTML+CSS block that goes into a WordPress “Custom HTML” block. **IMPORTANT:** The form itself will be handled by a WordPress plugin (WPForms Lite, Contact Form 7, or similar). The HTML you create is the VISUAL WRAPPER and LAYOUT — the actual form shortcode will be placed inside by the site owner. However, you should ALSO create a beautiful static HTML form as a visual reference / fallback that shows exactly what the form should look like. The site owner can either: – Option A: Use the static HTML form directly (it submits via mailto or a form endpoint) – Option B: Replace the form HTML with a WordPress form plugin shortcode — ## STEP 1: STYLE EXTRACTION (Do This First — Critical) Before writing ANY code, you MUST visit the homepage of {{WEBSITE_URL}} and extract the existing design system. **Extract from the homepage hero section:** – Background colors (dark/light) – Primary brand/accent color – Font families (heading + body) – Border-radius values – Button styles – Input field style (if visible anywhere) — otherwise derive from the theme – CSS class namespace prefix **Define CSS variables:** “`css :root { –ct-bg-primary: #______; –ct-bg-card: #______; –ct-bg-input: #______; /* Input field background */ –ct-text-primary: #______; –ct-text-secondary: #______; –ct-text-placeholder: #______; –ct-accent: #______; –ct-accent-hover: #______; –ct-border: #______; –ct-border-focus: #______; /* Input focus border color */ –ct-heading-font: ‘______’; –ct-body-font: ‘______’; –ct-error: #______; /* Validation error color */ –ct-success: #______; /* Success message color */ } “` — ## STEP 2: PAGE CONTENT — Keep It Minimal This page has THREE parts only: ### Part 1: Page Header – **H1**: “Contact Us” (simple, clean) – **One subtitle line**: “Have a question or feedback? Send us a message and we’ll get back to you as soon as possible.” – Nothing else. No address. No phone. No email displayed. No social links. ### Part 2: Contact Form (Simple — 3 Fields + Submit) The form should have ONLY these fields: 1. **Name** (text input) – Label: “Your Name” – Placeholder: “John Doe” – Required: Yes 2. **Email** (email input) – Label: “Your Email” – Placeholder: “[email protected]” – Required: Yes 3. **Message** (textarea) – Label: “Your Message” – Placeholder: “Write your message here…” – Rows: 5-6 – Required: Yes 4. **Submit Button** – Text: “Send Message” – Style: Match homepage CTA button (brand accent color, same border-radius, hover effect) – Full width on mobile, auto-width on desktop **NO other fields.** No subject dropdown. No phone number. No file upload. No captcha (that’s handled by plugin if needed). ### Part 3: Bottom Disclaimer (IMPORTANT) Below the form, add a clearly visible disclaimer in a subtle, muted style:
Software Support Notice: For any questions, issues, or support requests related to the software featured on this website, please contact the official software developer directly through their official website. {{WEBSITE_NAME}} is an independent informational resource and cannot provide technical support for third-party software. We can only assist with questions about our website content.
This disclaimer should be: – Visually distinct (muted background, smaller text, icon prefix) – Clear and impossible to miss – Positioned directly below the form – Not aggressive — helpful and redirecting — ## STEP 3: HTML + CSS CODE ### Layout Structure: – Full-width page background matching site – Centered content area (max-width: 640px — narrower than other pages, forms look better narrow) – Form card with subtle background/border – Clean, spacious form design – Bottom disclaimer in muted style – Responsive ### HTML Structure: “`html

“` ### Form Design Requirements: – **Input fields**: Full width, matching site theme – Background: slightly lighter/darker than card (subtle contrast) – Border: 1px solid muted color, brand-accent on focus – Border-radius: matching site (8-12px) – Padding: 14px 16px – Font: same as body text, 15-16px – Placeholder: muted text color – Focus state: border color changes to accent + subtle box-shadow glow – Smooth transition on focus (0.2s ease) – **Labels**: Small, semi-bold, above field, muted color, 13-14px – **Field spacing**: 20-24px between fields – **Submit button**: – Brand accent background – White text – Same border-radius as site buttons – Padding: 14px 32px – Hover: slightly lighter + translateY(-1px) + shadow – Active: translateY(0) – Full width on mobile – **Textarea**: Same style as inputs, resizable vertically only ### Disclaimer Design: – Background: very subtle muted color (slightly different from page bg) – Left border: 3px solid in a muted warning/info color – Padding: 16px 20px – Text: smaller (14px), muted color – Icon: small inline SVG (info circle or shield icon) – Margin-top: 32px from form – Border-radius: matching site ### General: – **Scoped CSS**: ALL classes prefixed with `ct-{{slug}}-` – **NO external JS**: Pure CSS only (no validation scripts) – **NO external images** – **Responsive**: stacks nicely on mobile, inputs go full-width – **Max size**: Under 10KB (it’s a simple page) – **Accessibility**: proper labels, focus states, contrast ratios — ## STEP 4: DELIVERY Deliver: 1. **One HTML code block** — complete Contact page, ready for WordPress 2. **SEO metadata**: – Title: `Contact Us — {{WEBSITE_NAME}}` – Description: `Get in touch with {{WEBSITE_NAME}}. Send us a message for questions or feedback about our website. For software support, please contact the official developer.` ### WordPress Settings: – Page slug: `contact` – Template: Full width, no sidebar – Status: DRAFT — ## CRITICAL RULES 1. **Minimal** — form has ONLY 3 fields (name, email, message) + submit. Nothing else. 2. **Disclaimer is mandatory** — the “contact official developer” disclaimer must be present and visible 3. **Match site style** — extract CSS from homepage hero section first 4. **Form is visual** — site owner may replace with WPForms/CF7 shortcode, so the wrapper must work either way 5. **No extra content** — no address, phone, email, social media, maps, or filler text 6. **Beautiful inputs** — form fields should look polished, not browser-default 7. **Self-contained** — paste into WordPress, it works 8. **Do your research** — visit the actual site to match design