HTML5 Contact Form

Developer
Ghost Rider
Size
2,336 Kb
Views
70,840
  1. HTML5 Contact Form Previews
  2. HTML5 Contact Form HTML Codes
  3. HTML5 Contact Form CSS Codes

How do I make an html5 contact form?

Simple but professional HTML5 & CSS3 coded contact form.clean and fresh modern design HTML5 contact form which make your website outstanding.. What is a html5 contact form? How do you make a html5 contact form? This script and codes were developed by Ghost Rider on 23 July 2022, Saturday.

HTML5 Contact Form Previews
IQ Test

HTML5 Contact Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Contact Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<header class="ccheader"> <h1>HTML5 Contact Form</h1>
</header>
<div class="wrapper"> <form method="post" action="" class="ccform"> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-user fa-2x"></i></span> <input class="ccformfield" type="text" placeholder="Full Name" required> </div> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-envelope fa-2x"></i></span> <input class="ccformfield" type="text" placeholder="Email" required> </div> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-mobile-phone fa-2x"></i></span> <input class="ccformfield" type="text" placeholder="Phone"> </div> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-info fa-2x"></i></span> <input class="ccformfield" type="text" placeholder="Subject" required> </div> <div class="ccfield-prepend"> <span class="ccform-addon"><i class="fa fa-comment fa-2x"></i></span> <textarea class="ccformfield" name="comments" rows="8" placeholder="Message" required></textarea> </div> <div class="ccfield-prepend"> <input class="ccbtn" type="submit" value="Submit"> </div> </form>
</div>
<div class="credit">
<em>Credit</em><a href="http://codeconvey.com/2014/02/22/creating-simple-html5-contact-form/" target="_blank">HTML5 Contact Form - Codevonvey.com</a>
</div>
</body>
</html>

HTML5 Contact Form - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {	background: #f29107;	color: #fff;	font-weight: 400;	font-size: 1em;	font-family: 'Lato', Arial, sans-serif;	margin:0;	padding:0;	padding-bottom:60px;
}
.ccheader {	margin: 0 auto;	padding: 2em;	text-align: center;
}
.ccheader h1 {	margin: 0;	font-weight: 300;	font-size: 2.5em;	line-height: 1.3;
}
.ccheader {	margin: 0 auto;	padding: 2em;	text-align: center;
}
.ccheader h1 {	margin: 0;	font-weight: 300;	font-size: 2.5em;	line-height: 1.3;
}
/* Form CSS*/
.ccform { margin: 0 auto; width: 80%;
}
.ccfield-prepend{	margin-bottom:10px;	width:100%;
}
.ccform-addon{	color:#f8ae45;	float:left;	padding:8px;	width:8%;	background:#FFFFFF;	text-align:center;
}
.ccformfield {	color:#000000;	background:#FFFFFF;	border:none;	padding:15.5px;	width:91.9%;	display:block;	font-family: 'Lato',Arial,sans-serif;	font-size:14px;
}
.ccformfield {	font-family: 'Lato',Arial,sans-serif;
}
.ccbtn{	display:block;	border:none;	background:#f8ae45;	float:right;	color:#FFFFFF;	padding:10px;	cursor:pointer;	text-decoration:none;	font-weight:bold;
}
.ccbtn:hover{	background:#d8850e;
}
.credit {
float: left;
margin: 25px;
text-align: center;
}
.credit em{
margin-right:5px;
}
.credit a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
HTML5 Contact Form - Script Codes
HTML5 Contact Form - Script Codes
Home Page Home
Developer Ghost Rider
Username GhostRider
Uploaded July 23, 2022
Rating 3
Size 2,336 Kb
Views 70,840
Do you need developer help for HTML5 Contact Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ghost Rider (GhostRider) Script Codes
Name
Shaking css animation
A Pen by Ghost Rider
CSS Brainbow Menu
Iphone game
Sudoko Solver
CSS Img Slider2
JQuery parallax
3d clouds
CSS and SVG Pyramid
Under construction
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!