411 REFERENCE · Wikibooks
BTEC IT Unit 20 - Website Design/HTML/Contact us Form
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Contact Form (name, email and message)
<head>
<style>
* {
margin:0;
padding:0;
font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding:25px;
}
#contact-form h3 {
color:gray;
display:block;
font-size:28px;
}
#contact-form label span {
cursor:pointer;
color:black;
display:block;
margin:5px 0;
font-weight:900;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
width:100%;
box-shadow:inset 0 1px 2px #DDD, 0 1px 0 white;
border:1px solid #CCC;
background:white;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form textarea {
height:100px;
max-width:100%;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#991D57;
color:white;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form button[type="submit"]:hover {
background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
}
</style>
<script>
function sending() {
// Give alert when send is pressed
var a=document.getElementById('name').value;
var b=document.getElementById('email').value;
var c=document.getElementById('message').value;
var send = document.getElementById('contact-submit');
if(!a == "") {
if(!b == "") {
if(!c == "") {
alert("Sending: " + c);
}
}
}
}
</script>
</head>
<body>
<form id="contact-form">
<h3>Get in touch</h3>
<div>
<label>
<span>Name: (required)</span>
<input id="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input id="email" placeholder="Please enter your email address" type="email" tabindex="2" required>
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea id="message" placeholder="Include all the details you can" tabindex="5" required></textarea>
</label>
</div>
<div>
<button name="submit" type="submit" id="contact-submit" onclick="sending();">Send Email</button>
</div>
</form>
</body>