Home / / Web forms for businesses

Web forms for businesses

361 views 3 min , 46 sec read

Inquiry forms act as a bridge between you and your customers. However much keen you’re in making your product user-friendly, comprehensive, clear cut documentation along with the web site content that you make to describe your solutions. Still, we may miss minor particulars that the user might need. Being site owners, we know that through the types we get a considerable number of leads. Especially startups will receive a lot of queries from the website visitors, in that case, inquiry forms play an essential role. Here in this informative article, we have gathered the best free inquiry form template.

How to get a free HTML form template for business?

This template follows a split screen design to make sure you have enough space form fields and other information. On the right-hand side, you have the option to add image and your contact details. So if the user wants to reach you directly with a personalized message, these contact details will help them. To the left side, you have the form to collect basic contact details and the message. We have added sleek animation effects when the users click the contact form fields to give an interactive feel. You can also mark the required fields on the contact form. The message field is provided without any character restriction, so the user can add their messages in detail.

HTML:

<form class="contact100-form validate-form">
<span class="contact100-form-title">
Send Us A Message
</span>

<label class="label-input100" for="first-name">Tell us your name *</label>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Type first name">
<input id="first-name" class="input100" type="text" name="first-name" placeholder="First name">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 rs2-wrap-input100 validate-input" data-validate="Type last name">
<input class="input100" type="text" name="last-name" placeholder="Last name">
<span class="focus-input100"></span>
</div>

<label class="label-input100" for="email">Enter your email *</label>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<input id="email" class="input100" type="text" name="email" placeholder="Eg. example@email.com">
<span class="focus-input100"></span>
</div>

<label class="label-input100" for="phone">Enter phone number</label>
<div class="wrap-input100">
<input id="phone" class="input100" type="text" name="phone" placeholder="Eg. +1 800 000000">
<span class="focus-input100"></span>
</div>

<label class="label-input100" for="message">Message *</label>
<div class="wrap-input100 validate-input" data-validate = "Message is required">
<textarea id="message" class="input100" name="message" placeholder="Write us a message"></textarea>
<span class="focus-input100"></span>
</div>

<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
Send Message
</button>
</div>
</form>

CSS:

.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: #f2f2f2;

}

.wrap-contact100 {
width: 1120px;
background: #fff;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-direction: row-reverse;

}

/*==================================================================
[ Contact more ]*/
.contact100-more {
width: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
padding: 30px 15px 0px 15px;
}

.contact100-more::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

/*==================================================================
[ Form ]*/

.contact100-form {
width: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
padding: 56px 55px 63px 55px;
}

.contact100-form-title {
width: 100%;
display: block;
font-family: Poppins-Regular;
font-size: 30px;
color: #333333;
line-height: 1.2;
text-align: center;
padding-bottom: 33px;
}

/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
width: 100%;
position: relative;
border: 1px solid #e6e6e6;
}

.rs1-wrap-input100,
.rs2-wrap-input100 {
width: 50%;
}

.rs2-wrap-input100 {
border-left: none;
}

.label-input100 {
font-family: Poppins-Regular;
font-size: 12px;
color: #555555;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 1px;

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
width: 100%;
min-height: 55px;
border: 1px solid #e6e6e6;
border-bottom: none; 
padding: 10px 25px;
margin-top: 15px;
margin-bottom: 0;
}

.input100 {
display: block;
width: 100%;
background: transparent;
font-family: Poppins-Regular;
font-size: 18px;
color: #666666;
line-height: 1.2;
padding: 0 25px;
}

input.input100 {
height: 55px;
}


textarea.input100 {
min-height: 139px;
padding-top: 19px;
padding-bottom: 15px;
}

/*---------------------------------------------*/

.focus-input100 {
position: absolute;
display: block;
width: calc(100% + 2px);
height: calc(100% + 2px);
top: -1px;
left: -1px;
pointer-events: none;
border: 1px solid #00ad5f;

visibility: hidden;
opacity: 0;

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

-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}

.input100:focus + .focus-input100 {
visibility: visible;
opacity: 1;

-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

/*------------------------------------------------------------------
[ Button ]*/
.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: 23px;
}

.contact100-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 200px;
height: 50px;
border-radius: 2px;
background: #00ad5f;

font-family: Montserrat-Bold;
font-size: 12px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;

-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;
}

/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 992px) {
.contact100-form {
width: 60%;
padding: 56px 30px 63px 30px;
}

.contact100-more {
width: 40%;
}
}

@media (max-width: 768px) {
.contact100-form {
width: 100%;
}

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

@media (max-width: 576px) {
.contact100-form {
padding: 56px 15px 63px 15px;
}

.rs1-wrap-input100,
.rs2-wrap-input100 {
width: 100%;
}

.rs2-wrap-input100 {
border-left: 1px solid #e6e6e6;
border-top: none;
}
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
position: relative;
}

.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
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: 2px;
pointer-events: none;

font-family: Poppins-Regular;
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: "\f12a";
font-family: FontAwesome;
display: block;
position: absolute;
color: #c80000;
font-size: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 8px;
}

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

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

JavaScript:

(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');

$('.validate-form').on('submit',function(){
var check = true;

for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}

return check;
});


$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});

function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}

function showValidate(input) {
var thisAlert = $(input).parent();

$(thisAlert).addClass('alert-validate');
}

function hideValidate(input) {
var thisAlert = $(input).parent();

$(thisAlert).removeClass('alert-validate');
}


})(jQuery);

About Osiris Arriola

View all posts by Osiris Arriola →
Ready to get the most of your Web Forms?
Check Out MailThisTo