We will design a Contact Page with a Map using Bootstrap. 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.
Prerequisites
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: This example shows the implementation of the above-explained approach.
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=
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href=
integrity=
"sha512-jKX8EOtiVrylMIEk2nRkf5KowSF8+AJslPduL+oV4FqnyxSQxL0t4rKOeKKvntPtskFi1q6hBld6HzfdjZlnfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<div class="p-4 bg-white border rounded">
<h1 class="text-center text-success">GeeksforGeeks</h1>
<h2 class="text-center">Contact Us</h2>
<form>
<div class="form-group">
<label for="fullName">
<i class="fa fa-user"></i> Full Name:
</label>
<input type="text" class="form-control"
id="fullName" name="fullName" required>
</div>
<div class="form-group">
<label for="email">
<i class="fa fa-envelope"></i> Email Address:
</label>
<input type="email" class="form-control"
id="email" name="email" required>
</div>
<div class="form-group">
<label for="mobile">
<i class="fa fa-phone"></i> Contact No:
</label>
<input type="tel" class="form-control"
id="mobile" name="mobile" required>
</div>
<div class="form-group">
<label for="msg">
<i class="fa fa-comment"></i> Write Message:
</label>
<textarea class="form-control" id="msg"
name="msg" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-success btn-block">Submit</button>
</form>
</div>
</div>
<div class="col-md-6">
<div class="p-4 bg-secondary text-white rounded">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item"
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" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output: