DocsAllOver Responsive Contact Us Forms in Bootstrap 5 Snippets

Responsive Contact Us Forms in Bootstrap 5

Oct. 15, 2024

Bootstrap, Bootstrap 5, Form, Contact Us

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Responsive Bootstrap 5 Contact us forms</title>
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body>
    <div class="bg-contact100">
        <div class="container-contact100">
            <div class="wrap-contact100">
                <div class="contact100-pic js-tilt" data-tilt>
                    <img src="https://i.imgur.com/VRFiMzM.png" alt="IMG">
                </div>
                <form class="contact100-form validate-form">
                    <span class="contact100-form-title">
                        Get in touch
                    </span>
                    <div class="wrap-input100 validate-input" data-validate="Name is required">
                        <input class="input100" type="text" name="name" placeholder="Name">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <input class="input100" type="text" name="email" placeholder="Email">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>
                    <div class="wrap-input100 validate-input" data-validate="Message is required">
                        <textarea class="input100" name="message" placeholder="Message"></textarea>
                        <span class="focus-input100"></span>
                    </div>
                    <div class="container-contact100-form-btn">
                        <button class="contact100-form-btn">
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
    <script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'></script>
</body>

</html>

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    font-family: Montserrat-Regular, sans-serif;
}

a {
    font-family: Montserrat-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a:focus {
    outline: none !important;
}

a:hover {
    text-decoration: none;
    color: #57b846;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

p {
    font-family: Montserrat-Regular;
    font-size: 14px;
    line-height: 1.7;
    color: #666666;
    margin: 0px;
}

ul,
li {
    margin: 0px;
    list-style-type: none;
}

input {
    outline: none;
    border: none;
}

textarea {
    outline: none;
    border: none;
}

textarea:focus,
input:focus {
    border-color: transparent !important;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

input:focus:-ms-input-placeholder {
    color: transparent;
}

textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

textarea:focus:-moz-placeholder {
    color: transparent;
}

textarea:focus::-moz-placeholder {
    color: transparent;
}

textarea:focus:-ms-input-placeholder {
    color: transparent;
}

input::-webkit-input-placeholder {
    color: #aaaaaa;
}

input:-moz-placeholder {
    color: #aaaaaa;
}

input::-moz-placeholder {
    color: #aaaaaa;
}

input:-ms-input-placeholder {
    color: #aaaaaa;
}

textarea::-webkit-input-placeholder {
    color: #aaaaaa;
}

textarea:-moz-placeholder {
    color: #aaaaaa;
}

textarea::-moz-placeholder {
    color: #aaaaaa;
}

textarea:-ms-input-placeholder {
    color: #aaaaaa;
}

/*---------------------------------------------*/
button {
    outline: none !important;
    border: none;
    background: transparent;
}

button:hover {
    cursor: pointer;
}

iframe {
    border: none !important;
}



.bg-contact100 {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.container-contact100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background: rgba(132, 106, 221, 0.9);
}

.wrap-contact100 {
    width: 1163px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 110px 130px 157px 148px;
}

/*------------------------------------------------------------------
[  ]*/
.contact100-pic {
    width: 310px;
    padding-top: 55px;
}

.contact100-pic img {
    max-width: 100%;
}


.contact100-form {
    width: 390px;
}

.contact100-form-title {
    display: block;
    font-family: Montserrat-ExtraBold;
    font-size: 24px;
    color: #333333;
    line-height: 1.2;
    text-align: left;
    padding-bottom: 36px;
}

input.input100 {
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 50px;
}

input.input100[name="email"] {
    padding: 0 30px 0 54px;
}

textarea.input100 {
    min-height: 150px;
    border-radius: 25px;
    padding: 14px 30px;
}

.wrap-input100 {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
}

.input100 {
    display: block;
    width: 100%;
    background: #e6e6e6;
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
}


.focus-input100 {
    display: block;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 0px;
    color: rgba(132, 106, 221, 0.5);
}

.input100:focus+.focus-input100 {
    -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
    animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 60px 25px;
        opacity: 0;
    }
}

@keyframes anim-shadow {
    to {
        box-shadow: 0px 0px 60px 25px;
        opacity: 0;
    }
}

.symbol-input100 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 30px;
    pointer-events: none;
    color: #aaaaaa;
    font-size: 15px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.input100:focus+.focus-input100+.symbol-input100 {
    color: #846add;
    padding-left: 22px;
}

.container-contact100-form-btn {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
}

.contact100-form-btn {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #846add;
    font-family: Montserrat-Bold;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;

    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}

.contact100-form-btn:hover {
    background: #333333;
}


@media (max-width: 1200px) {
    .contact100-pic {
        width: 33.5%;
    }

    .contact100-form {
        width: 44%;
    }
}

@media (max-width: 992px) {
    .wrap-contact100 {
        padding: 110px 80px 157px 90px;
    }

    .contact100-pic {
        width: 35%;
    }

    .contact100-form {
        width: 55%;
    }
}

@media (max-width: 768px) {
    .wrap-contact100 {
        padding: 110px 80px 157px 80px;
    }

    .contact100-pic {
        display: none;
    }

    .contact100-form {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .wrap-contact100 {
        padding: 110px 15px 157px 15px;
    }
}



.validate-input {
    position: relative;
}

.alert-validate::before {
    content: attr(data-validate);
    position: absolute;
    max-width: 70%;
    background-color: white;
    border: 1px solid #c80000;
    border-radius: 13px;
    padding: 4px 25px 4px 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
    pointer-events: none;

    font-family: Montserrat-Medium;
    color: #c80000;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;

    visibility: hidden;
    opacity: 0;

    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    transition: opacity 0.4s;
}

.alert-validate::after {
    content: "\f06a";
    font-family: FontAwesome;
    display: block;
    position: absolute;
    color: #c80000;
    font-size: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 13px;
}

.alert-validate:hover:before {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .alert-validate::before {
        visibility: visible;
        opacity: 1;
    }
}

//Doesn't require any JS.

This Bootstrap 5 snippet provides a visually appealing and user-friendly contact form designed to facilitate communication with your website visitors. The form is fully customizable, allowing you to tailor its appearance and behavior to match your website's design.

Key Features:

Responsive Design: The contact form adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the form using Bootstrap's CSS classes to match your website's design and branding.
Clear Input Labels: The input fields are accompanied by clear and concise labels, guiding users in entering their information.
Validation: Implement basic form validation to ensure that users provide valid email addresses and messages before submitting the form.
Call-to-Action Button: Include a prominent call-to-action button to encourage users to submit their contact information.

Implementation:

Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the contact form, including the container, form fields, and submit button.
Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the contact form and its elements, such as form, form-group, input, textarea, btn, and any other relevant classes.
Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and behavior of the contact form according to your specific requirements.

Latest Snippets

View All