Skip to content

Instantly share code, notes, and snippets.

@overwine

overwine/form-popup.js

Created September 7, 2012 19:09
Show Gist options
  • Save overwine/3668711 to your computer and use it in GitHub Desktop.
Save overwine/3668711 to your computer and use it in GitHub Desktop.
Download ZIP
Form that I'm going to need 12 different versions of...
Raw
form-popup.js
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
Raw
form.php
<ul class="contacts">
<li class="contact links">
<a href="mailto:[email protected]" class="phf-contact">EMAIL</a>
<a href="tel:1-513.719.6417" class="phf-contact">513.719.6417</a>
<a href="mailto:[email protected]" class="phf-contact">WORK HERE</a>
<a href="tel:1-513-719-1854" class="phf-contact bottom">FACSIMILE</a>
</li>
<li class="contact nancy">
<div class="contact-over">
<p>NANCY</br>KOORS</br><span class="smaller">PRESIDENT & COO</span></p>
<!--<a href="mailto:[email protected]" class="login-window">EMAIL</a></br>-->
<a href="#login-box" class="login-window">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=13504920">LINKEDIN</a>
</div>
</li>
<li class="contact jim">
<div class="contact-over">
<p>JIM</br>PRICE</br><span class="smaller">CEO</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=3709188">LINKEDIN</a>
</div>
</li>
<li class="contact pat">
<div class="contact-over">
<p>PAT</br>JONES</br><span class="smaller">STRATEGY</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=13504920">LINKEDIN</a>
</div>
</li>
<li class="contact ben">
<div class="contact-over">
<p>BEN</br>NUNERY</br><span class="smaller">FACTORIES</span></p>
<a href="mailto:[email protected]">EMAIL</a>
<!--<a target="_blank" href="">LINKEDIN</a>-->
</div>
</li>
<li class="contact rosie">
<div class="contact-over">
<p>ROSIE</br>MCGUIRE</br><span class="smaller">CREATIVE</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=30209165">LINKEDIN</a>
</div>
</li>
<li class="contact george">
<div class="contact-over">
<p>GEORGE</br>ALEXANDER</br><span class="smaller">CREATIVE</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=6600923">LINKEDIN</a>
</div>
</li>
<li class="contact steve">
<div class="contact-over">
<p>STEVE</br>DALY</br><span class="smaller">TECHNOLOGY</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=115925">LINKEDIN</a>
</div>
</li>
<li class="contact ashley">
<div class="contact-over">
<p>ASHLEY</br>WALTERS</br><span class="smaller">WOMM</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=9382403">LINKEDIN</a>
</div>
</li>
<li class="contact robert">
<div class="contact-over">
<p>ROBERT</br>MIGLIARA</br><span class="smaller">ANALYTICS</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=79744073">LINKEDIN</a>
</div>
</li>
<li class="contact matt">
<div class="contact-over">
<p>MATT</br>DENNIS</br><span class="smaller">PROJECT MGMT</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=6505509">LINKEDIN</a>
</div>
</li>
<li class="contact treenah">
<div class="contact-over">
<p>TREENAH</br>KIGHT</br><span class="smaller">BUSINESS DEV</span></p>
<a href="mailto:[email protected]">EMAIL</a></br>
<a target="_blank" href="http://www.linkedin.com/profile/view?id=26481200">LINKEDIN</a>
</div>
</li>
</ul>
<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="img/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<h1>Contact Sweetness</h1>
<form id="contactform" action="processForm.php" method="post">
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text" id="name" name="name" /></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td><label for="message">Message:</label></td>
<td><textarea id="message" name="message" rows="5" cols="20"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Send!" id="send" /></td>
</tr>
</table>
</form>
<div id="response"></div>
</div>
Raw
processForm.php
<?php
// Clean up the input values
foreach($_POST as $key => $value) {
if(ini_get('magic_quotes_gpc'))
$_POST[$key] = stripslashes($_POST[$key]);
$_POST[$key] = htmlspecialchars(strip_tags($_POST[$key]));
}
// Assign the input values to variables for easy reference
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
// Test input values for errors
$errors = array();
if(strlen($name) < 2) {
if(!$name) {
$errors[] = "You must enter a name.";
} else {
$errors[] = "Name must be at least 2 characters.";
}
}
if(!$email) {
$errors[] = "You must enter an email.";
} else if(!validEmail($email)) {
$errors[] = "You must enter a valid email.";
}
if(strlen($message) < 10) {
if(!$message) {
$errors[] = "You must enter a message.";
} else {
$errors[] = "Message must be at least 10 characters.";
}
}
if($errors) {
// Output errors and die with a failure message
$errortext = "";
foreach($errors as $error) {
$errortext .= "<li>".$error."</li>";
}
die("<span class='failure'>The following errors occured:<ul>". $errortext ."</ul></span>");
}
// Send the email
$to = "YOUR_EMAIL";
$subject = "Contact Form: $name";
$message = "$message";
$headers = "From: $email";
mail($to, $subject, $message, $headers);
// Die with a success message
die("<span class='success'>Success! Your message has been sent.</span>");
// A function that checks to see if
// an email is valid
function validEmail($email)
{
$isValid = true;
$atIndex = strrpos($email, "@");
if (is_bool($atIndex) && !$atIndex)
{
$isValid = false;
}
else
{
$domain = substr($email, $atIndex+1);
$local = substr($email, 0, $atIndex);
$localLen = strlen($local);
$domainLen = strlen($domain);
if ($localLen < 1 || $localLen > 64)
{
// local part length exceeded
$isValid = false;
}
else if ($domainLen < 1 || $domainLen > 255)
{
// domain part length exceeded
$isValid = false;
}
else if ($local[0] == '.' || $local[$localLen-1] == '.')
{
// local part starts or ends with '.'
$isValid = false;
}
else if (preg_match('/\\.\\./', $local))
{
// local part has two consecutive dots
$isValid = false;
}
else if (!preg_match('/^[A-Za-z0-9\\-\\.]+$/', $domain))
{
// character not valid in domain part
$isValid = false;
}
else if (preg_match('/\\.\\./', $domain))
{
// domain part has two consecutive dots
$isValid = false;
}
else if(!preg_match('/^(\\\\.|[A-Za-z0-9!#%&`_=\\/$\'*+?^{}|~.-])+$/',
str_replace("\\\\","",$local)))
{
// character not valid in local part unless
// local part is quoted
if (!preg_match('/^"(\\\\"|[^"])+"$/',
str_replace("\\\\","",$local)))
{
$isValid = false;
}
}
if ($isValid && !(checkdnsrr($domain,"MX") || checkdnsrr($domain,"A")))
{
// domain not found in DNS
$isValid = false;
}
}
return $isValid;
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment