title: Mailing form data with Fetch API
body: <p>I'm trying to use Fetch API to retrieve data from form and mail it, but the email I'm receiving is empty. The response seems to be successful, but no data being sent. What am I doing wrong?</p>
  
  <p>This is my JS code and my php/html snippet if it's relevant</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>(function() {
  
    const submitBtn = document.querySelector('#submit');
  
    submitBtn.addEventListener('click', postData);
  
    function postData(e) {
      e.preventDefault();
  
      const first_name = document.querySelector('#name').value;
      const email = document.querySelector('#email').value;
      const message = document.querySelector('#msg').value;
  
      fetch('process.php', {
          method: 'POST',
          body: JSON.stringify({first_name:first_name, email:email, message:message})
      }).then(function (response) {
        console.log(response);
        return response.json();
      }).then(function(data) {
        console.log(data);
        // Success
      });
  
    }
  
  })();
  
  
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php 
      $to = "example@mail.com"; 
      $first_name = $_POST['first_name'];
      $from = $_POST['email']; 
      $message = $_POST['message'];
      $subject = "Test Email";
      $message = $first_name . " sent a message:" . "\n\n" . $message;
      $headers = "From:" . $from;
      mail($to,$subject,$message,$headers);
  ?&gt;
  
  
  &lt;form action="" method="post" class="contact__form form" id="contact-form"&gt;
    &lt;input type="text" class="form__input" placeholder="Your Name" id="name" name="first_name" required=""&gt;
    &lt;input type="email" class="form__input" placeholder="Email address" id="email" name="email" required=""&gt;
    &lt;textarea id="msg" placeholder="Message" class="form__textarea" name="message"/&gt;&lt;/textarea&gt;
    &lt;input class="btn" type="submit" name="submit" value="Send" id="submit"/&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>