I'm trying to have the Modal pop up when the user successfully submits the contact form and an alternative modal when the form is unsuccessful The modal can be tested by clicking on the 'CONTACT ME'.
Basically just a simple pop-up window that is prettier than an alert box to tell the user their for has sent correctly.
The URL is: mike-griffin.com/contact.html
The PHP I'm using for the form submit is below:
<?php
/*subject and email variables*/
$emailSubject = 'Subject';
$webMaster = 'michaelgriffin87@me.com';
/*gathering data variables*/
$nameField = $_POST['Name'];
$emailField = $_POST['E-mail'];
$commentField = $_POST['Comment'];
$to = "$webMaster";
$subject = "$emailSubject";
$message = "<html>
<head></head>
<body>
<strong>Website Contact Form</strong><br />
<br />
Customer's Name: <strong>$nameField</strong><br />
E-mail Address: <strong>$emailField</strong><br />
Message:<br /><strong>$commentField</strong>
</body>
</html>
";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "To: Amorae Bridal <$webMaster>" . "\r\n";
$headers .= 'From: Website Contact Form <'.$email.'>' . "\r\n";
mail($to, $subject, $message, $headers); //<-- function to send email
$theResults = <<<EOD
EOD;
echo "$theResults";
?>
The Page Jquery/HTML for the Modal is below:
<div id="contact-sent" class="reveal-modal">
<h1>sent</h1>
<a href="#" class="close-reveal-modal"><img src="img/close.png" alt="Close button"></a>
</div><!--modal-->
</div><!--end-of-container-->
<script src="js/main.js"></script>
<script src="js/jquery-1.4.4.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script>
//code that uses 1.4.4 should be enclosed as follows
jQuery(function( $ ) {
(jquery);
$('#contact-sent').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
});
</script>
