Bootstrap Forms:

Bootstrap Survey Form

Websites with criticisms are more powerful than others. If you like to improve your page, it is the best idea to use a form to be aware of the users’ opinions. So, we have prepared this post to show you the Bootstrap Survey Form. By using this Bootstrap Form Code, you can realize the opinion of your audiences easily. As a result, it lets you improve in a short time. You can use the following code and enjoy. Therefore, look at the preview of the CSS Survey Form and apply it on your website.

By looking at this preview, you understand that the Pure CSS Form has a blue theme. All texts of this code are white with a normal font style. There are different fields about visitors’ personal information. These fields have a white background. You can see several multi-answer questions that you have to tick. There are some little white squares. At the end of the Survey Form Code, you should add your comments in the large white field. There is a submit button at the end of the page with a green background and white text. As you click on it, its border becomes bold.

Bootstrap Form Code

CSS Survey Form

Pure CSS Form

Survey Form Code

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid">
    <header>
        <h1 id="tittle" class="text-center fs-2">freeCodeCamp Survey Form</h1>
        <p id="description" class="text-center fs-6">
            Thank you for taking the time to helps us improve the platform
        </p>
    </header>
    <form id="survey-form" class="container rounded">
        <div class="container-form">
            <div class="form-group">
                <label class="fs-5" for="name" class="fs-5">Name</label><br />
                <input type="text"
                        name="name"
                        id="name"
                        class="form-control"
                        placeholder="Enter your name"
                        required />
            </div>
            <div class="form-group">
                <label class="fs-5" for="email" class="fs-5">Email</label><br />
                <input type="email"
                        name="email"
                        id="email"
                        class="form-control"
                        placeholder="Enter your Email"
                        required />
            </div>
            <div class="form-group">
                <label class="fs-5" for="age" class="fs-5">Age <span class="clue fs-6">(optional)</span></label><br />
                <input type="number"
                        name="age"
                        id="age"
                        class="form-control"
                        placeholder="Age"
                        min="10"
                        max="99" />
            </div>
            <div class="form-group">
                <p class="fs-5">Which option best describes your current role?</p>
                <select name="role" id="dropdown" class="form-control" required>
                    <option disable selected value>Select current role</option>
                    <option value="student">Student</option>
                    <option value="job">Full Time Job</option>
                    <option value="learner">Full Time Learner</option>
                    <option value="preferNo">Prefer not to say</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <p class="fs-5">Would you recommend freeCodeCamp to a friend?</p>
                <input type="radio"
                        name="user-recommend"
                        id="definitely"
                        class="form-check-input"
                        value="definitely" />
                <label class="fs-5 form-check-label" for="definitely">Definitely</label><br />
                <input type="radio"
                        name="user-recommend"
                        id="maybe"
                        class="form-check-input"
                        value="maybe" />
                <label class="fs-5 form-check-label" for="maybe">Maybe</label><br />
                <input type="radio"
                        name="user-recommend"
                        id="not-sure"
                        class="form-check-input"
                        value="not-sure" />
                <label class="fs-5 form-check-label"
                        class="form-check-input"
                        for="not-sure">Not Sure</label>
            </div>
            <div class="form-group">
                <p class="fs-5">What is your favorite feature of freeCodeCamp?</p>
                <select name="mostLike"
                        id="most-like"
                        class="form-control"
                        required>
                    <option disabled selected value>Select an option</option>
                    <option value="challenges">Challenges</option>
                    <option value="projects">Projects</option>
                    <option value="community">Community</option>
                    <option value="openSource">Open Source</option>
                </select>
            </div>
            <div class="form-group">
                <p class="fs-5">
                    What would you like to see improve?
                    <span class="clue">(Check all that apply)</span>
                </p>
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="front-end-projects"
                        value="front-end-projects" />
                <label class="fs-5 form-check-label" for="front-end-projects">Front-end Projects</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="back-end-projects"
                        value="back-end-projects" />
                <label class="fs-5 form-check-label" for="back-end-projects">Back-end Projects</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="data-visualization"
                        value="data-visualization" />
                <label class="fs-5 form-check-label" for="data-visualization">Data Visualization</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="challenges"
                        value="challenges" />
                <label class="fs-5 form-check-label" for="challenges">Challenges</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="open-source-community"
                        value="open-source-community" />
                <label class="fs-5 form-check-label" for="open-source-community">Open Source Community</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="gitter-help-rooms"
                        value="gitter-help-rooms" />
                <label class="fs-5 form-check-label" for="gitter-help-rooms">Gitter help rooms</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="videos"
                        value="videos" />
                <label class="fs-5 form-check-label" for="videos">Videos</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="city-meetups"
                        value="city-meetups" />
                <label class="fs-5 form-check-label" for="city-meetups">City Meetups</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="wiki"
                        value="wiki" />
                <label class="fs-5 form-check-label" for="wikis">Wikis</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="forum"
                        value="forum" />
                <label class="fs-5 form-check-label" for="forums">Forums</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="addional-courses"
                        value="additional-courses" />
                <label class="fs-5 form-check-label" for="additional-courses">Additional Courses</label>
            </div>
            <div class="form-group">
                <p class="fs-5">Any comments or suggestions?</p>
                <textarea name="comment"
                            id="comments"
                            class="form-control fs-5"
                            rows="5"
                            placeholder="Enter your comments here..."></textarea>
            </div>
            <div class="form-group d-grid gap-2">
                <button type="submit" id="submit" class="btn btn-success fs-6">
                    Submit
                </button>
            </div>
        </div>
    </form>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
	background-attachment: fixed;
	background-size: cover;
	background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(http://frontendfreecode.com/img/survey-form-background.jpeg);
	color: #f3f3f3;
	font-family: "Poppins", sans-serif;
}
header {
	padding-top: 2rem;
}
header h1 {
	font-weight: 400;
}
header p {
	padding-bottom: 0.5rem;
	font-weight: 300;
	font-style: italic;
}
#survey-form {
	max-width: 680px;
	background-color: rgba(27, 27, 50, 0.8);
}
.form-group {
	padding: 2rem 1rem 0 1rem;
}
label {
	padding-bottom: 0.5rem;
}
#submit {
	margin-bottom: 5rem;
}
.form-group input {
	margin-top: 0.45rem;
}
.form-group label {
	padding-left: 0.5rem;
}
.form-group textarea {
	border-radius: 0;
}
.container-form {
	padding: 0;
	margin: 0 1rem;
}
#submit {
	background-color: rgb(55, 175, 101);
	height: 3rem;
}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
	background-attachment: fixed;
	background-size: cover;
	background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(http://frontendfreecode.com/img/survey-form-background.jpeg);
	color: #f3f3f3;
	font-family: "Poppins", sans-serif;
}
header {
	padding-top: 2rem;
}
header h1 {
	font-weight: 400;
}
header p {
	padding-bottom: 0.5rem;
	font-weight: 300;
	font-style: italic;
}
#survey-form {
	max-width: 680px;
	background-color: rgba(27, 27, 50, 0.8);
}
.form-group {
	padding: 2rem 1rem 0 1rem;
}
label {
	padding-bottom: 0.5rem;
}
#submit {
	margin-bottom: 5rem;
}
.form-group input {
	margin-top: 0.45rem;
}
.form-group label {
	padding-left: 0.5rem;
}
.form-group textarea {
	border-radius: 0;
}
.container-form {
	padding: 0;
	margin: 0 1rem;
}
#submit {
	background-color: rgb(55, 175, 101);
	height: 3rem;
}
</style>

