PHP doesn't send form from a modal

Question

I am working on a 'Coming Soon' website where when a user selects 'Contact Us', a JavaScript modal pops up with an email form. I used the same code I had on a page without a modal and it works there so I'm not sure why this time the email is not being sent. Is it anything to do with sending it from the modal?

The way I made the modal is that it is on the bottom of the page, visibility: hidden; opacity: 0; visibility: hidden; opacity: 0; until the user clicks on 'Contact Us', where the modal will get a class attached with visibility: visible; opacity: 1; visibility: visible; opacity: 1; . I suppose there are maybe better ways to do this but I am learning and this is what I can do at the moment.

HTML:

<form class="form" role="form" method="post" action="#contact">

<div class="form__text">
    <p>Our <strong>new</strong> website will launch in <strong>Spring 2017</strong>.</p>
    <p>In the meantime, contact us for more information.</p>
  </div>
  <div class="form__inputs">
    <div class="form__name">
      <label for="name" class="name">Name</label><br>
      <input type="text" class="form-control" id="name" name="name" value="" required="">
    </div>

    <div class="form__email">
      <label for="email" class="email">Email</label><br>
      <input type="email" class="form-control" id="email" name="email" value="" required="">
    </div>

    <div class="form__message">
      <label for="message" class="message">Message</label><br>
      <textarea class="form-control" rows="4" name="message" required=""></textarea>
    </div>

    <div class="form__submit">
      <button id="submit" name="submit" type="submit">Submit</button>
    </div>
  </div>
</form>

This is the PHP:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $from = 'From: xxx'; 
    $to = 'info@xxx.com'; 
    $subject = 'Hello';

    $body = "From: $name\n E-Mail: $email\n Message:\n $message";

    if ($_POST['submit']) {
    if (mail ($to, $subject, $body, $from)) { 
        echo '<h4 >Thank you for your message!</h4>';
    } else { 
        echo '<h4>Sorry there was an error sending your message. Please try again!</h4>'; 
    }
}
?>

The PHP is in the same document (index.php) as the HTML, at the bottom (just before JS script) and tag. The error I get is:

Cannot POST/

Could you please advise why it's not being sent? I don't know PHP well, I'm trying to understand what is going on but not very successfully.

Answer 1

For future reference, I'd like to post what solved the issue:

1. I added value="Send" to the submit button.
2. I made sure that the PHP script was right after the tag but before the for the whole modal section.
3. I changed the index file name from index.html to index.php.
4. I tested it live directly from my webhost (I FTP-ed the file). I am sure there must be a way to test it locally but I don't know how.

Thank you to everyone who commented.