How to create a form within dropdown menu using Bootstrap ?
Last Updated :
19 Jan, 2023
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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.
Similar Reads
How to create a dropdown menu in Bootstrap ? A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1
2 min read
How to Design Full Width Dropdown Navbar using Bootstrap? A full-width dropdown navbar is a popular design element in modern web development, providing a responsive and user-friendly navigation experience. Using Bootstrap, a powerful front-end framework, simplifies the creation of such a navbar with its built-in classes and responsive grid system. This gui
4 min read
How to Make Menu Dropdown on Hover using Bootstrap ? Menu Dropdown on Hover using Bootstrap involves customizing Bootstrap's dropdown component to display menus when hovering over the trigger, not clicking. This is achieved by modifying CSS classes, such as adding "dropdown" and "dropdown-menu" to respective elements, providing a more intuitive user e
4 min read
How to create a vertical or basic form using Bootstrap ? Forms are used on almost every website that you visit. It is generally used to collect data from the users. It consists of various interactive controls that enable users to input the data. These controls are wrapped in the <form> tag and also can be designed or styled according to the need by
4 min read
How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for
6 min read
How to write a form in different line using Bootstrap ? Bootstrap is an open-source front-end framework for developing standard & decorative websites or web applications that are fast and user-friendly. Bootstrap includes templates based on HTML and CSS for tables, forms, buttons, etc. Bootstrap also uses JavaScript and helps us to create responsive
2 min read