I want my contact form to change to 'mail successful' when a mail has been send. So the div from the contactform has to be display:none
and the div from 'mail successful' has to be display:block
right?
Somehow I don't succeed in this.
Here is a print screen and how I want it:
This is the php code I use (only the end cause that's the only needed part):
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
if ($success) {
?>
<style type="text/css">
#mail_succeed {
display: block;
}
#mail_failed {
display: none;
}
#contat-area{
display: none;
}
</style>
<?php
header('Location: index.php#contact');
exit();
} else {
?>
<style type="text/css">
#mail_failed {
display: block;
}
#mail_succeed {
display: none;
}
#contact-area{
display: none;
}
</style>
<?php
header('Location: index.php#contact');
exit();
}
?>
This is the html code I have now (its quit a bit of code, I also added the modal because maybe its important):
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">x</span>
<h4>Contact Form</h4>
</div>
<div class="modal-body">
<div id="contact-area">
<form method="post" action="contactengine.php">
<div class="nametel">
<div class="name">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name">
</div>
<div class="tel">
<label for="Tel">Tel:</label>
<input type="text" name="Tel" id="Tel">
</div>
</div>
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email">
<label for="Message">Message:</label><br>
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Send" class="submit-button" onclick="showDiv()">
</form>
<div style="clear: both;"></div>
</div>
<div id="mail_succeed" style="display: none">
<h3>Mail succesfull send, go back to </h3>
<span class="close"><a href="index.php#contact">contact page</a></span>
</div>
<div id="mail_failed" style="display: none">
<h3>Mail not send, go back to </h3>
<span class="close"><a href="index.php#contact">contact page</a></span>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
I possibly send to much code but i'm not sure what to leave away since it can be important.
If you don't want to use jQuery/Ajax
then you can do the following :
In contactengine.php
, change your header redirects to:
header('Location: index.php?resp=1#contact');
and
header('Location: index.php?resp=0#contact');
respectively for success and failure.
Then on index.php
add this little php code in your head section (or wherever you define styles):
if(isset($_GET['resp']) && $_GET['resp']==1){
echo '
<script type="text/javascript">$("#ButtonThatOpensModal").click();</script>
<style type="text/css">
#mail_succeed {
display: block;
}
#mail_failed {
display: none;
}
#contat-area{
display: none;
}
</style>';
}
elseif(isset($_GET['resp']) && $_GET['resp']==0){
echo '<style type="text/css">
#mail_failed {
display: block;
}
#mail_succeed {
display: none;
}
#contact-area{
display: none;
}
</style>';
}