Vikram Bajaj Vikram Bajaj - 5 months ago 48
Javascript Question

Form to email using Materializecss not working

I'm building my website using Materializecss. I want the contact_us.php to send an email with the form details.

Here is the code (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>




I tried uploading it and sending the email, but it didn't work. I want it to send the email upon successful submission, and to display a modal saying thank you (already in the code).

What do I change? I'm pretty new to PHP.

Answer

You have not given name in <input> field. Replace your <form></form> code with this.

<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>

Add name attribute in this text input as i gave.

<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>