使用Materializecss发送电子邮件的表单不起作用
Form to email using Materializecss not working
我正在使用Materializecss构建我的网站。我希望contact_us.php发送一封包含表单详细信息的电子邮件。
下面是代码（contact_us.php）：
<?php
if(!empty($_POST['first_name']) and !empty($_POST['email']) and !empty($_POST['textarea1'])) {
$email_to = "vikrambajaj@websitedzine.com";
$email_subject = "Customer Message";
$sender = $_POST['first_name']; // required
$email_from = $_POST['email']; // required
$comments = $_POST['textarea1']; // required
$email_message = "Form Details:'n'n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($sender)."'n";
$email_message .= "Email: ".clean_string($email_from)."'n";
$email_message .= "Message: ".clean_string($comments)."'n";
$headers = 'From: '.$email_from."'r'n".
'Reply-To: '.$email_from."'r'n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
echo "<script type='text/javascript'>$('#modal1').openModal();</script>";
?>
<?php
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Website Dzine - Contact Us</title>
<meta charset="utf-8">
<meta name="description" content="Your one stop destination for beautiful, responsive websites!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<header>
<nav>
<div class="nav-wrapper">
<a href="index.html"><img src="images/newlogo1.png" alt="WD"></a>
<a href="index.html" class="brand-logo center">Website Dzine</a>
<a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="row">
<div class="col s12 m8">
<div class="card">
<div class="card-image">
<img src="images/contact_us.jpg">
<span class="card-title">Send Us A Message</span>
</div>
<div class="card-content">
<div class="row">
<form class="col s12" method="post" action="">
<div class="row">
<div class="input-field col s12">
<input id="first_name" type="text" class="validate" required="required">
<label for="first_name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate" required="required">
<label for="email" data-error="Invalid">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea" required="required"></textarea>
<label for="textarea1">Message</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<p>Thank you!<br>Your message has been sent successfully.<br>We will get back as soon as possible!</p>
</div>
<div class="modal-footer">
<a href="contact_us.php" class=" modal-action modal-close waves-effect waves-green btn-flat">Okay</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="col l4 offset-l2 s12">
<ul>
<li><a href="#!"><!--<img src="icons/linkedin.png" alt="LinkedIn">--></a></li>
<li><a href="#!"><!--<img src="icons/facebook.png" alt="Facebook">--></a></li>
<li><a href="#!"><!--<img src="icons/google+.png" alt="Google+">--></a></li>
<li><a href="#!"><!--<img src="icons/twitter.png" alt="Twitter">--></a></li>
</ul>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
</div>
</div>
</footer>
<script>
$(document).ready(function () {
$(".button-collapse").sideNav({
menuWidth: 240,
edge: 'right',
closeOnClick: true
});
$(".fade").addClass("load");
});
</script>
</body>
我试着上传并发送电子邮件，但没有成功。我希望它在成功提交后发送电子邮件，并显示一个表示感谢的模态（已经在代码中了）。
我该换什么？我是PHP的新手。
您尚未在<input>字段中指定名称。用此代码替换您的<form></form>代码。
<form class="col s12" method="post" action="">
<div class="row">
<div class="input-field col s12">
<input id="first_name" name="first_name" type="text" class="validate" required="required">
<label for="first_name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" name="email" type="email" class="validate" required="required">
<label for="email" data-error="Invalid">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" name="textarea1" class="materialize-textarea" required="required"></textarea>
<label for="textarea1">Message</label>
</div>
</div>
<div class="row">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
按照我给出的，在这个文本输入中添加name属性。
<input id="first_name" name="first_name" type="text" class="validate" required="required">
<input id="email" name="email" type="email" class="validate" required="required">
<textarea id="textarea1" name="textarea1" class="materialize-textarea" required="required"></textarea>
相关文章：
- 动态Javascript表单不起作用
- 带有select的jquery提交表单不起作用
- 下拉 jquery 方法发布表单不起作用
- JavaScript onChange 事件侦听器对输入表单不起作用
- 带有javascript按钮的PHP表单-不起作用
- 使用AJAX提交表单不起作用
- Jquery Modal/Dialog表单不起作用
- 使用Javascript提交表单不起作用
- 事件委派后表单不起作用
- 为什么在IE和Chrome中提交表单不起作用
- 根据<选择>动态创建的表单不起作用
- 在Kentico中使用response.write重定向HTML表单不起作用
- 移动响应表单不起作用
- 联系表单不起作用(Php 端）
- 使用 jQuery POST 和 php 序列化和提交表单不起作用
- 通过 ajax 提交表单不起作用
- 在 Javascript 中验证表单不起作用
- e.防止默认和 asp.net 登录表单不起作用
- 为什么我的拖放区 JavaScript 表单不起作用
- 使用 Javascript 提交表单不起作用
