Jump to content

BTEC IT Unit 20 - Website Design/HTML/Contact us Form

From Wikibooks, open books for an open world

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>