私はここで苦労しています..助けが必要です!! :)
私はPHPを持っており、送信ボタンが押されたときにエコー内でjquery.showを実行する必要があります。
PHPコード>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$title = $_POST['title'];
$content = $_POST['content'];
$from = 'From: Comeone Form';
$to = 'info@someemail.com';
$subject = 'Contact Form';
$human = $_POST['human'];
$body = "From: $name\n E-Mail: $email\n Subject: $title\n Message:\n $content";
if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your email has been successfully sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<script>
$("submit-mail").click(function () {
$("#mail-message-window").show("slow");
});
</script>';
}
?>
フォーム>
<form method="post" action="#contact-us">
<label>Name *</label>
<input type="text" name="name" class="rounded" required />
<label>E-mail *</label>
<input type="email" name="email" class="rounded" required />
<label>Subject *</label>
<input type="text" name="title" class="rounded" required />
<label>Message *</label>
<textarea name="content" cols="42" rows="7" class="rounded" required></textarea>
<label>What is 2+2? (Anti-spam) *</label>
<input type="text" name="human" class="rounded" required />
<input id="submit" name="submit" id="submit-mail" type="submit" class="submit-btn rounded" value="SEND">
</form>
隠されたDIV>
<div id="mail-message">
<table>
<tr>
<td>
<div id="mail-message-window">
<div id="mail-message-header"></div>
<p id="mail-failure">Unable to send your email!</p>
<p id="invalid-email">Please enter valid email address!</p>
<p id="empty-field">Please fill out all the fields in order to send us a message.</p>
<p id="mail-success">Your email has been successfully sent to us!</p>
<input type="button" id="mail-message-btn" class="mail-message-btn rounded" value="OK" />
</div>
</td>
</tr>
</table>
CSS>
#mail-message
{
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
z-index: 210;
}
#mail-message
{
width: 100%;
height: 100%;
text-align: center;
}
#mail-message-window
{
width: 400px;
padding-bottom: 20px;
border: solid 0px #ffffff;
background: #000000 url('../images/bg.png') repeat top left;
margin: 0 auto;
}
#mail-message-header
{
width: 400px;
height: 70px;
}
.mail-message-success
{
background: transparent url('../images/success.png') no-repeat top left;
}
.mail-message-error
{
background: transparent url('../images/error.png') no-repeat top left;
}
#mail-message-window p
{
margin: 0 0 5px 10px;
text-align: left;
}
#mail-message-window input
{
margin-top: 10px;
}
#mail-message td
{
vertical-align: middle;
}