</head>
<body>
<div class="container-fluid">
    <header>
        <h1 id="tittle" class="text-center fs-2">freeCodeCamp Survey Form</h1>
        <p id="description" class="text-center fs-6">
            Thank you for taking the time to helps us improve the platform
        </p>
    </header>
    <form id="survey-form" class="container rounded">
        <div class="container-form">
            <div class="form-group">
                <label class="fs-5" for="name" class="fs-5">Name</label><br />
                <input type="text"
                        name="name"
                        id="name"
                        class="form-control"
                        placeholder="Enter your name"
                        required />
            </div>
            <div class="form-group">
                <label class="fs-5" for="email" class="fs-5">Email</label><br />
                <input type="email"
                        name="email"
                        id="email"
                        class="form-control"
                        placeholder="Enter your Email"
                        required />
            </div>
            <div class="form-group">
                <label class="fs-5" for="age" class="fs-5">Age <span class="clue fs-6">(optional)</span></label><br />
                <input type="number"
                        name="age"
                        id="age"
                        class="form-control"
                        placeholder="Age"
                        min="10"
                        max="99" />
            </div>
            <div class="form-group">
                <p class="fs-5">Which option best describes your current role?</p>
                <select name="role" id="dropdown" class="form-control" required>
                    <option disable selected value>Select current role</option>
                    <option value="student">Student</option>
                    <option value="job">Full Time Job</option>
                    <option value="learner">Full Time Learner</option>
                    <option value="preferNo">Prefer not to say</option>
                    <option value="other">Other</option>
                </select>
            </div>
            <div class="form-group">
                <p class="fs-5">Would you recommend freeCodeCamp to a friend?</p>
                <input type="radio"
                        name="user-recommend"
                        id="definitely"
                        class="form-check-input"
                        value="definitely" />
                <label class="fs-5 form-check-label" for="definitely">Definitely</label><br />
                <input type="radio"
                        name="user-recommend"
                        id="maybe"
                        class="form-check-input"
                        value="maybe" />
                <label class="fs-5 form-check-label" for="maybe">Maybe</label><br />
                <input type="radio"
                        name="user-recommend"
                        id="not-sure"
                        class="form-check-input"
                        value="not-sure" />
                <label class="fs-5 form-check-label"
                        class="form-check-input"
                        for="not-sure">Not Sure</label>
            </div>
            <div class="form-group">
                <p class="fs-5">What is your favorite feature of freeCodeCamp?</p>
                <select name="mostLike"
                        id="most-like"
                        class="form-control"
                        required>
                    <option disabled selected value>Select an option</option>
                    <option value="challenges">Challenges</option>
                    <option value="projects">Projects</option>
                    <option value="community">Community</option>
                    <option value="openSource">Open Source</option>
                </select>
            </div>
            <div class="form-group">
                <p class="fs-5">
                    What would you like to see improve?
                    <span class="clue">(Check all that apply)</span>
                </p>
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="front-end-projects"
                        value="front-end-projects" />
                <label class="fs-5 form-check-label" for="front-end-projects">Front-end Projects</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="back-end-projects"
                        value="back-end-projects" />
                <label class="fs-5 form-check-label" for="back-end-projects">Back-end Projects</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="data-visualization"
                        value="data-visualization" />
                <label class="fs-5 form-check-label" for="data-visualization">Data Visualization</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="challenges"
                        value="challenges" />
                <label class="fs-5 form-check-label" for="challenges">Challenges</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="open-source-community"
                        value="open-source-community" />
                <label class="fs-5 form-check-label" for="open-source-community">Open Source Community</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="gitter-help-rooms"
                        value="gitter-help-rooms" />
                <label class="fs-5 form-check-label" for="gitter-help-rooms">Gitter help rooms</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="videos"
                        value="videos" />
                <label class="fs-5 form-check-label" for="videos">Videos</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="city-meetups"
                        value="city-meetups" />
                <label class="fs-5 form-check-label" for="city-meetups">City Meetups</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="wiki"
                        value="wiki" />
                <label class="fs-5 form-check-label" for="wikis">Wikis</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="forum"
                        value="forum" />
                <label class="fs-5 form-check-label" for="forums">Forums</label><br />
                <input class="form-check-input"
                        type="checkbox"
                        name="prefer"
                        id="addional-courses"
                        value="additional-courses" />
                <label class="fs-5 form-check-label" for="additional-courses">Additional Courses</label>
            </div>
            <div class="form-group">
                <p class="fs-5">Any comments or suggestions?</p>
                <textarea name="comment"
                            id="comments"
                            class="form-control fs-5"
                            rows="5"
                            placeholder="Enter your comments here..."></textarea>
            </div>
            <div class="form-group d-grid gap-2">
                <button type="submit" id="submit" class="btn btn-success fs-6">
                    Submit
                </button>
            </div>
        </div>
    </form>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS