Multi-Column Contact Form

<section class="ft-mc-demo" aria-label="Multi-column contact form demo">
  <div class="ft-window">
    <div class="ft-window-bar" aria-hidden="true">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <form
      class="ft-form"
      action="https://formtorch.com/f/abc123"
      method="POST"
      accept-charset="UTF-8"
    >
      <div class="ft-form-heading">
        <h2>Multi-Column Contact Form</h2>
        <p>A wider layout for faster, more efficient input.</p>
      </div>

      <input
        type="hidden"
        name="_redirect"
        value="https://yoursite.com/thank-you"
      />

      <div class="ft-row">
        <div class="ft-field">
          <label for="ft-fname">First Name</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path d="M20 21a8 8 0 0 0-16 0" />
              <circle cx="12" cy="7" r="4" />
            </svg>
            <input
              id="ft-fname"
              type="text"
              name="first_name"
              placeholder="Your first name"
              autocomplete="given-name"
              required
              minlength="2"
            />
          </div>
        </div>

        <div class="ft-field">
          <label for="ft-lname">Last Name</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path d="M20 21a8 8 0 0 0-16 0" />
              <circle cx="12" cy="7" r="4" />
            </svg>
            <input
              id="ft-lname"
              type="text"
              name="last_name"
              placeholder="Your last name"
              autocomplete="family-name"
              required
              minlength="2"
            />
          </div>
        </div>
      </div>

      <div class="ft-row">
        <div class="ft-field">
          <label for="ft-email">Email</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path d="M4 6h16v12H4z" />
              <path d="m4 7 8 6 8-6" />
            </svg>
            <input
              id="ft-email"
              type="email"
              name="email"
              placeholder="you@example.com"
              autocomplete="email"
              required
            />
          </div>
        </div>

        <div class="ft-field">
          <label for="ft-phone">Phone</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path
                d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"
              />
            </svg>
            <input
              id="ft-phone"
              type="tel"
              name="phone"
              placeholder="(123) 456-7890"
              autocomplete="tel"
            />
          </div>
        </div>
      </div>

      <div class="ft-row">
        <div class="ft-field">
          <label for="ft-company">Company</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
              <rect x="2" y="7" width="20" height="14" rx="2" />
            </svg>
            <input
              id="ft-company"
              type="text"
              name="company"
              placeholder="Your company"
              autocomplete="organization"
            />
          </div>
        </div>

        <div class="ft-field">
          <label for="ft-subject">Subject</label>
          <div class="ft-control">
            <svg aria-hidden="true" viewBox="0 0 24 24">
              <path
                d="M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82Z"
              />
              <circle cx="7" cy="7" r="1" fill="currentColor" stroke="none" />
            </svg>
            <input
              id="ft-subject"
              type="text"
              name="subject"
              placeholder="What is this about?"
            />
          </div>
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-message">Message</label>
        <div class="ft-control ft-control-textarea">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <path d="M12 20h9" />
            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
          </svg>
          <textarea
            id="ft-message"
            name="message"
            rows="5"
            placeholder="How can we help you?"
            required
            minlength="10"
          ></textarea>
        </div>
      </div>

      <button class="ft-submit" type="submit">
        <svg aria-hidden="true" viewBox="0 0 24 24">
          <path d="m22 2-7 20-4-9-9-4Z" />
          <path d="M22 2 11 13" />
        </svg>
        <span>Send Message</span>
      </button>

      <p class="ft-hint">
        <svg aria-hidden="true" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="10" />
          <path d="m9 12 2 2 4-4" />
        </svg>
        <span>Structured layout for faster submissions.</span>
      </p>
    </form>
  </div>
