Best Free Contact Form Template | Form Snippet

Download our free, stylish, and responsive contact form template. Built with Bootstrap and HTML, this form snippet is perfect for enhancing your website’s user experience. Easy to customize and integrate for any web project.

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 body {
     font-family: "Nunito", sans-serif;
}
 .fw_form_5 {
     text-align: left;
     padding: 50px 0;
     background-color: #efefef;
     color: #000;
}
 .fw_form_5 .heading h2 {
     text-transform: capitalize;
     font-weight: 700;
     margin-bottom: 30px;
     font-size: 1.5rem;
}
 .fw_form_5 form input {
     border-radius: 0px;
     box-shadow: none;
     padding: 10px 0px;
     height: auto;
     color: #000;
     background-color: transparent;
     border-width: 0;
     border-bottom-width: 1px;
}
 .fw_form_5 form input::placeholder, .fw_form_5 form textarea::placeholder {
     color: #333;
     text-transform: capitalize;
     opacity: .7;
}
 .fw_form_5 form textarea {
     border-radius: 0px;
     box-shadow: none;
     color: #333;
     background-color: transparent;
     border-width: 0;
     border-bottom-width: 1px;
     padding: 0;
}
 .fw_form_5 form input:focus, .fw_form_5 form textarea:focus {
     box-shadow: none;
     background-color: transparent;
     color: #333;
}
 .fw_form_5 form{
     background: #fff;
     height: 100%;
     padding: 40px;
}
 .fw_form_5 form .btn {
     border-radius: 0px;
     padding: 10px 25px;
     color: #fff;
     font-weight: 600;
}
 .fw_form_5 .content p{
     color: #333;
     margin-bottom: 20px;
}
 .fw_form_5 .content > a{
     margin-bottom: 5px;
}
 .fw_form_5 .content a{
     color: #b2b2b2;
     text-decoration: none;
     text-transform: capitalize;
     transition: all .4s;
}
 .fw_form_5 .content a:hover{
     color: #fff;
}
 .fw_form_5 .content h3{
     color: #dc3545;
     margin-bottom: 10px;
     font-size: 22px;
     margin-top: 20px;
     font-weight: 700;
}
 .fw_form_5 .content ul{
     padding: 0;
     margin: 0;
     list-style: none;
}
 .fw_form_5 .content ul li{
     display: inline-block;
     margin-right: 15px;
}
 .fw_form_5 .map iframe{
     filter: grayscale(95%) invert(95%) contrast(90%);
}
 .fw_form_5 .left_content {
     padding: 40px;
     background: #0bb7da;
     color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
}
 .fw_form_5 .left_content h2{
     text-transform: capitalize;
     font-weight: 700;
     margin-bottom: 15px;
     font-size: 1.7rem;
}
 .fw_form_5 .left_content p:last-child{
     margin-bottom: 0;
}
 @media (max-width: 767.9px){
     .fw_form_5 form{
         margin-bottom: 50px;
    }
}
 @media (max-width: 576px){
     .fw_form_5 .left_content{
         padding: 30px 10px;
    }
     .fw_form_5 form{
         padding: 40px 20px;
    }
}

JS

Width:

Height:

Elevate your website with our Free Responsive Contact Form Template! This stylish Bootstrap HTML form is crafted to enhance user interaction while providing a modern look. Designed with a sleek layout and vibrant color schemes, it includes a side section for engaging content and a functional contact form.

Key Features:

▹ Responsive Design: Adapts perfectly to all device screens, ensuring a seamless experience for all users.

▹ Bootstrap Integration: Utilizes Bootstrap for a contemporary and flexible design that's easy to customize.

▹User-Friendly Layout: Features a two-column layout with a dedicated content area and a clean, functional contact form.

▹Customization Ready: Simple to adapt and integrate into your existing website with easy-to-edit code.

Ideal for websites looking to boost user engagement and streamline communication, this contact form snippet is an essential tool for developers and site owners alike. Download now to give your website a polished and professional touch!