by Vincy. Final modified on March twenty seventh, 2023.
This text has HTML templates for contact type pages. All these templates are responsive to suit any viewports.
On a responsive web page, the positioning header menu might be toggled. Template 1 and a couple of of this instance has JavaScript operate to carry out the toggle occasions for a sliding menu within the cellular view.
Contact Kind Template 1
This template has the contact type within the website footer. The footer incorporates three columns to indicate the contact type particulars.
If you’re making a contact type web page, it ought to clearly present the placement and the contact particulars.
On this template, the footer columns present these particulars with a contact type.
The positioning header incorporates menu hyperlinks and a hamburger icon. The hamburger icon might be seen within the cellular view solely.
The header dropdown menu might be proven on clicking that icon within the website banner.
template-1/index.html
<html>
<head>
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<hyperlink href="https://phppot.com/php/contact-us-page/model.css" rel="stylesheet" sort="textual content/css">
</head>
<physique>
<div class="container">
<div class="site-banner">
<div class="header-menu">
<a href="">Emblem</a>
<span id="menu-icon" onClick="toggleMenu()"><img src="photos/menu.svg" /></span>
<span id="header-right-menu">
<a href="#">Our work</a>
<a href="#">About</a>
<a href="#">Information</a>
<a href="#" class="header-active">Contact</a>
</span>
</div>
<h1 class="heading">Contact Us</h1>
</div><div class="footer">
<div class="footer-column"><img class="map-image" src="photos/location.jpg" /></div>
<div class="footer-column">
<div class="tile-content">
<h1>Meet Us</h1>
<div class="contact-row">
<img src="photos/telephone.svg"><span class="tile-field">+466723723666</span>
</div>
<div class="contact-row">
<img src="photos/at-sign.svg"><span class="tile-field">contact@admin.com</span>
</div>
<div class="contact-row">
<img src="photos/map-pin.svg"><span class="tile-field">1784 Griffin Road, Alabama</span>
</div>
</div>
</div>
<div class="footer-column contact-form-container">
<div class="tile-content">
<type methodology="POST">
<h1>Contact</h1>
<div class="contact-row">
<enter sort="textual content" class="form-field" placeholder="Identify">
</div>
<div class="contact-row">
<textarea rows="5" class="form-field" placeholder="Message"></textarea>
</div>
<button class="button">Ship</button>
</type>
</div>
</div>
</div>
</div>
<script>
operate toggleMenu() {
var menuElement = doc.getElementById("header-right-menu");
if (menuElement.model.show === "block") {
menuElement.model.show = "none";
} else {
menuElement.model.show = "block";
}
}
</script>
</physique>
</html>
The beneath CSS is created for this contact type template. It incorporates media queries for the responsiveness of the contact type web page.
template-1/model.css
physique {
font-family: Arial;
}
.container {
max-width: 1180px;
margin: 0 auto;
line-height: 1.5;
}
/* header model begins */
.site-banner {
min-height: 400px;
background-image: url('photos/header-image.jpg');
background-size: cowl;
background-position: middle;
shade: #ffffff;
}
.site-banner a {
shade: #ffffff;
text-decoration: none;
font-weight: daring;
padding: 12px;
}
.header-menu {
padding: 40px 20px;
}
#header-right-menu {
float: proper;
}
.header-active {
background: rgba(0, 0, 0, 0.5);
border-radius: 25px;
}
.heading {
shade: #ffffff;
text-align: middle;
font-family: cursive;
padding: 40px 0px;
font-size: 3em;
margin: 0px;
}
/* header model ends */
.footer {
show: flex;
}
.footer-column {
width: 33.3%;
float: left;
}
.map-image {
width: 100%;
}
.contact-form-container {
background-color: #eaeaea;
}
img {
vertical-align: center;
}
.tile-content {
padding: 20px 40px;
}
.tile-content .contact-row {
margin-bottom: 20px;
}
.tile-field {
margin-left: 20px;
}
.form-field {
width: 100%;
padding: 10px 8px;
border-radius: 4px;
border: #d9d8d8 1px stable;
}
.button {
shade: #ffffff;
padding: 10px 30px 10px 30px;
border-radius: 20px;
background: linear-gradient(to proper, #08a9df, #12054a);
border: 0px;
}
#menu-icon {
show: none;
float: proper;
}
@media display screen and (max-width: 1000px) {
.footer-column {
width: 50%;
}
.contact-form-container {
width: 100%;
}
.footer {
show: block;
}
}
@media display screen and (max-width: 540px) {
#header-right-menu {
float: none;
show: none;
}
#header-right-menu a {
show: block;
}
.heading {
padding: 0px;
}
.tile-content {
padding: 0px 20px;
}
.footer-column {
width: 100%;
}
#menu-icon {
show: block;
float: proper;
}
}
Contact Kind Template 2
This contact template reveals the contact particulars, handle, telephone, and e mail. It presents a type with main fields to let the person talk with the positioning proprietor.
This template has two columns within the website content material space. The contact particulars and the contact type are proven in these two columns, respectively.
template-2/index.html
<!DOCTYPE html>
<html>
<head>
<title>Contact - Kind</title>
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<hyperlink rel="stylesheet" sort="textual content/css" href="https://phppot.com/php/contact-us-page/model.css">
</head>
<physique>
<div class="container">
<div class="text-center">
<h1>Contact Us</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore <div>et dolore magra aliqua.
Ut enim advert minim veniam.</div>
</div>
</div>
<div class="content material">
<div class="col-1">
<div class="address-line">
<img alt="location" src="picture/marker.png" class="icon">
<div class="contact-info">
<div class="contact-info-title">Handle</div>
<div>1002 West fifth Ave,</div>
<div>Alaska, New York,</div>
<div>55060.</div>
</div>
</div>
<div class="address-line">
<img alt="location" src="picture/telephone.png" class="icon">
<div class="contact-info">
<div class="contact-info-title">Cellphone</div>
<div>12523-4566-8954-8956.</div>
</div>
</div>
<div class="address-line">
<img alt="location" src="picture/mail.png" class="icon">
<div class="contact-info">
<div class="contact-info-title">E-mail</div>
<div>contactemail@gmail.com</div>
</div>
</div>
</div>
<div class="col-2">
<type>
<div class="form-container">
<h2>Ship Message</h2>
<div class="form-row">
<label>Full Identify</label>
<div>
<enter sort="textual content" class="form-field">
</div>
</div>
<div class="form-row">
<label>E-mail</label>
<div>
<enter sort="textual content" class="form-field">
</div>
</div>
<div class="form-row">
<label>Sort your message...</label>
<div>
<enter sort="textual content" class="form-field">
</div>
</div>
<enter sort="button" class="send-btn" worth="Ship">
</div>
</type>
</div>
</div>
</div>
</physique>
</html>
See the beneath CSS and embody it within the template 2 HTML.
template-2/model.css
physique {
font-family: Arial;
background-image: url('picture/bg.jpg');
background-size: cowl;
background-position: middle;
background-repeat: no-repeat;
background-attachment: mounted;
}
.container {
width: 950px;
margin: 80px auto;
shade: white;
line-height: 1.5;
}
.text-center {
text-align: middle;
}
.content material {
show: flex;
margin-top: 40px;
}
.icon {
background-color: white;
border-radius: 30px;
padding: 15px;
vertical-align: high;
}
.contact-info {
show: inline-block;
padding: 4px 20px 0px 20px;
}
.address-line {
margin-top: 40px;
}
.col-1 {
width: 530px;
}
.col-2 {
flex: 1 1 auto;
background-color: white;
}
.form-container {
shade: #000;
padding: 30px;
}
.contact-info-title {
shade: #01bdd4;
}
.form-row {
padding-bottom: 30px;
}
.form-field {
width: 100%;
border: none;
border-bottom: 1px stable #000;
}
.send-btn {
border: 0px;
padding: 12px 26px;
background-color: #01bdd4;
shade: white;
}
@media all and (max-width: 1024px) {
.container {
width: auto;
padding: 30px;
}
.col-1 {
width: 360px;
}
}
@media all and (max-width: 700px) {
.content material {
show: block;
}
.col-2 {
margin-top: 40px;
}
.col-1{
width:100%;
}
}
@media all and (max-width: 500px) {
.container {
padding: 10px;
}
}
Contact Kind Template 3
Template 3 is an easy and clear theme for a contact type web page. It shows a contact type with a number of main fields. Additionally, it reveals solely the important contact particulars on the web page.
A easy contact template will encourage the top person to attach with you and enhance the conversion price.
template-3/index.html
<html>
<head>
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<hyperlink href="https://phppot.com/php/contact-us-page/model.css" rel="stylesheet" sort="textual content/css">
</head>
<physique>
<div class="container">
<div class="header-content">
<a href="">Emblem</a>
<span id="menu-icon" onClick="toggleMenu()"><img src="photos/menu.svg" /></span>
<span id="header-right-menu">
<a href="#">Companies</a>
<a href="#">Merchandise</a>
<a href="#">Pricing</a>
<a href="#" class="header-active">Contact Us</a>
</span>
</div>
<div class="inner-container">
<div class="tile1">
<div class="tile1-heading">Get in contact</div>
<div class="form-row">We're right here for you! How can we assist?</div>
<type>
<div class="form-row">
<enter sort="textual content" class="form-field" placeholder="Enter your identify">
</div>
<div class="form-row">
<enter sort="textual content" class="form-field" placeholder="Enter your e mail handle">
</div>
<div class="form-row">
<textarea class="form-field" placeholder="Go forward we're listening..."></textarea>
</div>
<div class="form-row">
<enter sort="button" class="form-field btn" worth="Submit">
</div>
</type>
</div>
<div class="tile2">
<div class="tile2-image">
<img src="photos/contact.png">
</div>
<div>
<div class="form-row">
<img src="photos/loaction.png" class="contact-image"><span>564
Alabama Avenue</span>
</div>
<div class="form-row">
<img src="photos/telephone.png" class="contact-image"><span>+466723723666</span>
</div>
<div class="form-row">
<img src="photos/mail.png" class="contact-image"><span>contact@admin.com</span>
</div>
</div>
</div>
</div>
</div>
<script>
operate toggleMenu() {
var menuElement = doc.getElementById("header-right-menu");
if (menuElement.model.show === "block") {
menuElement.model.show = "none";
} else {
menuElement.model.show = "block";
}
}
</script>
</physique>
</html>
And the kinds of this template three are proven beneath.
template-3/model.css
physique {
font-family: Arial;
background-image: url('photos/bg.jpg');
background-position: middle;
background-size: cowl;
background-repeat: no-repeat;
background-attachment: mounted;
}
.container {
border-radius: 16px;
max-width: 1180px;
margin: 0 30px;
}
a {
shade: #ffffff;
text-decoration: none;
}
.header-content {
font-weight: daring;
width: 800px;
margin: 20px auto;
}
#header-right-menu {
float: proper;
}
#header-right-menu a {
padding: 12px;
}
.header-active{
shade:#000;
}
.inner-container {
width: 750px;
margin: 80px auto;
show: flex;
background-color: white;
border-radius: 12px;
padding: 30px
}
.tile1 {
width: 350px;
}
.tile2 {
flex: 1 1 auto;
padding: 0px 40px;
}
.tile1-heading {
background: -webkit-linear-gradient(#0aa6bd, #f126bd);
-webkit-background-clip: textual content;
-webkit-text-fill-color: clear;
font-weight: daring;
font-size: 1.5em;
}
.form-row {
padding: 20px 0px 0px 0px;
}
.form-field {
border-radius: 4px;
width: 100%;
padding: 15px;
background-color: #f5f4fa;
border: 0px;
}
.contact-image {
padding: 10px;
border-radius: 35px;
border: 1px stable #a8a4a4;
vertical-align: center;
margin-right: 20px;
width: 16px;
top: 16px;
}
textarea {
top: 100px;
font-family: Arial;
}
.btn {
shade: white;
background: linear-gradient(to proper, #0aa6bd, #f126bd);
}
.tile2-image img {
width: 321px;
top: 211px;
}
#menu-icon {
show: none;
float: proper;
}
@media all and (max-width: 900px) {
.inner-container {
width: auto;
show: block;
margin: 30px auto;
}
.header-content {
width: auto;
}
.tile1 {
width: 100%;
}
.tile2 {
padding: 0px;
}
.tile2-image img {
width: 100%;
top: auto;
}
}
@media all and (max-width: 540px) {
#header-right-menu {
float: none;
show: none;
}
#header-right-menu a {
show: block;
padding: 10px 0px;
}
#menu-icon {
show: block;
float: proper;
}
}
@media all and (max-width: 400px) {
.container {
padding: 10px;
}
}
