Form is not sending email? <p>I have created a form that appears when a button is pressed. However, when the final submit button is pressed the final email is not sent. Where are the errors in my code?</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// JavaScript Document // Validating Empty Field function check_empty() { if (document.getElementById('name').value == "" || document.getElementById('email').value == "") { alert("Please fill out all fields."); } else { alert("Order Successful!"); } } //Function To Display Popup function div_show1() { document.getElementById("ordertype").innerHTML = "$400 Website Order"; document.getElementById('abc').style.display = "block"; } function div_show2() { document.getElementById("ordertype").innerHTML = "$500 Website Order"; document.getElementById('abc').style.display = "block"; } function div_show3() { document.getElementById("ordertype").innerHTML = "$700 Website Order"; document.getElementById('abc').style.display = "block"; } //Function to Hide Popup function div_hide() { document.getElementById('abc').style.display = "none"; }</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8"; /* CSS Document */ #abc { width: 100%; height: 100%; opacity: 0.97; top: 0; left: 0; display: none; position: fixed; background-color: #313131; overflow: auto; z-index: 9999999; } img#close { position: absolute; right: -14px; top: -14px; cursor: pointer; } div#popupContact { position: absolute; left: 50%; top: 17%; margin-left: -202px; font-family: coolfont; } form { max-width: 300px; min-width: 250px; padding: 10px 50px; border: 2px solid gray; border-radius: 10px; font-family: coolfont; background-color: #fff; } p { margin-top: 30px; } h2 { background-color: #FEFFED; padding: 20px 35px; margin: -10px -50px; text-align: center; border-radius: 10px 10px 0 0; font-family: info; } hr { margin: 10px -50px; border: 0; border-top: 1px solid #ccc; } input[type=text] { width: 82%; padding: 10px; margin-top: 30px; border: 1px solid #ccc; padding-right: 40px; font-size: 16px; font-family: coolfont; } textarea { width: 82%; height: 95px; padding: 10px; resize: none; margin-top: 30px; border: 1px solid #ccc; padding-right: 40px; font-size: 16px; font-family: coolfont; margin-bottom: 30px; } #submit { text-decoration: none; width: 100%; text-align: center; display: block; background-color: #FFBC00; color: #fff; border: 1px solid #FFCB00; padding: 10px 0; font-size: 20px; cursor: pointer; border-radius: 5px; } @media only screen and (max-width: 457px) { form { max-width: 200px; min-width: 150px; padding: 10px 50px; margin-left: 50px; } input[type=text] { padding-right: 30px; } textarea { padding-right: 30px; } } @media only screen and (max-width: 365px) { form { max-width: 140px; min-width: 90px; padding: 10px 50px; margin-left: 80px; } input[type=text] { padding-right: 10px; } textarea { padding-right: 10px; } }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt; &lt;script src="https://code.jquery.com/jquery-1.12.3.min.js"&gt;&lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt; &lt;link href="elements.css" rel="stylesheet"&gt; &lt;script src="my_js.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;a class="button" id="popup" onclick="div_show1()"&gt;ORDER NOW&lt;/a&gt; &lt;a class="button" id="popup" onclick="div_show2()"&gt;ORDER NOW&lt;/a&gt; &lt;a class="button" id="popup" onclick="div_show3()"&gt;ORDER NOW&lt;/a&gt; &lt;div id="abc"&gt; &lt;!-- Popup Div Starts Here --&gt; &lt;div id="popupContact"&gt; &lt;!-- Contact Us Form --&gt; &lt;form action="form.php" id="form" method="post" name="form" enctype="multipart/form-data"&gt; &lt;img id="close" src="images/redcross.png" width="50" onclick="div_hide()"&gt; &lt;h2 id="ordertype" name="ordertype"&gt;$400 Website Order&lt;/h2&gt; &lt;hr&gt; &lt;input id="name" name="name" placeholder="Name" type="text"&gt; &lt;input id="email" name="email" placeholder="Email" type="text"&gt; &lt;textarea id="msg" name="message" placeholder="Comments/Questions"&gt;&lt;/textarea&gt; &lt;a href="javascript:%20check_empty()" id="submit"&gt;Order&lt;/a&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- Popup Div Ends Here --&gt; &lt;/div&gt; &lt;/body&gt;</code></pre> </div> </div> </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;? php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $from = '#'; $to = 'sample@gmail.com'; $subject = $ordertype; $body = "From: ".$name. "\r\n E-Mail: ".$email. "\r\n Message: \r\n".$message; if (isset($_POST['submit'])) { if (mail($to, $subject, $body, $from)) { echo '&lt;script&gt; alert("Message successfully sent."); &lt;/script&gt;'; } else { echo '&lt;p&gt;Something went wrong, go back and try again!&lt;/p&gt;'; } } ?&gt;</code></pre> </div> </div> </p> <p>The last code snippet attached is the form.php file, which I have tried to link to within the html.</p>