使用Materialisecss无法正常工作的电子邮件表单

时间：2015-11-18 13:39:52

标签： javascript php html forms email

我正在使用Materialisecss构建我的网站。我希望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的新手。

1 个答案:

答案 0 :(得分：1)

您尚未在<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>
相关问题
最新问题