title: Weird encoding issues with html contact form and utf8 encoding through meta tag
body: <p>I have this simple contact form:</p>
  
  <pre><code>&lt;form id="emailForm" action="contact.php" method="POST"&gt;
      &lt;label for="name"&gt;Your name&lt;/label&gt;
      &lt;input type="text" id="name" name="name"&gt;
  
      &lt;label for="email"&gt;Your email&lt;/label&gt;
      &lt;input type="text" id="email" name="email"&gt;
  
      &lt;label for="subject"&gt;Subject&lt;/label&gt;
      &lt;input type="text" id="subject" name="subject"&gt;
  
      &lt;label for="message"&gt;Message&lt;/label&gt;
      &lt;textarea id="message" name="message"&gt;&lt;/textarea&gt;
  
      &lt;p class="emailPop" id="emailError"&gt;&lt;/p&gt;
  
      &lt;input id="submit" type="submit" value="Send"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>If a message contains unicode characters like <code>àèìòù</code> they will display in a weird way when I receive the email containing the message that I've been sent, like for example <code>Ã Ã Ã Ã¹Ã²Ã¨Ã²Ã²Ã²Ã¨Ã Ã¨Ã Ã Ã²</code>.</p>
  
  <p>I excerpted the form to a page which only contained the form alone and messages from that page reached my email with no modifications. After a bit of experimenting I discovered that the cause of the issue is the tag <code>&lt;meta charset="utf-8"&gt;</code>, the one that's actually supposed to make things work.</p>
  
  <p>Since other pages make use of unicode characters I can not go without this tag, but it will conflict with the output of my form. What should I do?</p>
  
  <hr>
  
  <p>Here's the code of the php script in charge of sending the email</p>
  
  <pre><code>&lt;?php
      //require_once 'Mail.php';
  
      function exit_message($error) {
          echo json_encode(array('status' =&gt; 'error', 'message' =&gt; $error));
          exit();
      }
  
      $data = $_POST;
  
      // Check that all fields are filled in
      $fields = array('name', 'email', 'subject', 'message');
  
      foreach($fields as $field) {
          if(empty($data[$field]))
              exit_message("Please insert your " . $field . '.');
      }
  
      // Check if email is valid
      if(!filter_var($data['email'], FILTER_VALIDATE_EMAIL))
          exit_message('The email you provided is invalid.');
  
      // Check if message is longer than 9 characters
      if(strlen($data['message']) &lt;= 9)
          exit_message('Please write a message at least 9 characters long.');
  
      // Begin composing the message
      $message = array(
          'recipient' =&gt; 'xxxxxxx@gmail.com',
          'subject' =&gt; $data['subject'],
          'body' =&gt; stripslashes($data['message']) . ' - gabrielecirulli.com',
          'headers' =&gt; 'From: "' . $data['name'] . '" &lt;' . $data['email'] . '&gt;'
      );
  
      // Send
      if(mail(
          $message['recipient'],
          utf8_encode($message['subject']),
          utf8_encode($message['body']),
          $message['headers']
      )) {
          echo json_encode(array('status' =&gt; 'ok'));
      } else {
          exit_message('An unidentified error happened while sending your message.');
      }
  </code></pre>
  
  <hr>
  
  <p>Here's an example: if i send the message through my page<br>
  <a href="http://www.gabrielecirulli.com/p/20120113-073417.png" rel="nofollow noreferrer">http://www.gabrielecirulli.com/p/20120113-073417.png</a></p>
  
  <p>and if I send the same message through the test page which doesn't have <code>&lt;meta charset="utf-8"&gt;</code>:<br>
  <a href="http://www.gabrielecirulli.com/p/20120113-073503.png" rel="nofollow noreferrer">http://www.gabrielecirulli.com/p/20120113-073503.png</a></p>
  
  <p>Here's the result:<br>
  <a href="http://www.gabrielecirulli.com/p/20120113-073737.png" rel="nofollow noreferrer">http://www.gabrielecirulli.com/p/20120113-073737.png</a></p>
  
  <p>As you can see the page without the meta tag actually gives the right characters.</p>
  
  <p>This issue appears in both Google Chrome and Firefox.</p>