Open In App

How to create a form within dropdown menu using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some user data or to give access to specific content.

Prerequisite: Before start creating a form within a dropdown menu you have to know how to create a form and a dropdown menu using Bootstrap.

A form is created using the <form> tag in the HTML. To create a dropdown menu in Bootstrap, we need to create a button with the class “dropdown-toggle” and data-bs-toggle=”dropdown” attribute. Here in this article, we will create a Feedback form within a dropdown menu in both the example, but the first example will be created without having the check box or radio buttons, But the second example code will have those features.

Example 1: We will create a contact us form within the dropdown menu using Bootstrap. We will include the Bootstrap CSS and JavaScript files through the CDN link in the HTML document. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks Contact us form</title>
    <meta lang="UTF-8">
    <meta name="viewport"
          content="width=device-width initial-scale=1">
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
    </div>
    <div class="container">
        <div class="dropdown">
            <button type="button" 
                    class="btn btn-lg btn-success dropdown-toggle"
                    data-bs-toggle="dropdown">
                Feedback and Queries<span class="caret"></span>
            </button>
            <div class="dropdown-menu col-md-6">
                <form class="m-3">
                    <div class="form-group">
                        <label for="fm1" class="form-label">
                            Email Address
                        </label>
                        <input type="email" class="form-control" 
                               id="fm1" 
                               placeholder="Enter you email address" 
                               required>
                    </div>
                    <div class="form-group">
                        <label for="fm2" class="form-label">
                            Contact Number
                        </label>
                        <input type="tel" class="form-control" 
                               id="fm2" placeholder="Your contact number">
                    </div>
                    <div class="form-group">
                        <label for="fm3" class="form-label">
                            Drop your feedback/Query
                        </label>
                        <input type="text" class="form-control"
                               id="fm3" required>
                    </div>
                    <div class="form-group py-2">
                        <button type="submit" class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:                        

 

Example 2: In this example radio and the checkbox will be added to the above contact us form within the dropdown to get more information like gender, enrolled course, etc using Bootstrap.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks Contact us form</title>
    <meta lang="UTF-8">
    <meta name="viewport"
          content="width=device-width initial-scale=1">
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
</head>
  
<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
    </div>
    <div class="container">
        <div class="dropdown">
            <button type="button" 
                    class="btn btn-lg btn-success 
                           dropdown-toggle" 
                    data-bs-toggle="dropdown">
                Feedback and Queries
                <span class="caret"></span>
            </button>
            <div class="dropdown-menu col-md-6">
                <form>
                    <div class="form-group m-1">
                        <label for="fm1" class="form-label">
                            Email Address
                        </label>
                        <input type="email"
                               class="form-control" 
                               id="fm1"
                               placeholder="Enter you email address" 
                               required>
                    </div>
                    <div class="form-group m-1">
                        <label for="fm2" class="form-label">
                            Contact Number
                        </label>
                        <input type="number" class="form-control" 
                               id="fm2"
                               placeholder="Your contact number">
                    </div>
                    <div class="form-group m-1">
                        <label for="fm3" 
                               class="form-check-label">Gender</label><br>
                        Male<input type="radio" 
                                   class="form-check-input m-1" 
                                   name="gen" id="fm3" 
                                   value="Male">
                        Female<input type="radio" 
                                     class="form-check-input m-1"
                                     name="gen" id="fm3"
                                     value="Female">
                    </div>
                    <div class="form-group m-1">
                        <label for="fm4" 
                               class="form-check--label">
                            Enrolled course
                        </label>
                        <br>
                        <input type="checkbox" 
                               class="form-check-input m-1" 
                               name="enr" id="fm4" value="C">
                               C<br>
                        <input type="checkbox" 
                               class="form-check-input m-1" 
                               name="enr" id="fm4" value="C++">
                               C++<br>
                        <input type="checkbox" 
                               class="form-check-input m-1" 
                               name="enr" id="fm4" value="Python">
                               Python<br>
                        <input type="checkbox" 
                               class="form-check-input m-1" 
                               name="enr" id="fm4" value="C">
                               Java
                    </div>
                    <div class="form-group m-1">
                        <label for="fm3" class="form-label">
                            Drop your feedback/Query
                        </label>
                        <input type="text" 
                               class="form-control" id="fm3" 
                               required>
                    </div>
                    <div class="form-group p-1">
                        <button type="submit" 
                                class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Note: Always use the current version of Bootstrap’s CDN link so the latest features can be used.



Last Updated : 19 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads