Form being not submitted

Question

I have a simple html form that should be using POST method to submit the form and it will send form contents on mail.php to send email. I have verified the php mail functionality working on server using the following code:

  $headers = 'From: webmaster@example.com'; mail('myemail@mail.com', 'test email yo', 'This is a test email message', $headers, '-fwebmaster@example.com');

the PHP code I'm using to send the mail is as follows:

mail('myemail@mail.com', $_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message']);

the html form that should be sending the info is this:

<form id="contact-form" class="contact-form" method="post" action="mail.php">
    <div class="success-message">Contact form submitted.</div>
    <div class="coll-1">
        <p class="mbot3">Name*</p>
        <label class="name">
            <input type="text" placeholder="" data-constraints="@Required @JustLetters" name="name"/>
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid name.</span>
        </label>
    </div>
    <div class="coll-2">
        <p class="mbot3">E-mail*</p>
        <label class="email">
            <input type="text" placeholder="" data-constraints="@Required @Email" name="email"/>
            <span class="empty-message">*This field is required.</span>
            <span class="error-message">*This is not a valid email.</span>
        </label>
     </div>
     <div class="coll-3">
         <p class="mbot3">Phone</p>
         <label class="phone">
             <input type="text" placeholder="" data-constraints="@JustNumbers" name="phone"/>
             <span class="empty-message">*This field is required.</span>
             <span class="error-message">*This is not a valid phone.</span>
         </label>
      </div>
      <label class="message">
          <span class="mbot3">Message*</span>
          <textarea placeholder="" data-constraints="@Required @Length(min=20,max=999999)" name="message"></textarea>
          <span class="empty-message">*This field is required.</span>
          <span class="error-message">*The message is too short.</span>
       </label>
   <div>
      <a href="#" data-type="submit" class="btn-link btn-link1"><img src="img/arrow1.png" alt="">submit</a>
      <p class="req">* Required fields</p>
   </div>
</form>

I can't get the contents of the form to come through in the email, I'm assuming possibly wrongly that the issue is with the form and it's ability to POST the info to php?

This code is from a premade template I did not write it myself.

Edit: As suggested I added the name attributes however that has not fixed the issue. Updated HTML to reflect current code.

Edit2: Have solved problem, I had to remove id="contact-form" not sure what was associated with this that was preventing the form submitting but that did it. From there I took the styles from the original form and added them to a new id that I replaced it with.

Answer 1

You missed the name to the input and textarea field

<input type="text" placeholder="" data-constraints="@Required @JustLetters"  name = "name"/>

The name attribute should have the same name as you are receiving from $_POST['name']

Answer 2

Check these fields on your HTML code,

<input type="text" placeholder="" data-constraints="@Required @JustLetters" />
<input type="text" placeholder="" data-constraints="@Required @Email" />
<input type="text" placeholder="" data-constraints="@JustNumbers"/>
<textarea placeholder="" data-constraints="@Required @Length(min=20,max=999999)"></textarea>

And replace them with following code, you missed to add name attribute, name attribute used to reference form data after you submit the form.

<input type="text" name="name" placeholder="" data-constraints="@Required @JustLetters" />
<input type="text" name="email" placeholder="" data-constraints="@Required @Email" />
<input type="text" name="phone" placeholder="" data-constraints="@JustNumbers"/>
<textarea name="message" placeholder="" data-constraints="@Required @Length(min=20,max=999999)"></textarea>