Designing a Flexible Flexbox Layout for a Contact Us Page with Map and Form

Creating a contact us page that is both visually appealing and functional is essential for any website. Using CSS Flexbox allows for a flexible and responsive layout that adapts to various screen sizes. In this article, we will explore how to design a flexible Flexbox layout for a contact page featuring a map and a contact form.

Understanding Flexbox Basics

Flexbox is a CSS layout module that makes it easy to align and distribute space among items in a container. It is especially useful for creating responsive layouts that adjust seamlessly across devices. The key properties include display: flex;, flex-direction, justify-content, and align-items.

Designing the Layout Structure

We will create a container that holds two main sections: one for the map and one for the contact form. Using Flexbox, these sections will sit side by side on larger screens and stack vertically on smaller screens.

HTML Structure

Here is a simple HTML structure for the contact page:

<div class="contact-container">
  <div class="map-section">
    <!-- Embed your map here -->
  </div>
  <div class="form-section">
    <!-- Contact form here -->
  </div>
</div>

Applying Flexbox with CSS

Using CSS, we will style the container to display as flex and make it responsive. Here is an example:

.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.map-section, .form-section {
  flex: 1 1 45%;
}

@media (max-width: 768px) {
  .map-section, .form-section {
    flex: 1 1 100%;
  }
}

Adding Content to Map and Form

Replace the placeholders with your actual map embed code and contact form. For example, a Google Map embed and a simple HTML form.

<div class="map-section">
  <iframe src="https://maps.google.com/..." width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

<div class="form-section">
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" required></textarea>
    <button type="submit">Send</button>
  </form>
</div>

Final Tips for a Responsive Layout

Test your contact page on different devices to ensure the layout adapts well. Adjust the flex-basis or media query breakpoints as needed. Flexbox provides a powerful way to create flexible, user-friendly contact pages that look great everywhere.

Table of Contents