Bootstrap Rev brings you the latest UI trends of forms. Use it in any section of the web page to increase user engagement and the interface. Here is a broad collection of form designs to integrate. These are highly customizable and responsive.
All you need to do is to copy the code and paste it to your code editor. Make the modifications as per your need. Finally, you are ready to go ahead. Decorate your website using the designs available with us.
It is a simple and essential structure that is profoundly in use. It has a line underneath each of the input fields acting as a divider of the various sections. By the by, you can see a slight change in it.
After tapping on any of the information fields, you can see the adjustment in the border shade. It will change to the theme color chosen as per your color palette during the design.
The input fields are Name, Email, Password, Select dropdown, and a Message field. It depends upon the designer to modify the input fields by adding, removing, or updating them.
The placeholder values are displayed. However, when the user fills up the fields, it will automatically hide.
Use form-s1 to select styling using Basic form.
row is the default class for the form.
form-group and form-control are the classes of Bootstrap.
input tags are for the input fields like name, email, and password.
select tag is for the select dropdown in the form.
Add/Remove/Edit the values inside the select dropdown using the option tag.
testarea is for the message section in the form.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control form-s1">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Email" class="form-control form-s1">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="password" placeholder="Password" class="form-control form-s1">
</div>
</div>
<div class="col-md-12">
<select name="" id="" class="form-control form-s1">
<option value="">Select One</option>
<option value="">Select Two</option>
<option value="">Select Three</option>
<option value="">Select Four</option>
</select>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="" placeholder="Your Message Here..." id="" cols="10" rows="5" class="form-control form-s1"></textarea>
</div>
</div>
</div>
</div>
It is also one of the basic form designs. The text fields appear as light grey. Clicking on it or during input, one can see the shade change to a little dark. The placeholder values are visible. Once the user fills up the fields, they can see the placeholder values diminished.
Use the form design on the web page to get the information about the user.
Use form-s2 for styling using Flat form.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control form-s2">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Email" class="form-control form-s2">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="password" placeholder="Password" class="form-control form-s2">
</div>
</div>
<div class="col-md-12">
<select name="" id="" class="form-control form-s2">
<option value="">Select One</option>
<option value="">Select Two</option>
<option value="">Select Three</option>
<option value="">Select Four</option>
</select>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="" placeholder="Your Message Here..." id="" cols="10" rows="5" class="form-control form-s2"></textarea>
</div>
</div>
</div>
</div>
It is a form with shadow effects. Upon clicking on the text fields, it will inherit the properties of the Basic and the Flatform. The input fields will get dark grey. Also, the border will get the color same as that of the theme color of the website. When the user fills up their details, the shadow will vanish. Likewise, the form appears flat.
Use form-s3 for styling using Materialistic form.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control form-s3">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="email" placeholder="Email" class="form-control form-s3">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="password" placeholder="Password" class="form-control form-s3">
</div>
</div>
<div class="col-md-12">
<select name="" id="" class="form-control form-s3">
<option value="">Select One</option>
<option value="">Select Two</option>
<option value="">Select Three</option>
<option value="">Select Four</option>
</select>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea name="" placeholder="Your Message Here..." id="" cols="10" rows="5" class="form-control form-s3"></textarea>
</div>
</div>
</div>
</div>
Get a new form design with icons. Here, the icon will display beside the input fields. It will provide a quality interface for the users to navigate. Make form designing facile with the pre-built designs in Bootstrap Rev.
All you need to do is to copy the code and paste it to your editor. Further modifications depend upon your need.
Step 1: Add a form-f4 class in the main div of the form-group tag.
Step 2: Add whatever icon you want to add before the input tag.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group form-s4">
<label class="bi bi-person" for="s4-name"></label>
<input type="text" id="s4-name" placeholder="Name" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group form-s4">
<label class="bi bi-envelope" for="s4-email"></label>
<input type="email" id="s4-email" placeholder="Email" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group form-s4">
<label class="bi bi-check2-square" for="s4-select"></label>
<select name="" id="" class="form-control" id="s4-select">
<option value="">Select One</option>
<option value="">Select Two</option>
<option value="">Select Three</option>
<option value="">Select Four</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group form-s4">
<label class="bi bi-key" for="s4-password"></label>
<input type="password" id="s4-password" placeholder="Password" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group form-s4 form-s4-textarea">
<label class="bi bi-chat-left-dots" for="s4-message"></label>
<textarea name="" id="s4-message" placeholder="Your Message Here..." id="" cols="10" rows="5" class="form-control"></textarea>
</div>
</div>
</div>
</div>
In this design, the label values will float. It will rise at the border of the input fields. These values are in the center by default. Use this design to get the form layout just like the g-mail form. The placeholder values will remain hidden.
The designer can edit/change/add/remove the input fields also.
Add form-floating and form-s5 class in the main div of the form input field.
<div class="container">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">Comments</label>
</div>
</div>