Contact Lab

1. Simple Form — minimal Apple-style

        
        
      
<header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main class="contact-wrapper">
  <h1>Get in touch</h1>
  <p class="intro">
    Have a question or collaboration idea? Fill out the form below.
  </p>

  <form action="https://formspree.io/f/YOUR_ID" method="POST">
    <label>Name:</label>
    <input type="text" name="name" required>

    <label>Email:</label>
    <input type="email" name="email" required>

    <label>Message:</label>
    <textarea name="message" rows="5" required></textarea>

    <button type="submit">Send Message</button>
  </form>
</main>
/* Centered narrow column, Apple-style typography */
.contact-wrapper {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 20px;
}

h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.intro {
  max-width: 580px;
  color: #555;
  margin-bottom: 48px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 540px;
}

input, textarea {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
}

button[type="submit"] {
  width: 180px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid #111;
  background: transparent;
  cursor: pointer;
}
button:hover { background: #111; color: #fff; }

Get in touch

Have a question, collaboration idea, or need support? Fill out the form below and I'll get back to you as soon as possible.

2. Hero + Form — full-width image above form

        
        
      
<section class="hero">
  <div>
    <h1>Let's Work Together</h1>
    <p>Curious about collaboration or design work? Reach out.</p>
  </div>
</section>

<main class="contact-wrapper">
  <form action="https://formspree.io/f/YOUR_ID" method="POST">
    <!-- same input fields as Variant 1 -->
  </form>
</main>
/* Full-width hero image with bottom-aligned text */
.hero {
  width: 100%;
  min-height: 45vh;
  background: url("image.jpg") center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 100px 20px 40px;
  text-align: center;
}

.hero h1 {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.hero p {
  max-width: 600px;
  color: #555;
  font-size: 18px;
}

Let's Work Together

Curious about collaboration, design work, development, or speaking engagements? Reach out and I'll respond shortly.

3. Dark Theme — moody and minimal

        
        
      
<body>
  <header>
    <nav>
      <a href="#">Home</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="wrapper">
    <h1>Contact</h1>
    <p class="intro">
      Questions, collaborations, project requests — reach out anytime.
    </p>
    <form action="https://formspree.io/f/YOUR_ID" method="POST">
      <!-- same input fields -->
    </form>
  </main>
</body>
/* Custom properties for a dark palette */
:root {
  --d-gray: #0c0c0c;
  --gray: #2a2a2a;
  --light-gray: #4a4a4a;
  --white: #eaeaea;
}

body {
  background: var(--d-gray);
  color: var(--white);
}

input, textarea {
  background: var(--gray);
  border: 1px solid #000;
  color: var(--white);
}

button[type="submit"] {
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
}
button:hover { background: var(--white); color: #000; }

Contact

Questions, collaborations, project requests—reach out anytime.

4. Split Screen — image left, form right

        
        
      
<section class="split">
  <div class="left-img"></div>

  <div class="right-form">
    <h1>Let's Connect</h1>
    <p>I'd love to hear from you. Send a message.</p>

    <form action="https://formspree.io/f/YOUR_ID" method="POST">
      <!-- same input fields -->
    </form>
  </div>
</section>
/* Flexbox 50/50 split, stacks on mobile */
.split {
  display: flex;
  min-height: 100vh;
  flex-wrap: wrap;
}

.left-img {
  flex: 1;
  min-width: 300px;
  background: url("image.jpg") center/cover no-repeat;
}

.right-form {
  flex: 1;
  min-width: 300px;
  padding: 70px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stack into a single column below 850px */
@media (max-width: 850px) {
  .split { flex-direction: column; }
}

Let's Connect

I'd love to hear from you. Send a message and I'll respond soon.

5. Support Grid — resources, form, contact info

        
        
      
<main class="wrapper">
  <h1>Contact Support</h1>
  <p class="sub">Send a message or find answers below.</p>

  <div class="grid">
    <div class="panel">
      <strong>Resources</strong>
      FAQs<br>Documentation<br>Status
    </div>

    <div>
      <form action="https://formspree.io/f/YOUR_ID" method="POST">
        <!-- same input fields -->
      </form>
    </div>

    <div class="panel">
      <strong>Contact Info</strong>
      Email: support@example.com<br>
      Hours: M–F 9–5
    </div>
  </div>
</main>
/* 3-column grid: narrow - wide - narrow */
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 30px;
}

.panel {
  padding: 10px 0;
  font-size: 15px;
  color: #666;
}

.panel strong {
  color: #111;
  display: block;
  margin-bottom: 8px;
}

/* Collapse to single column on small screens */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
}

Contact Support

Send a message or find answers using the resources below.

Resources FAQs
Documentation
Service Status

Contact Info Email: support@example.com
Office Hours: M–F
9 AM–5 PM

6. Gradient Hero — colorful radial background + gradient text

        
        
      
<section class="grad-hero">
  <h1>Reach Out</h1>
  <p>Send questions, ideas, or project inquiries.</p>
</section>

<main class="wrapper">
  <form action="https://formspree.io/f/YOUR_ID" method="POST">
    <!-- same input fields -->
  </form>
</main>
/* Layered radial gradients create a colorful glow */
.grad-hero {
  padding: 120px 20px 80px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,107,157,.35), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(108,99,255,.35), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(95,211,255,.35), transparent 55%),
    linear-gradient(135deg, #fef6fb 0%, #f0efff 50%, #eefaff 100%);
}

/* Gradient-filled text using background-clip */
.grad-hero h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #e55481, #6c63ff 60%, #00a9e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grad-hero p {
  color: #555;
  max-width: 600px;
  margin: 0 auto;
  font-size: 18px;
}

Reach Out

Send questions, ideas, or project inquiries. Let's create something extraordinary.

7. Multi-Contact Grid — multiple ways to reach out (HubSpot best practice)

        
        
      
<main class="wrap">
  <h1>Get in Touch</h1>
  <p>Pick whichever channel works best for you.</p>

  <div class="contact-grid">
    <div class="contact-card">
      <span>✉️</span>
      <h3>Email</h3>
      <a href="mailto:hi@site.com">hi@site.com</a>
    </div>

    <div class="contact-card">
      <span>📞</span>
      <h3>Phone</h3>
      <a href="tel:+15551234567">(555) 123-4567</a>
    </div>

    <div class="contact-card">
      <span>💬</span>
      <h3>Live Chat</h3>
      <p>M–F 9am–5pm EST</p>
    </div>

    <div class="contact-card">
      <span>📍</span>
      <h3>Visit</h3>
      <p>123 Main St, VA</p>
    </div>
  </div>

  <form action="https://formspree.io/f/YOUR_ID" method="POST">
    <!-- same input fields -->
  </form>
</main>
/* Responsive auto-fit grid of contact cards */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.contact-card {
  background: #f7f7f8;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s;
}

.contact-card:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

.contact-card .emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

Get in Touch

Pick whichever channel works best — we reply within 24 hours.

Email

hi@example.com

Phone

(555) 123-4567

Live Chat

M–F 9am–5pm EST

Visit

123 Main St
Lakewood, VA

8. FAQ + Form — self-service alongside contact (SaaS best practice)

        
        
      
<main class="wrap">
  <h1>We're here to help</h1>
  <p>Check the FAQ first — or send us a message.</p>

  <div class="two-col">

    <section class="faq">
      <h3>Frequent Questions</h3>

      <div class="faq-item">
        <div class="faq-q">How fast do you respond?</div>
        <div class="faq-a">
          Within 24 hours on business days.
        </div>
      </div>

      <div class="faq-item">
        <div class="faq-q">Where can I find pricing?</div>
        <div class="faq-a">
          Visit our pricing page for a full breakdown.
        </div>
      </div>

      <!-- more faq-items here -->
    </section>

    <section>
      <form action="https://formspree.io/f/YOUR_ID" method="POST">
        <!-- name, email, subject, message fields -->
      </form>
    </section>

  </div>
</main>
/* Two-column layout: FAQ | form */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

/* FAQ accordion — toggled with .open class */
.faq-item {
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.faq-q {
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.faq-q::after { content: "+"; color: #999; }
.faq-item.open .faq-q::after { content: "−"; }

.faq-a { display: none; padding-top: 10px; }
.faq-item.open .faq-a { display: block; }

@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

What to include on a contact page

Multiple contact methods

Hours & response time

Physical address

Short form (3–5 fields)

FAQ or help links

Clear routing

Welcoming copy

Thank-you / next steps

Mobile-first layout