php/html5 cross browser contact form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php session_start(); ?> | |
<!doctype html> | |
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> | |
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> | |
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> | |
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> | |
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
<title>Pixel-ate:Contact</title> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<link rel="shortcut icon" href="/favicon.ico"> | |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css"> | |
<script src="js/libs/modernizr-1.7.min.js"></script> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="contact-form" class="clearfix"> | |
<h1>Get In Touch!</h1> | |
<h2>Fill out our super swanky HTML5 contact form below to get in touch with us! Please provide as much information as possible for us to help you with your enquiry :)</h2> | |
<?php | |
//init variables | |
$cf = array(); | |
$sr = false; | |
if(isset($_SESSION['cf_returndata'])){ | |
$cf = $_SESSION['cf_returndata']; | |
$sr = true; | |
} | |
?> | |
<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>"> | |
<li id="info">There were some problems with your form submission:</li> | |
<?php | |
if(isset($cf['errors']) && count($cf['errors']) > 0) : | |
foreach($cf['errors'] as $error) : | |
?> | |
<li><?php echo $error ?></li> | |
<?php | |
endforeach; | |
endif; | |
?> | |
</ul> | |
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p> | |
<form method="post" action="process.php"> | |
<label for="name">Name: <span class="required">*</span></label> | |
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus /> | |
<label for="email">Email Address: <span class="required">*</span></label> | |
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe@example.com" required /> | |
<label for="telephone">Telephone: </label> | |
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" /> | |
<label for="enquiry">Enquiry: </label> | |
<select id="enquiry" name="enquiry"> | |
<option value="General" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'General') ? "selected='selected'" : '' ?>>General</option> | |
<option value="NewProject" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'NewProject') ? "selected='selected'" : '' ?>>New Project</option> | |
<option value="Support" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['enquiry'] == 'Support') ? "selected='selected'" : '' ?>>Support</option> | |
</select> | |
<label for="message">Message: <span class="required">*</span></label> | |
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea> | |
<span id="loading"></span> | |
<input type="submit" value="Holla!" id="submit-button" /> | |
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p> | |
</form> | |
<?php unset($_SESSION['cf_returndata']); ?> | |
</div> | |
</div> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> | |
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script> | |
<script src="js/plugins.js"></script> | |
<script src="js/script.js"></script> | |
<!--[if lt IE 7 ]> | |
<script src="js/libs/dd_belatedpng.js"></script> | |
<script> DD_belatedPNG.fix('img, .png_bg');</script> | |
<![endif]--> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
if( isset($_POST) ){ | |
//form validation vars | |
$formok = true; | |
$errors = array(); | |
//submission data | |
$ipaddress = $_SERVER['REMOTE_ADDR']; | |
$date = date('d/m/Y'); | |
$time = date('H:i:s'); | |
//form data | |
$name = $_POST['name']; | |
$email = $_POST['email']; | |
$telephone = $_POST['telephone']; | |
$enquiry = $_POST['enquiry']; | |
$message = $_POST['message']; | |
//validate form data | |
//validate name is not empty | |
if(empty($name)){ | |
$formok = false; | |
$errors[] = "You have not entered a name"; | |
} | |
//validate email address is not empty | |
if(empty($email)){ | |
$formok = false; | |
$errors[] = "You have not entered an email address"; | |
//validate email address is valid | |
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){ | |
$formok = false; | |
$errors[] = "You have not entered a valid email address"; | |
} | |
//validate message is not empty | |
if(empty($message)){ | |
$formok = false; | |
$errors[] = "You have not entered a message"; | |
} | |
//validate message is greater than 20 characters | |
elseif(strlen($message) < 20){ | |
$formok = false; | |
$errors[] = "Your message must be greater than 20 characters"; | |
} | |
//send email if all is ok | |
if($formok){ | |
$headers = "From: info@example.com" . "\r\n"; | |
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; | |
$emailbody = "<p>You have received a new message from the enquiries form on your website.</p> | |
<p><strong>Name: </strong> {$name} </p> | |
<p><strong>Email Address: </strong> {$email} </p> | |
<p><strong>Telephone: </strong> {$telephone} </p> | |
<p><strong>Enquiry: </strong> {$enquiry} </p> | |
<p><strong>Message: </strong> {$message} </p> | |
<p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>"; | |
mail("enquiries@example.com","New Enquiry",$emailbody,$headers); | |
} | |
//what we need to return back to our form | |
$returndata = array( | |
'posted_form_data' => array( | |
'name' => $name, | |
'email' => $email, | |
'telephone' => $telephone, | |
'enquiry' => $enquiry, | |
'message' => $message | |
), | |
'form_ok' => $formok, | |
'errors' => $errors | |
); | |
//if this is not an ajax request | |
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){ | |
//set session variables | |
session_start(); | |
$_SESSION['cf_returndata'] = $returndata; | |
//redirect back to form | |
header('location: ' . $_SERVER['HTTP_REFERER']); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment