Design a Contact Page with a Map using HTML and CSS

Last Updated : 26 Dec, 2023

In this article, we will design a Contact Page with a Map using HTML and CSS. The Contact Page with the Map is useful and provides users with geographical context for finding your organization or the location more efficiently. Here, we will create the basic contact form for the user to fill out and the location of the organization that we want to display.

Preview

contatmap

Approach

Set up a basic HTML structure with div elements for form and map, including labels, inputs, textarea, and a submit button.
Now use Flexbox for a clean layout, styling form elements with rounded corners, and applying a subtle box shadow.
Design the form labels using Font Awesome icons for a modern and intuitive user interface.
Now add a Google Map iframe within a dedicated div, adjusting dimensions and appearance.
Choose the best color scheme, ensuring a visually pleasing and better design.

Example: The below example illustrates the creation of the contact form with a Map embedded.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Feedback Form with map</title> 
    <link rel="stylesheet" 
          href="index.css"> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
          integrity= 
"sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" /> 
</head> 
  
<body> 
    <div class="ffbox"> 
        <div class="ffbox1"> 
            <h1 class="gfg">GeeksforGeeks</h1> 
            <h2>Contact Us</h2> 
            <form> 
                <label for="fullName"> 
                    <i class="fa fa-solid fa-user" 
                       style="margin: 2px;"> 
                    </i> Full Name: 
                </label> 
                <input type="text" 
                       id="fullName" 
                       name="fullName" required> 
  
                <label for="email"> 
                    <i class="fa fa-solid fa-envelope" 
                       style="margin: 2px;"> 
                    </i> 
                    Email Address: 
  
                </label> 
                <input type="email"
                       id="email" 
                       name="email" required> 
  
                <label for="mobile"> 
                    <i class=" fa fa-solid fa-phone" 
                       style="margin: 2px;"> 
                    </i> 
                    Contact No: 
                </label> 
                <input type="tel"
                       id="mobile" 
                       name="mobile" required> 
  
                <label for="msg"> 
                    <i class=" fa fa-solid fa-comment" 
                       style="margin: 2px;"> 
                    </i> 
                    Write Message: 
                </label> 
                <textarea id="msg" 
                          name="msg" 
                          rows="5" required> 
                </textarea> 
  
                <button type="submit"> 
                    Submit 
                </button> 
            </form> 
        </div> 
        <div class="map-div"> 
            <iframe src= 
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3506.1602802684192!2d77.39638073968018!3d28.504825075835775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce626851f7009%3A0x621185133cfd1ad1!2sGeeksforGeeks%20%7C%20Coding%20Classes!5e0!3m2!1sen!2sin!4v1702963476861!5m2!1sen!2sin"
                    width="370" 
                    height="95%" 
                    allowfullscreen="" 
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"> 
            </iframe> 
        </div> 
    </div> 
</body> 
  
</html>

CSS

/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
body { 
    font-family: 'Poppins', sans-serif; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    background-image: 
        linear-gradient(120deg, #caeff2 0%, #a2c2ee 100%); 
} 
  
.ffbox { 
    display: flex; 
    width: 80%; 
    max-width: 800px; 
    background-color: #fff; 
    border: 3px solid #e4e4e9; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
    overflow: hidden; 
    border-radius: 10px; 
    flex-wrap: wrap; 
} 
  
.ffbox1 { 
    flex: 1; 
    padding: 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
} 
  
.ffbox1 label { 
    display: block; 
    margin-bottom: 8px; 
} 
  
.ffbox1 input, 
.ffbox1 textarea { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 16px; 
    box-sizing: border-box; 
    border-radius: 15px; 
    background-color: #dcdce1; 
    border: none; 
} 
  
.ffbox1 textarea { 
    resize: vertical; 
} 
  
.ffbox1 { 
    margin-bottom: 16px; 
} 
  
.ffbox1 label { 
    margin-right: 16px; 
} 
  
.map-div { 
    flex: 1; 
    background-color: #eee; 
} 
  
button { 
    width: 100%; 
    padding: 8px; 
    margin-bottom: 16px; 
    box-sizing: border-box; 
    border-radius: 15px; 
    background-color: rgb(105, 152, 111); 
    color: rgb(183, 213, 179); 
    font-size: 17px; 
    font-weight: 700; 
    border: #a2c2ee; 
} 
  
button:hover { 
    background-color: rgb(52, 98, 58); 
} 
  
.map-div iframe { 
    border: 0; 
    padding: 10px; 
} 
  
.gfg { 
    text-align: center; 
    color: green; 
} 
  
.map-div { 
    background-color: rgb(152, 178, 234); 
}