我是一个非常新手的程序员，通常会购买便宜的模板来构建网站并自学基础知识。在这个简单电子邮件表单的模板中，该表单实际上确实按照预期发送了电子邮件，但是，该表单不会使用警报成功或警报错误消息进行更新，而是在运行时只给我一个空白页面.
有人可以帮助我并告诉我这个模板缺少什么才能使其正常工作吗？我觉得 mail.php 中应该有一些东西来处理错误。我知道，这是非常基本的，但我们都必须从某个地方开始！
形式：
<form method="post" class="contact-form" action="mail.php">
<div id="personal">
<div class="control-group"><!--name field-->
<div class="controls">
<input class="required span9" type="text" name="name" data-fieldid="0" value="Full Name" onclick="if(this.value=='Full Name') this.value=''" onblur="if(this.value=='') this.value='Full Name'">
</div>
</div>
<div class="control-group"><!--email field-->
<div class="controls">
<input class="required span9" type="email" name="email" data-fieldid="1" value="Your Email" onclick="if(this.value=='Your Email') this.value=''" onblur="if(this.value=='') this.value='Your Email'">
</div>
</div>
<div class="control-group"><!--message field-->
<div class="controls">
<textarea name="message" rows="12" class="required span9" data-fieldid="2" onclick="if(this.value=='Type Message') this.value=''" onblur="if(this.value=='') this.value='Type Message'">Message</textarea>
</div>
</div>
<div class="control-group">
<div class="controls right">
<button type="submit" class="btn-main">Send <i class="fa fa-send" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="notifications">
<div id="contactFormSent" class="formSent alert alert-success"> <strong>Your Message Has Been Sent!</strong> Thank you for contacting us.</div>
<div id="contactFormError" class="formError alert alert-error"> <strong>Oops, An error has occurred!</strong> See the marked fields above to fix the errors.</div>
</div>
</form>
mail.php 文件：
<?php
if(isset($_POST['email'])){
// Change your email here
$mailTo = "[email protected]";
$subject = "Astor Tower Contact Form";
$body = "New message from web
<br><br>
FROM: ".$_POST['email']."<br>
NAME: ".$_POST['name']."<br>
COMMENTS: ".$_POST['message']."<br>";
$headers = "To: Elegance <".$mailTo.">\r\n";
$headers .= "From: ".$_POST['name']." <".$_POST['email'].">\r\n";
$headers .= "Content-Type: text/html";
//send email
$mail_success = mail($mailTo, utf8_decode($subject), utf8_decode($body), $headers);
}
?>
CSS：
/* Contact */
.contact {
margin: 60px 0;
}
.contact .contact-logo {
color: #4a4a4a;
font-size: 18px;
font-weight: 300;
margin-top: 20px;
}
.contact .contact-logo img {
width: 36px;
height: 36px;
margin-right: 10px;
}
.contact .info {
margin: 20px 0 40px 0;
font-family: inherit;
}
.contact-form {
width: 90%;
}
.contact-form input {
margin: 10px 0;
height: 50px;
border: 1px solid #DAD1B5;
color: #AB9D6B;
width: 100%;
font-weight: 300;
padding: 0 20px;
}
.contact-form input:focus {
outline: none;
}
.contact-form textarea {
margin: 10px 0;
height: 250px;
border: 1px solid #DAD1B5;
color: #AB9D6B;
width: 100%;
font-weight: 300;
padding: 10px 20px;
}
.contact-form textarea:focus {
outline: none;
}
.contact-form .btn-main {
border: none;
}
.formSent, .formError {
display: none;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
color: #c09853;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
margin: 20px 0;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}
.bay {
overflow: hidden;
background-color: transparent;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d6d6d6;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d6d6d6;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d6d6d6;
}
:-moz-placeholder { /* Firefox 18- */
color: #d6d6d6;
}
任何帮助或指导表示赞赏！
将其粘贴到您的 mail.php 文件中
<?php
if(isset($_POST['email'])) {
// Change your email here
$mailTo = "[email protected]";
$subject = "Astor Tower Contact Form";
$body = "New message from web
<br><br>
FROM: " . $_POST['email'] . "<br>
NAME: " . $_POST['name'] . "<br>
COMMENTS: " . $_POST['message'] . "<br>";
$headers = "To: Elegance <" . $mailTo . ">\r\n";
$headers .= "From: " . $_POST['name'] . " <" . $_POST['email'] . ">\r\n";
$headers .= "Content-Type: text/html";
// Send email
$mail_success = mail($mailTo, utf8_decode($subject), utf8_decode($body), $headers);
if ($mail_success) {
// If mail is sent successfully, return success message
echo json_encode(array('status' => 'success', 'message' => 'Your message has been sent. Thank you for contacting us.'));
} else {
// If mail fails to send, return error message
echo json_encode(array('status' => 'error', 'message' => 'An error occurred while sending the message.'));
}
}
?>
现在您需要更新 HTML 文件中的表单提交处理，以处理来自 mail.php 的响应并显示相应的成功或错误消息。
$(document).ready(function() {
$('.contact-form').submit(function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: 'POST',
url: 'mail.php',
data: formData,
dataType: 'json',
success: function(response) {
if (response.status === 'success') {
$('#contactFormSent').text(response.message).show();
$('#contactFormError').hide();
} else {
$('#contactFormError').text(response.message).show();
$('#contactFormSent').hide();
}
},
error: function() {
$('#contactFormError').text('An error occurred while sending the message.').show();
$('#contactFormSent').hide();
}
});
});
});
表单现在应该在提交电子邮件时正确处理成功和错误消息。
CSS 与此无关，它只是用于样式化的代码。