Bootstrap Forms:

Responsive Contact Form Using Bootstrap 5

On most websites, we have seen a page that is specified for contacting the admins. It is better to take into account this factor on your website. The Responsive Contact Form Using Bootstrap 5 helps you to use this element on your page easily. This Bootstrap Contact Form allows your audiences to contact you. As a result, you can be aware of their criticisms and complaints about your services. So, you can improve your content based on the desire of your audience. You can use this Contact US Form Code to interest your visitors.

By looking at the following preview, you can realize that the below code has a white background. So, you can use this Pure CSS Contact Form on your page if you have a website with a simple design. There is the main question at the top of the page and all texts are black. You should check this question and answer. Other fields are determined for your personal information. This factor is invisible to other audiences. After filling in all blanks, you can click on “Send Message”. This part has a white background with black text. As you put the mouse on this section, its background changes to black and the writing turns white. There is contact information at the bottom of the Bootstrap 5 Responsive Form.

Bootstrap Contact Form

Contact US Form Code

Pure CSS Contact Form

Bootstrap 5 Responsive Form

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="bg-light">
        <div class="row">
            <div class="col-lg-8 col-md-12 p-5 bg-white rounded-3">
                <div class="d-flex mb-3 flex-column">
                    <h1 class="h5 text-capitalize my-4">What service You need ?</h1>
                    <div class="d-flex flex-wrap">
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="webdev" class="form-check-input m-0 me-3" id="webdev" />
                            <label for="webdev"> Web Development</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="webdes" class="form-check-input m-0 me-3" id="webdes" />
                            <label for="webdes"> Web Design</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="logodes" class="form-check-input m-0 me-3" id="logodes" />
                            <label for="logodes"> Logo Design</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="others" class="form-check-input m-0 me-3" id="others" />
                            <label for="others"> Others </label>
                        </div>
                    </div>
                </div>
                <form class="row mb-3">
                    <div class="col-md-6 p-3">
                        <input required placeholder="first name" type="text" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="last name" type="text" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="E-mail" type="email" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="phone" type="tel" name="" id="" />
                    </div>
                    <div class="col-md">
                        <textarea required name="" placeholder="write your message" id="" cols="30" rows="1"></textarea>
                    </div>
                    <div class="text-end mt-4">
                        <input class="btn px-4 py-3 btn-outline-dark" type="submit" value="Send Message" />
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-md-12 text-white aside px-4 py-5">
                <div class="mb-5">
                    <h1 class="h3">Contact Information</h1>
                    <p class="opacity-50">
                        <small>
                            Fill out the from and we will get back to you whitin 24 hours
                        </small>
                    </p>
                </div>
                <div class="d-flex flex-column px-0">
                    <ul class="m-0 p-0">
                        <li class="d-flex justify-content-start align-items-center mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fa fa-phone"></i>
                            </span>
                            <span>+134 1234 1234</span>
                        </link>
                        <li class="d-flex align-items-center r mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fas fa-mail-bulk"></i>
                            </span>
                            <span>Help@contact.com</span>
                        </li>
                        <li class="d-flex justify-content-start align-items-center mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fa-solid fa-location-pin"></i>
                            </span>
                            <span>
                                52 Buddy Ln Conway, <br />
                                Arkansas(AR), 72032
                            </span>
                        </li>
                    </ul>
                    <div class="text-muted text-center">
                        <code>
                            Your Logo
                        </code>
                        <br />
                        <code>Created By : Company Name </code> <br />
                        <code>
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

* {
	font-family: "Poppins", sans-serif;
}
body {
	background-image: linear-gradient( to left bottom, #051937, #05162f, #051327, #040f1f, #010a18);
	background-size: 800%;
	animation: animateClr 1s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
	border: none;
	border-bottom: 2px solid rgb(128, 126, 126);
	background: transparent;
	outline: none;
	width: 100%;
	text-transform: capitalize;
	padding: 1rem 0.4rem;
}
.aside {
	background-image: linear-gradient( to left bottom, #051937, #002350, #002d69, #003684, #01409f);
	animation: animateClr 5s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
	background-size: 400%;
}
@keyframes animateClr {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

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

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<style>
* {
	font-family: "Poppins", sans-serif;
}
body {
	background-image: linear-gradient( to left bottom, #051937, #05162f, #051327, #040f1f, #010a18);
	background-size: 800%;
	animation: animateClr 1s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
	border: none;
	border-bottom: 2px solid rgb(128, 126, 126);
	background: transparent;
	outline: none;
	width: 100%;
	text-transform: capitalize;
	padding: 1rem 0.4rem;
}
.aside {
	background-image: linear-gradient( to left bottom, #051937, #002350, #002d69, #003684, #01409f);
	animation: animateClr 5s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99);
	background-size: 400%;
}
@keyframes animateClr {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
</style>

</head>
<body>
<div class="container">
    <div class="bg-light">
        <div class="row">
            <div class="col-lg-8 col-md-12 p-5 bg-white rounded-3">
                <div class="d-flex mb-3 flex-column">
                    <h1 class="h5 text-capitalize my-4">What service You need ?</h1>
                    <div class="d-flex flex-wrap">
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="webdev" class="form-check-input m-0 me-3" id="webdev" />
                            <label for="webdev"> Web Development</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="webdes" class="form-check-input m-0 me-3" id="webdes" />
                            <label for="webdes"> Web Design</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="logodes" class="form-check-input m-0 me-3" id="logodes" />
                            <label for="logodes"> Logo Design</label>
                        </div>
                        <div class="d-flex flex-wrap justify-content-center align-items-center me-4">
                            <input type="checkbox" name="others" class="form-check-input m-0 me-3" id="others" />
                            <label for="others"> Others </label>
                        </div>
                    </div>
                </div>
                <form class="row mb-3">
                    <div class="col-md-6 p-3">
                        <input required placeholder="first name" type="text" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="last name" type="text" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="E-mail" type="email" name="" id="" />
                    </div>
                    <div class="col-md-6 p-3">
                        <input required placeholder="phone" type="tel" name="" id="" />
                    </div>
                    <div class="col-md">
                        <textarea required name="" placeholder="write your message" id="" cols="30" rows="1"></textarea>
                    </div>
                    <div class="text-end mt-4">
                        <input class="btn px-4 py-3 btn-outline-dark" type="submit" value="Send Message" />
                    </div>
                </form>
            </div>
            <div class="col-lg-4 col-md-12 text-white aside px-4 py-5">
                <div class="mb-5">
                    <h1 class="h3">Contact Information</h1>
                    <p class="opacity-50">
                        <small>
                            Fill out the from and we will get back to you whitin 24 hours
                        </small>
                    </p>
                </div>
                <div class="d-flex flex-column px-0">
                    <ul class="m-0 p-0">
                        <li class="d-flex justify-content-start align-items-center mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fa fa-phone"></i>
                            </span>
                            <span>+134 1234 1234</span>
                        </link>
                        <li class="d-flex align-items-center r mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fas fa-mail-bulk"></i>
                            </span>
                            <span>Help@contact.com</span>
                        </li>
                        <li class="d-flex justify-content-start align-items-center mb-4">
                            <span class="opacity-50 d-flex align-items-center me-3 fs-2">
                                <i class="fa-solid fa-location-pin"></i>
                            </span>
                            <span>
                                52 Buddy Ln Conway, <br />
                                Arkansas(AR), 72032
                            </span>
                        </li>
                    </ul>
                    <div class="text-muted text-center">
                        <code>
                            Your Logo
                        </code>
                        <br />
                        <code>Created By : Company Name </code> <br />
                        <code>
                        </code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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