</section>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    background: #05070d;
  }

  .ft-mc-demo {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    padding: clamp(24px, 5vw, 64px);
    display: grid;
    place-items: center;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    color: #f8fafc;
    background:
      radial-gradient(circle at 22% 18%, rgb(37 99 235 / 0.2), transparent 32%),
      radial-gradient(
        circle at 78% 75%,
        rgb(37 99 235 / 0.18),
        transparent 30%
      ),
      #05070d;
  }

  .ft-mc-demo,
  .ft-mc-demo * {
    box-sizing: border-box;
  }

  .ft-mc-demo::before,
  .ft-mc-demo::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(90px, 16vw, 130px);
    height: clamp(130px, 20vw, 190px);
    pointer-events: none;
    opacity: 0.45;
    background-image: radial-gradient(
      rgb(37 99 235 / 0.9) 1.5px,
      transparent 1.5px
    );
    background-size: 20px 20px;
  }

  .ft-mc-demo::before {
    top: 9%;
    left: 5%;
  }

  .ft-mc-demo::after {
    bottom: 9%;
    right: 5%;
  }

  .ft-window {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.22);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 130px),
      linear-gradient(145deg, rgb(15 23 42 / 0.96), rgb(2 6 23 / 0.96));
    box-shadow:
      0 26px 80px rgb(0 0 0 / 0.45),
      0 0 0 1px rgb(255 255 255 / 0.04),
      0 0 44px rgb(37 99 235 / 0.2);
  }

  .ft-window-bar {
    position: relative;
    z-index: 1;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    border-bottom: 1px solid rgb(148 163 184 / 0.12);
    background: rgb(255 255 255 / 0.025);
  }

  .ft-window-bar span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 20px rgb(37 99 235 / 0.55);
  }

  .ft-window-bar span:nth-child(2) {
    background: #1d4ed8;
  }

  .ft-window-bar span:nth-child(3) {
    background: #334155;
    box-shadow: none;
  }

  .ft-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(28px, 5vw, 40px);
  }

  .ft-form-heading {
    margin-bottom: 2px;
  }

  .ft-form-heading h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(24px, 4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  .ft-form-heading p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 1.5;
  }

  .ft-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .ft-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .ft-field label {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .ft-control {
    position: relative;
    display: flex;
    align-items: center;
  }

  .ft-control svg {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: #3b82f6;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .ft-control input,
  .ft-control textarea {
    width: 100%;
    border: 1px solid rgb(148 163 184 / 0.24);
    border-radius: 10px;
    background: rgb(15 23 42 / 0.52);
    color: #f8fafc;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition:
      border-color 160ms ease,
      background-color 160ms ease,
      box-shadow 160ms ease;
  }

  .ft-control input {
    height: 48px;
    padding: 0 16px 0 48px;
  }

  .ft-control textarea {
    min-height: 120px;
    padding: 16px 16px 16px 48px;
    resize: vertical;
  }

  .ft-control-textarea {
    align-items: flex-start;
  }

  .ft-control-textarea svg {
    top: 18px;
  }

  .ft-control input::placeholder,
  .ft-control textarea::placeholder {
    color: #64748b;
  }

  .ft-control input:hover,
  .ft-control textarea:hover {
    border-color: rgb(148 163 184 / 0.38);
    background: rgb(15 23 42 / 0.7);
  }

  .ft-control input:focus-visible,
  .ft-control textarea:focus-visible {
    border-color: #2563eb;
    background: rgb(15 23 42 / 0.78);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.18);
  }

  .ft-submit {
    appearance: none;
    height: 52px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 16px 34px rgb(37 99 235 / 0.18);
    transition:
      transform 160ms ease,
      filter 160ms ease,
      box-shadow 160ms ease;
  }

  .ft-submit svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ft-submit:hover {
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 20px 42px rgb(37 99 235 / 0.24);
  }

  .ft-submit:active {
    transform: translateY(1px);
  }

  .ft-submit:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px rgb(37 99 235 / 0.22),
      0 20px 42px rgb(37 99 235 / 0.24);
  }

  .ft-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    filter: grayscale(0.15);
  }

  .ft-hint {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #22c55e;
    font-size: 14px;
    line-height: 1.4;
  }

  .ft-hint svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (max-width: 560px) {
    .ft-row {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  @media (max-width: 520px) {
    .ft-mc-demo {
      padding: 18px;
    }

    .ft-mc-demo::before,
    .ft-mc-demo::after {
      display: none;
    }

    .ft-window {
      border-radius: 20px;
    }

    .ft-window-bar {
      height: 54px;
      padding: 0 22px;
    }

    .ft-form {
      gap: 18px;
      padding: 24px 20px;
    }

    .ft-control input {
      height: 46px;
    }

    .ft-control textarea {
      min-height: 110px;
    }

    .ft-submit {
      height: 50px;
    }
  }
</style>