This write-up has HTML themes for get in touch with kind web pages. All these themes are receptive to fit any kind of viewports.
On a receptive web page, the website header food selection can be toggled. Theme 1 and also 2 of this instance has JavaScript feature to do the toggle occasions for a moving food selection in the mobile sight.
Call Type Layout 1
This theme has the get in touch with kind in the website footer. The footer includes 3 columns to reveal the get in touch with kind information.
If you are producing a get in touch with kind web page, it needs to plainly reveal the area and also the get in touch with information.
In this theme, the footer columns reveal these information with a get in touch with kind.
The website header includes food selection web links and also a burger symbol. The burger symbol can be seen in the mobile sight just.
The header dropdown food selection will certainly be revealed on clicking that symbol in the website banner.
template-1/ index.html
<< html>
>
.
<< head >
. < meta name=" viewport" web content=" size= device-width
<, initial-scale= 1" >
. < web link href=" https://phppot.com/php/contact-us-page/style.css">
stylesheet>
"
<>
. < body >
<. < div course=" container">
<>
< div course=" site-banner"
>
< div course=" header-menu" >
< a href="><" > Logo design
. < period>
id=" menu-icon">
onClick=" toggleMenu ()" > < img src=>
" images/menu<.
. < period id=">header-right-menu
<" >
.
<< a href=" #" > Our job
. < a href=>" #" > Regarding
.
<< a href=" #<" > Information
<< a href="><#" course=" header-active" > Call
.
<. < h1 course=" heading">
<> Call United States<
. < div course=">
< div course=">> < img course=" map-image" src=" images/location.
/
<>
. < div course=">
<>
< div course=">tile-content" >
< h1 > Meet United States
<.
<< div course=" contact-row">
<>
< img src=">> < period course=" tile-field" > +466723723666>
.
<< div course=" contact-row" >
< img src=">
images/at-sign.
< period course=">
contact@admin.com
.
<< div course=" contact-row">
<>
< img src=" images/map-pin. svg" > < period course=" tile-field" > 1784 Lion Road, Alabama
.
<
.
<.
. < div course=" footer-column contact-form-container" >
. < div course>
<=" tile-content
<" >
< kind approach=" MESSAGE" >
< h1 > Call>
<
.
<< div>
course=" contact-row" >
< input kind=>
"
message" course=">
form-field "placeholder =" Call" >
. < div course =" contact-row" >
< textarea rows=" 5"
course =" form-field" placeholder =" Message ">
. < switch course=" switch"
> Send out
.
.
.
.
.
.
<< manuscript>
>
.
This get in touch with theme reveals the get in touch with information, address
<, phone, and also e-mail.
This theme has 2 columns in the website material location. The get in touch with information and also the get in touch with kind are received these 2 columns, specifically. template-2/
<. < html >
. < head >
. < title > Call- Type
<. < meta name=" viewport" web content="
.
<< web link rel=" stylesheet
<" kind=" text/css<" href=">
<
. < body >
.
<< div>
course=" container" >
<< div>
course=" text-center" >
< h1 > Call United States
<. < div >
. Lorem ipsum dolor rest amet, et
dolore magra aliqua.
<
. Ut enim advertisement minim veniam.
.
.
<.
<< div>
course=" web content">
<>
>< div course= "col-1" >
< div course>
=
<" address-line
<" >
< img alt=" area">
"
< div course=" contact-info" >
< div course=" contact-info-title" > Address
< div > 1002 West fifth Ave,
.
< div > Alaska, New York City,
. < div > 55060.
.
.
. < div course =" address-line" >
< img alt=" area" src= "image/phone.
png" course=" symbol" >
< div course=" contact-info"
>
< div course=" contact-info-title" > Phone
< div > 12523-4566-8954-8956.
.
.
.
< div course=" address-line ">
< img alt=" area" src=" image/mail.
png" course=" symbol" >
< div course =" contact-info" >
< div course="
contact-info-title" > Email
contactemail@gmail.com
.
.
.
.
< div course=" col-2" >
< kind >
.
< div course=" form-container" >
< h2 > Send out Message
.
< div course=" form-row" >
< tag > Complete Name
.
< div >
.
< input kind=" message" course=" form-field" >
.
.
< div course=" form-row" >
< tag > Email
.
< div >
. < input kind=" message" course=" form-field ">
.
.
< div course="
form-row
" >
< tag > Kind your message ...
.
< div >
.
< input kind=
"
message" course=" form-field" >
.
.
< input kind =" switch" course=" send-btn" worth="
Send out"
>
.
.
.
.
.
.
.
(
*) See the listed below CSS and also include it in the theme
2
HTML.
template-2/ style.css(
*
) body {
. font-family: Arial
;
. background-image: link(
' image/bg.
png');
. background-size: cover;
.
background-position
: facility;
.
background-repeat: no-repeat;
.
background-attachment: repaired;
.}
.
.
.
container {
. size: 950px;
.
margin: 80px car;
.
shade: white
;
.
line-height: 1.5;
.
}
.
.
.
text-center {
. text-align: facility;
.
}
.
.
.
material {
.
display screen: flex;
.
margin-top: 40px;
.
}
.
. symbol {
. background-color:
white;
.
border-radius: 30px;
. extra padding: 15px;
. vertical-align: top;
.}
.
. contact-info {
. display screen: inline-block;
. extra padding: 4px 20px 0px 20px;
.}
.
. address-line {
. margin-top: 40px;
.}
.
. col-1 {
. size: 530px;
.}
.
. col-2 {
. flex: 1 1 car;
. background-color: white;
.
<}
<
.
. form-container {
. shade: # 000;
. extra padding: 30px;
.}
.
. contact-info-title {
. shade: # 01bdd4;
.}
<.
.
<. form-row {
<. padding-bottom: 30px;
.}
<.
.>form-field>
<{
. size: 100%;
. boundary: none;<
. border-bottom: 1px strong<# 000;
.}
<.
. send-btn {
<. boundary: 0px;
. extra padding:>
<12px 26px;
. background-color
<: # 01bdd4;
. shade: white;
.}
<
.
<
.
<@media all and also( max-width: 1024px) {
. container {
<. size: car;
. extra padding>: 30px;
.
<}
. col-1 {
. size: 360px;
.}
.
<}
<
.
. @media all and also
<( max-width: 700px) {
. material {
. display screen: block;
.
<}
<. col-2 {
. margin-top: 40px;
.}
. col-1 {
. size:100%;
.
<}
<.}
.
. @media all and also( max-width: 500px) {
.
{
<
. extra padding: 10px;
<
.}
.}
.
Call Type Layout 3
Layout 3 is a straightforward and also tidy motif for>
web page.
A basic get in touch with theme will certainly urge completion customer to get in touch with you and also
template-3/ index.html
< html >
<.
<
.
<< head >
. < meta name=">
<>
. < web link href=" https://phppot.com/php/contact-us-page/style.css" rel=" stylesheet" kind =" text/css" >
.
<
. < body >
<. < div course=" container"><>
< div course=" header-content">
<>
< a href="">
<> Logo design
< period id=" menu-icon"> < img src=" images/menu. svg"/ >
<.
<< period id=">
header-right-menu" >
< a
Providers
< a
Products
< a href=" #" > Rates
< a href=" #" course=" header-active" > Call United States
.
.
. < div course=" inner-container" >
< div course=
" tile1" >
< div course=" tile1-heading "> Contact us
.
< div course=
" form-row" > We are right here for you! Just how can we assist?
. < kind >
.
< div course=" form-row ">
< input kind=
" message" course=" form-field "placeholder =" Enter your name" >
.
.
< div course="form-row" >
< input kind="message" course="form-field" placeholder="Enter your e-mail address" >
.
.
< div course="form-row" >
< textarea course="form-field" placeholder="Go on we are paying attention ..." >
.
. < div course="form-row" >
< input kind="switch" course="form-field btn" worth="Send" >
.
.
.
< div course="tile2" >
< div course="tile2-image" >
< img src="images/contact. png" >
. < div >
.
< div course="form-row" >
< img src="images/loaction. png" course="contact-image" > < period > 564
Alabama Method
.
. < div course="form-row" >
< img src="images/phone.
png" course="contact-image" > < period > +466723723666
.
< div course="form-row" >
< img src="images/mail. png" course="contact-image" > contact@admin.com
.
.
.
.
.
. < manuscript >
. feature toggleMenu() {
.
var menuElement = document.getElementById(
"header-right-menu");
. if( menuElement.style.display = =="block") {
.
menuElement.style.display="none";
.
} else {
.
menuElement.style.display="block";
.
}
.
}
.
.
.
.
.
.
As well as the designs of this theme 3 are revealed listed below.
template-3/ style.css(* )body {
.
.
font-family: Arial
;
. background-image: link (' images/bg.
jpg');
. background-position: facility;
.
background-size: cover;
.
background-repeat: no-repeat;
.
background-attachment: repaired;
.
}
.
. container {
.
border-radius: 16px;
. max-width: 1180px;
. margin: 0 30px;
.}
.
.
{a
. shade: #ffffff;
. text-decoration: none;
.}
.
.
.
header-content {
.
font-weight:
strong;
.
size: 800px;
.
margin: 20px car;
.}
.
.
#header- right-menu
{
.
float: right
;
.}
.
. #header- right-menu {a
. extra padding: 12px;
.
}
.
.
.
header-active {
. shade: # 000;
.
}
.
. inner-container {
. size: 750px;
.
margin: 80px car;
.
display screen: flex;
. background-color: white;
.
border-radius:
12px;
.
extra padding: 30px
.
}
.
. tile1 {
. size: 350px;
.}
.
. tile2 {
.
flex: 1 1 car;
.
extra padding: 0px 40px;
.
}
.
. tile1-heading {
.
history:- webkit-linear-gradient( # 0aa6bd, #f 126bd);
.- webkit-background-clip: message;
.
-
webkit-text-fill-color: clear;
.
font-weight: strong;
.
font-size:
1.5 em;
.}
.
.
.
form-row {
.
extra padding: 20px 0px 0px 0px;
.}
.
. form-field {
. border-radius: 4px;
. size: 100 %;
.
extra padding: 15px;
.
background-color: #f 5f4fa;
.
boundary: 0px;
.
}
.
. contact-image {
. extra padding: 10px;
. border-radius: 35px;
.
boundary: 1px strong #a 8a4a4;
.
vertical-align: center;
. margin-right: 20px;
. size: 16px;
. elevation: 16px;
.}
.
. textarea {
. elevation: 100px;
. font-family: Arial;
.}
.
. btn {
. shade: white;
.
history: linear-gradient (to right, # 0aa6bd, #f 126bd);
.}
.
. tile2-image img {
. size: 321px;
. elevation: 211px;
.}
.
. #menu - symbol {
. display screen: none;
. float: right;
.}
.
. @media all and also (max-width: 900px) {
. inner-container {
. size: car;
. display screen: block;
. margin: 30px car;
.}
. header-content {
. size: car;
.}
. tile1 {
. size: 100 %;
.}
. tile2 {
. extra padding: 0px;
.}
. tile2-image img {
. size: 100 %;
. elevation: car;
.}
.}
.
. @media all and also (max-width: 540px) {
. #header - right-menu {
. float: none;
. display screen: none;
.}
. #header - right-menu {a
. display screen: block;
. extra padding: 10px 0px;
.}
.
. #menu - symbol {
. display screen: block;
. float: right;
.}
.}
.
. @media all and also (max-width: 400px) {
. container {
. extra padding: 10px;
.}
.}
.
Download And Install
↑ Back to Top
.
<. < html >
. < head >
. < title > Call- Type
<. < meta name=" viewport" web content="
<< web link rel=" stylesheet
<" kind=" text/css<" href=">
<
. < body >
.
<< div>
course=" container" >
<< div>
course=" text-center" >
< h1 > Call United States
<. < div >
. Lorem ipsum dolor rest amet,
<
. Ut enim advertisement minim veniam.
.
.
<.
<< div>
course=" web content">
<>
>< div course= "col-1" >
< div course>
=
<" address-line
<" >
< img alt=" area">
< div > Alaska, New York City,
. < div > 55060.
.
.
. < div course =" address-line" >
< img alt=" area" src= "image/phone.
png" course=" symbol" >
< div course=" contact-info"
>
< div course=" contact-info-title" > Phone
< div > 12523-4566-8954-8956.
.
.
.
< div course=" address-line ">
< img alt=" area" src=" image/mail.
png" course=" symbol" >
< div course =" contact-info" >
< div course="
contact-info-title" > Email
.
.
.
.
< div course=" col-2" >
< kind >
.
< div course=" form-container" >
< h2 > Send out Message
.
< div course=" form-row" >
< tag > Complete Name
.
< div >
.
< input kind=" message" course=" form-field" >
.
.
< div course=" form-row" >
< tag > Email
.
< div >
. < input kind=" message" course=" form-field ">
.
.
< div course="
form-row
" >
< tag > Kind your message ...
.
< div >
.
< input kind=
"
message" course=" form-field" >
.
.
< input kind =" switch" course=" send-btn" worth="
Send out"
>
.
.
.
.
.
.
.
(
*) See the listed below CSS and also include it in the theme
2
HTML.
template-2/ style.css(
*
) body {
. font-family: Arial
;
. background-image: link(
' image/bg.
png');
. background-size: cover;
.
background-position
: facility;
.
background-repeat: no-repeat;
.
background-attachment: repaired;
.}
.
.
.
container {
. size: 950px;
.
margin: 80px car;
.
shade: white
;
.
line-height: 1.5;
.
}
.
.
.
text-center {
. text-align: facility;
.
}
.
.
.
material {
.
display screen: flex;
.
margin-top: 40px;
.
}
.
. symbol {
. background-color:
white;
.
border-radius: 30px;
. extra padding: 15px;
. vertical-align: top;
.}
.
. contact-info {
. display screen: inline-block;
. extra padding: 4px 20px 0px 20px;
.}
.
. address-line {
. margin-top: 40px;
.}
.
. col-1 {
. size: 530px;
.}
.
. col-2 {
. flex: 1 1 car;
. background-color: white;
.
<}
<
.
. form-container {
. shade: # 000;
. extra padding: 30px;
.}
.
. contact-info-title {
. shade: # 01bdd4;
.}
<.
.
<. form-row {
<. padding-bottom: 30px;
.}
<.
.>form-field>
<{
. size: 100%;
. boundary: none;<
. border-bottom: 1px strong<# 000;
.}
<.
. send-btn {
<. boundary: 0px;
. extra padding:>
<12px 26px;
. background-color
<: # 01bdd4;
. shade: white;
.}
<
.
<
.
<@media all and also( max-width: 1024px) {
. container {
<. size: car;
. extra padding>: 30px;
.
<}
. col-1 {
. size: 360px;
.}
.
<}
<
.
. @media all and also
<( max-width: 700px) {
. material {
. display screen: block;
.
<}
<. col-2 {
. margin-top: 40px;
.}
. col-1 {
. size:100%;
.
<}
<.}
.
. @media all and also( max-width: 500px) {
.
<
. extra padding: 10px;
<
.}
.}
.
Call Type Layout 3
Layout 3 is a straightforward and also tidy motif for>
web page.
A basic get in touch with theme will certainly urge completion customer to get in touch with you and also template-3/ index.html template-3/ style.css(* )body {
. Download And Install ↑ Back to Top < html >
<.
<
.
<< head >
. < meta name=">
As well as the designs of this theme 3 are revealed listed below.
.
font-family: Arial
;
. background-image: link (' images/bg.
jpg');
. background-position: facility;
.
background-size: cover;
.
background-repeat: no-repeat;
.
background-attachment: repaired;
.
}
.
. container {
.
border-radius: 16px;
. max-width: 1180px;
. margin: 0 30px;
.}
.
.
{a
. shade: #ffffff;
. text-decoration: none;
.}
.
.
.
header-content {
.
font-weight:
strong;
.
size: 800px;
.
margin: 20px car;
.}
.
.
#header- right-menu
{
.
float: right
;
.}
.
. #header- right-menu {a
. extra padding: 12px;
.
}
.
.
.
header-active {
. shade: # 000;
.
}
.
. inner-container {
. size: 750px;
.
margin: 80px car;
.
display screen: flex;
. background-color: white;
.
border-radius:
12px;
.
extra padding: 30px
.
}
.
. tile1 {
. size: 350px;
.}
.
. tile2 {
.
flex: 1 1 car;
.
extra padding: 0px 40px;
.
}
.
. tile1-heading {
.
history:- webkit-linear-gradient( # 0aa6bd, #f 126bd);
.- webkit-background-clip: message;
.
-
webkit-text-fill-color: clear;
.
font-weight: strong;
.
font-size:
1.5 em;
.}
.
.
.
form-row {
.
extra padding: 20px 0px 0px 0px;
.}
.
. form-field {
. border-radius: 4px;
. size: 100 %;
.
extra padding: 15px;
.
background-color: #f 5f4fa;
.
boundary: 0px;
.
}
.
. contact-image {
. extra padding: 10px;
. border-radius: 35px;
.
boundary: 1px strong #a 8a4a4;
.
vertical-align: center;
. margin-right: 20px;
. size: 16px;
. elevation: 16px;
.}
.
. textarea {
. elevation: 100px;
. font-family: Arial;
.}
.
. btn {
. shade: white;
.
history: linear-gradient (to right, # 0aa6bd, #f 126bd);
.}
.
. tile2-image img {
. size: 321px;
. elevation: 211px;
.}
.
. #menu - symbol {
. display screen: none;
. float: right;
.}
.
. @media all and also (max-width: 900px) {
. inner-container {
. size: car;
. display screen: block;
. margin: 30px car;
.}
. header-content {
. size: car;
.}
. tile1 {
. size: 100 %;
.}
. tile2 {
. extra padding: 0px;
.}
. tile2-image img {
. size: 100 %;
. elevation: car;
.}
.}
.
. @media all and also (max-width: 540px) {
. #header - right-menu {
. float: none;
. display screen: none;
.}
. #header - right-menu {a
. display screen: block;
. extra padding: 10px 0px;
.}
.
. #menu - symbol {
. display screen: block;
. float: right;
.}
.}
.
. @media all and also (max-width: 400px) {
. container {
. extra padding: 10px;
.}
.}
. .
