Contact Form Layouts

Various contact form layouts using flexbox. Features different input arrangements, responsive designs, and form validation states. Perfect for creating user-friendly contact and feedback forms.

PREVIEW

Get in Touch

Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.

[email protected]

+1 (555) 123-4567

123 Example St, City, Country

CODE

/* Form Container */
    .form-container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Form Grid */
    .form-grid {
      display: grid;
      gap: 1.5rem;
    }

    @media (min-width: 768px) {
      .form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Form Group */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    /* Split Layout */
    .split-layout {
      display: grid;
      gap: 1.5rem;
    }

    @media (min-width: 768px) {
      .split-layout {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Contact Info */
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    /* Contact Item */
    .contact-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }