added contact form

cloudify-cosmo · Oct 22, 2012 · 0d91ad6 · 0d91ad6
1 parent 1bb6f3a
commit 0d91ad6
Show file tree

Hide file tree

Showing 5 changed files with 202 additions and 0 deletions.
diff --git a/contact-form/css/screen.css b/contact-form/css/screen.css
@@ -0,0 +1,44 @@
+/*
+By Joe Pettersson @ http://www.joepettersson.com/accessible-php-and-jquery-contact-form/
+Based on a design by Orman Clark @ http://www.premiumpixels.com/clean-simple-signup-form-psd/
+*/
+
+/***** Global Elements *****/
+html, body { border:0; margin:0; padding:0; }
+body { font:12px Arial, Helvetica, sans-serif; background: url(../img/page-background.png) repeat; }
+
+img { border:0;}
+a img { border:0 }
+
+a, a:link, a:visited { text-decoration:underline;}
+a:hover {text-decoration: none;}
+
+/***** Demo Elements} *****/
+#back {display: block; margin: 15px 0px; color: #005555; font-size: 11px;}
+
+/***** Contact Form Elements *****/
+.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
+.clear { display: inline-block; }
+html[xmlns] .clear { display: block;}
+* html .clear { height: 1%;}
+.wrapper { width:300px; margin:0 auto; padding: 50px 0px;}
+
+#contactWrapper { width:300px; border:1px solid #cfdede; background:#fdfdfd; padding:30px; }
+#contactWrapper h1 { font-size: 11px; margin: -33px 0px 30px; padding: 5px 0px 0px 15px; font-size: 12px; text-transform: uppercase; background: url(../img/title-background.png) no-repeat; width: 138px; height: 22px; color: #fff; font-weight: bold;}
+#contactWrapper label { display:block; float:none; font-size:12px; width:auto; font-weight: bold; margin-bottom: 7px; color: #333333;}
+#contactWrapper label.error { display:block; float:none; font-size:12px; width:auto; font-weight: normal; margin-bottom: 0px; color: #bb3737; background: #fad6d6; border: 1px solid #bb3737; margin-top: 5px; padding: 5px 7px;}
+#contactWrapper label.checked { display:none; background: none; border: 0px; margin-top: 0px; padding: 0px; text-indent: -5000px;}
+#contactWrapper em { color: #01b3b3;}
+#contactWrapper .stage { margin-bottom: 20px;}
+#contactWrapper .requiredNote { margin: 20px 0px 20px; color: #333; font-weight: bold;}
+#contactWrapper .success { padding: 10px; background: #f0ffc1; border: 1px solid #819934; margin-bottom: 15px; color: #819934;}
+#contactWrapper .success p { margin: 0px;}
+
+form#contactform input, form#contactform textarea { border: 1px solid #cfdede; padding:8px 12px; font-size:12px; color:#333; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; width: 274px; background: url(../img/page-background.png) repeat; color: #777777;}
+form#contactform textarea {font:12px Arial, Helvetica, sans-serif; padding: 12px;}
+form#contactform input:focus, form#contactform textarea:focus { outline: none; border: 1px solid #649d9d;}
+
+#submitButton {display: block;text-indent: -5000px;width: 300px!important;height: 47px;background-image:url(../img/send-button-sprite.png)!important;background-repeat: no-repeat;border: 0px!important;padding: 0px!important;}
+#submitButton {background-position: 0 0;}
+#submitButton:hover {background-position: 0 -47px;}
+#submitButton:active {background-position: 0 -47px;}
diff --git a/contact-form/img/page-background.png b/contact-form/img/page-background.png
diff --git a/contact-form/img/send-button-sprite.png b/contact-form/img/send-button-sprite.png
diff --git a/contact-form/img/title-background.png b/contact-form/img/title-background.png
diff --git a/contact-form/index.php b/contact-form/index.php
@@ -0,0 +1,158 @@
+<?php
+//If the form is submitted
+if(isset($_POST['submit'])) {
+
+	//Check to make sure that the name field is not empty
+	if(trim($_POST['contactname']) == '') {
+		$hasError = true;
+	} else {
+		$name = trim($_POST['contactname']);
+	}
+
+	//Check to make sure that the subject field is not empty
+	if(trim($_POST['subject']) == '') {
+		$hasError = true;
+	} else {
+		$subject = trim($_POST['subject']);
+	}
+
+	//Check to make sure sure that a valid email address is submitted
+	if(trim($_POST['email']) == '')  {
+		$hasError = true;
+	} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
+		$hasError = true;
+	} else {
+		$email = trim($_POST['email']);
+	}
+
+	//Check to make sure comments were entered
+	if(trim($_POST['message']) == '') {
+		$hasError = true;
+	} else {
+		if(function_exists('stripslashes')) {
+			$comments = stripslashes(trim($_POST['message']));
+		} else {
+			$comments = trim($_POST['message']);
+		}
+	}
+
+	//If there is no error, send the email
+	if(!isset($hasError)) {
+		$emailTo = 'your@emailaddress.com'; //Put your own email address here
+		$body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
+		$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
+
+		mail($emailTo, $subject, $body, $headers);
+		$emailSent = true;
+	}
+}
+?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+<title>Accessible PHP Contact Form with JQuery Validation</title>
+
+<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
+<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js" type="text/javascript"></script>
+<script type="text/javascript">
+$(document).ready(function(){
+	// validate signup form on keyup and submit
+	var validator = $("#contactform").validate({
+		rules: {
+			contactname: {
+				required: true,
+				minlength: 2
+			},
+			email: {
+				required: true,
+				email: true
+			},
+			subject: {
+				required: true,
+				minlength: 2
+			},
+			message: {
+				required: true,
+				minlength: 10
+			}
+		},
+		messages: {
+			contactname: {
+				required: "Please enter your name",
+				minlength: jQuery.format("Your name needs to be at least {0} characters")
+			},
+			email: {
+				required: "Please enter a valid email address",
+				minlength: "Please enter a valid email address"
+			},
+			subject: {
+				required: "You need to enter a subject!",
+				minlength: jQuery.format("Enter at least {0} characters")
+			},
+			message: {
+				required: "You need to enter a message!",
+				minlength: jQuery.format("Enter at least {0} characters")
+			}
+		},
+		// set this class to error-labels to indicate valid fields
+		success: function(label) {
+			label.addClass("checked");
+		}
+	});
+});
+</script>
+</head>
+
+<body>
+<div class="wrapper">
+	<div id="contactWrapper" role="form">
+
+		<h1 role="heading">Send us a message</h1>
+
+		<?php if(isset($hasError)) { //If errors are found ?>
+			<p class="error">Please check if you've filled all the fields with valid information and try again. Thank you.</p>
+		<?php } ?>
+
+		<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
+			<div class="success">
+				<p><strong>Email Successfully Sent!</strong></p>
+				<p>Thank you for using our contact form <strong><?php echo $name;?></strong>! Your email was successfully sent and we 'll be in touch with you soon.</p>
+			</div>
+		<?php } ?>
+
+		<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
+			<div class="stage clear">
+				<label for="name"><strong>Name: <em>*</em></strong></label>
+				<input type="text" name="contactname" id="contactname" value="" class="required" role="input" aria-required="true" />
+			</div>
+
+			<div class="stage clear">
+				<label for="email"><strong>Email: <em>*</em></strong></label>
+				<input type="text" name="email" id="email" value="" class="required email" role="input" aria-required="true" />
+			</div>
+
+			<div class="stage clear">
+				<label for="subject"><strong>Subject: <em>*</em></strong></label>
+				<input type="text" name="subject" id="subject" value="" class="required" role="input" aria-required="true" />
+			</div>
+
+			<div class="stage clear">
+				<label for="message"><strong>Message: <em>*</em></strong></label>
+				<textarea rows="8" name="message" id="message" class="required" role="textbox" aria-required="true"></textarea>
+			</div>
+
+			<p class="requiredNote"><em>*</em> Denotes a required field.</p>
+
+			<input type="submit" value="Send Message" name="submit" id="submitButton" title="Click here to submit your message!" />
+		</form>
+
+	</div>
+
+	<a href="http://www.joepettersson.com/accessible-php-and-jquery-contact-form/" id="back">By Joe Pettersson.com</a>
+</div>
+</body>
+</html>