How to setup contact form for PHP AWS BeanStalk - php

Question

I have made a website and would like to use AWS to host it. I currently have it running on S3 as a static server however I can't use the contact form for it. So after doing some research I tried AWS beanstalk but can't seem to get it working. When I click submit, nothing happens. This is the code that's setting up the contact form in index.html
<form id="contact-form" action="" class="post-reply" method="POST">
<p><input class="w3-input w3-border" id="form_name" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-border" id="form_number" type="text" placeholder="Phone Number" required name="Phone Number"></p>
<p><input class="w3-input w3-border" id="form_email" type="text" placeholder="Email" required name="Email"></p>
<p><input class="w3-input w3-border" id="form_subject" type="text" placeholder="Subject" required name="Subject"></p>
<p><input class="w3-input w3-border" id="form_message" type="text" placeholder="Message" required name="Message"></p>
</form>
<p>
<button class="w3-button w3-black" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
Then I created another file and named it mail.php with the following code:
<?php
if (isset($_POST["submit"])) {
$name = $_POST["form_name"];
$email = $_POST["form_email"];
$phone = $_POST["form_phone"];
$subject = $_POST["form_subject"];
$message = $_POST["form_message"];
$to ="duvalprecisiongrinding#gmail.com";
$subject = $subject;
$message = "Email: {$email} Phone: {$phone} Message:" . $message;
//Always set content-type when sending HTML email
$headers ="MIME-Version 1.0" . "\r\n";
//More Headers
$headers .= 'From: duvalprecisiongrinding#gmail.com';
$mail = mail($to,$subject,$message,$headers);
if ($mail) {
echo "<script>alert('Message Sent.');</script>";
}else {
echo "<script>alert('Message not Sent. Please try again.');</script>";
}
}
?>

Answer 1

I made several changes to the contact form that should help, indicated with comments below.
I think the main things keeping it from working at all were the submit button being outside the form and the missing action attribute. Fixing only those would have at least gotten it as far as mail.php, but the names of the form controls need to match the keys of $_POST in mail.php for it to really work as intended.
<form id="contact-form" action="mail.php" class="post-reply" method="POST">
<!-- updated this attribute ^ -->
<p><input class="w3-input w3-border" name="form_name" type="text" placeholder="Name" required></p>
<p><input class="w3-input w3-border" name="form_phone" type="text" placeholder="Phone Number" required></p>
<p><input class="w3-input w3-border" name="form_email" type="text" placeholder="Email" required></p>
<p><input class="w3-input w3-border" name="form_subject" type="text" placeholder="Subject" required></p>
<p><input class="w3-input w3-border" name="form_message" type="text" placeholder="Message" required></p>
<!-- removed the name attributes from the inputs and changed their ids to
names that match the $_POST keys in mail.php -->
<p>
<button class="w3-button w3-black" type="submit" name="submit">
<!-- Moved the button inside the form and added this ^ name attribute -->
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
</form>