Open In App

Design a Contact Page with a Map using Bootstrap

Last Updated : 26 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
          crossorigin="anonymous">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        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:


Screenshot-2024-02-25-122134


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        How to make Responsive Carousel in Bootstrap ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Creating a Timer Component with useEffect Hook in React
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Design a Contact Page with a Map using HTML and CSS
            

        
    
        
            

                Design a Contact us Page using HTML and CSS
            

        
    
        
            

                Contact Us Page using ReactJS and Tailwind
            

        
    
        
            

                Design a Contact Form Using Tailwind CSS
            

        
    
        
            

                Design a Google Chrome Page Template using Bootstrap
            

        
    
        
            

                Simple Contact Form using HTML CSS and PHP
            

        
    
        
            

                Create Contact Us using WTForms in Flask
            

        
    
        
            

                How to Build a Simple Contact List Android App using MVVM and Room Database?
            

        
    
        
            

                Contact Us Form Using ReactJS and Tailwind
            

        
    
        
            

                Create a Contact Form using HTML CSS & JavaScript
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        anjanasuptb0y                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox