PHP Validation Form with email sending an HTML template issue

Question

Im building a PHP form for a customer and i get some issue with the collecting datas into the Form has "Post" method, and the PHP section is complicated for me.

First, i want to use custom HTML template, which is displaying well, but it seems that the post collecting values are brooke. Also, the $headers datas seem to not be added (email is coming with no $from value, also no $to value).

I need help for this. Here is the html and php section. Please take a note, i'm not a JavaScript programmer, but i try to learn has my best knowlege and time goes. I've start from nothing.

Here is the Form HTML structure (reCaptcha is missing its normal):

<div class="col-md-offset-1 col-md-10 col-md-offset-1">

          <script type="text/javascript">
        var RecaptchaOptions = {
            lang : 'fr',
        };
        </script>

            <style type="text/css">
            .field-error .control-label,
            .field-error .help-block,
            .field-error .form-control-feedback {
                color: #ff0039;
            }

            .field-success .control-label,
            .field-success .help-block,
            .field-success .form-control-feedback {
                color: #2780e3;
            }
        </style>

    <form method="post" action="envoi_appel_de_service.php">                
    <p class="bg-primary lead" style="padding-top:7px; padding-left:10px; padding-bottom:7px; background-color:#337ab7 !important;">&nbsp;<i class="fa fa-building"></i>&nbsp;&nbsp;Informations sur l'adresse du service</p>

          <!-- Nom de la compagnie -->
          <div class="form-group row">
                <label for="nom_compagnie" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Nom de la compagnie</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="nom_compagnie" placeholder="Le nom de l'entreprise">
                </div>
          </div>

          <!-- Adresse -->
          <div class="form-group row">
                <label for="adresse" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Adresse</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="adresse" placeholder="Adresse de l'entreprise">
                </div>
          </div>

          <!-- Ville -->
          <div class="form-group row">
                <label for="ville" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Ville</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="ville" placeholder="Le nom de la ville de l'entreprise">
                </div>
          </div>

         <!-- Province -->
          <div class="form-group row">
                <label for="province" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;" id="province">Province</label>
                <div class="col-sm-5">
                    <select class="form-control">
                      <option>Alberta</option>
                      <option>Colombie-Britanique</option>
                      <option>Ile-du-Prince-Edouard</option>
                      <option>Manitoba</option>
                      <option>Nouveau-Brunswick</option>
                      <option>Nouvelle-Ecosse</option>
                      <option>Nunavut</option>
                      <option>Ontario</option>
                      <option selected="selected">Quebec</option>
                      <option>Saskatchewan</option>
                      <option>Terre-Neuve-Labrador</option>
                      <option>Territoires du Nord-Ouest</option>
                      <option>Yukon</option>
                      </select>
                 </div>
          </div>

            <!-- Code postale -->
          <div class="form-group row">
                <label for="code_postale" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Code postale</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="code_postale" placeholder="XXX XXX">
                </div>
          </div>

           <!-- Nom de la personne ressource -->
          <div class="form-group row">
                <label for="nom_responsable" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Nom du responsable</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="nom_responsable" placeholder="Nom de la personne ressource sur place">
                </div>
          </div>

           <!-- Telephone -->
          <div class="form-group row">
                <label for="telephone" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Téléphone</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="telephone" placeholder="X XXX XXX-XXX ext XXXX">
                </div>
          </div>

          <!-- Adresse courriel -->
          <div class="form-group row">
                <label for="courriel" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Adresse courriel</label>
                <div class="col-sm-8">
                    <input type="email" class="form-control" id="courriel" placeholder="Adresse courriel valide">
                </div>
          </div>


        <p class="bg-primary lead" style="padding-top:7px; padding-left:10px; padding-bottom:7px; background-color:#A41313 !important;">&nbsp;<i class="fa fa-print"></i>&nbsp;&nbsp;Informations sur le produit</p>

         <!-- Marque -->
          <div class="form-group row">
                <label for="marque" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Marque</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="marque" placeholder="Marque du produit">
                </div>
          </div>

             <!-- Modèle -->
          <div class="form-group row">
                <label for="modele" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Numéro de modèle</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="modele" placeholder="Veuillez inscrire le numéro de modèle">
                </div>
          </div>

            <!-- Garantie -->
          <div class="form-group row">
                <label for="garantie" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Garantie</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="garantie" placeholder="Est-ce que le produit est sous garantie?">
                </div>
          </div>

          <!-- Description du problème -->
          <div class="form-group row">
                <label for="description" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Description du problème</label>
                <div class="col-sm-8">
                    <textarea class="form-control" rows="4" id="description"></textarea>
                </div>
          </div>

          <p class="bg-primary lead" style="padding-top:7px; padding-left:10px; padding-bottom:7px; background-color:#337ab7 !important;">&nbsp;<i class="fa fa-calendar-o"></i>&nbsp;&nbsp;Préférences pour le rendez-vous</p>

          <!-- Disponibilité -->
          <div class="form-group row">
                <label for="disponibilite" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Disponibilité</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="disponibilite" placeholder="Quel est le meilleur moment pour vous joindre?">
                </div>
          </div>

          <!-- Coordonnées -->
          <div class="form-group row">
                <label for="coordonnees" class="col-sm-4 form-control-label text-right" style="font-size:16px; line-height:16px; padding-top:10px;">Coordonnées</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="coordonnees" placeholder="Optionel">
                </div>
          </div>

            <p class="bg-primary lead" style="padding-top:7px; padding-left:10px; padding-bottom:7px; background-color:#A41313 !important;">&nbsp;<i class="fa fa-lock"></i>&nbsp;&nbsp;Sécurité Anti-Spam</p>

          <!-- Validation reCaptcha franco Google -->
          <div class="form-group row">
                <label for="input12" class="col-sm-4 form-control-label text-right" style="padding-top:28px !important;">S&eacute;curit&eacute; anti-spam</label>
                <div class="col-sm-8">
                <div class="g-recaptcha" data-sitekey="MASKING"></div>
                      </div>    
                </div>

          <!-- Soumettre -->
          <div class="form-group row">
                <label for="submit" class="col-sm-4 form-control-label text-right">&nbsp;</label>
                <div class="col-sm-8">
                     <button name="submit" type="submit" value="submit" class="btn btn-primary">Soumettre</button>
                </div>
          </div>

          </form>

and here is the PHP section:

 <?php
 if (isset($_POST["submit"])) {

 $to = "MASKING";
 $from = $_POST['courriel'];
 $subject = "Réception d'un appel de service";
 $nom_compagnie = $_POST['nom_compagnie']; // required
 $adresse = $_POST['adresse']; // required
 $ville = $_POST['ville'];
 $province = $_POST['province'];
 $code_postale = $_POST['code_postale'];
 $nom_responsable = $_POST['nom_responsable'];
 $courriel = $_POST['courriel'];
 $marque = $_POST['marque'];
 $numero_modele = $_POST['numero_modele'];
 $garantie = $_POST['garantie'];
 $description = $_POST['description'];              
 $disponibilite = $_POST['disponibilite']; // required
 $coordonnees = $_POST['coordonnees']; // required

 $headers = 'From: '.$courriel."\r\n".

'Reply-To: '.$from."\r\n" .

'X-Mailer: PHP/' . phpversion();



 $message = "
 <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">
<html>
<head>
<title>Appel de service (rempli sur le site internet)</title>
<style type=\"text/css\">
h1,h2,h3,h4,h5,h6 {
    font-family: Cambria, \"Hoefler Text\", \"Liberation Serif\", Times, \"Times New Roman\", serif;
    color: #272727;
}
</style>
</head>
<body>
<h2 style=\"font-size: 1.25em; font-family: Gotham, ʼHelvetica Neueʼ, Helvetica, Arial, sans-serif;\">Vous avez re&ccedil;u une demande dʼappel de service en ligne.</h2>
<table width=\"500\" border=\"1\" cellpadding=\"5\" cellspacing=\"2\">
  <tbody>
    <tr>
      <td colspan=\"2\" align=\"left\" valign=\"middle\" bgcolor=\"#84BDEC\"><h3>Inations sur lʼadresse du service</h3></td>
    </tr>
    <tr>
      <td width=\"155\" align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Nom de la compagnie</td>
      <td width=\"313\" align=\"left\" valign=\"middle\">$nom_compagnie</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Adresse</td>
      <td align=\"left\" valign=\"middle\">$adresse</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Ville</td>
      <td align=\"left\" valign=\"middle\">$ville</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Province</td>
      <td align=\"left\" valign=\"middle\">$province</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Code postale</td>
      <td align=\"left\" valign=\"middle\">$code_postale</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Nom du responsable</td>
      <td align=\"left\" valign=\"middle\">$nom_responsable</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">T&eacute;l&eacute;phone</td>
      <td align=\"left\" valign=\"middle\">$telephone</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Adresse courriel</td>
      <td align=\"left\" valign=\"middle\">$courriel</td>
    </tr>
  </tbody>
</table>
<br>
<table width=\"500\" border=\"1\" cellpadding=\"5\" cellspacing=\"2\">
  <tbody>
    <tr>
      <td colspan=\"2\" align=\"left\" valign=\"middle\" bgcolor=\"#84BDEC\"><h3>Informations sur le produit</h3></td>
    </tr>
    <tr>
      <td width=\"155\" align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Marque</td>
      <td width=\"313\" align=\"left\" valign=\"middle\">$marque</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Num&eacute;ro de mod&egrave;le</td>
      <td align=\"left\" valign=\"middle\">$numero_modele</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Garantie</td>
      <td align=\"left\" valign=\"middle\">$garantie</td>
    </tr>
    <tr bgcolor=\"#D5D5D5\">
      <td colspan=\"2\" align=\"left\" valign=\"middle\">Description du probl&egrave;me :</td>
    </tr>
    <tr>
      <td height=\"75\" colspan=\"2\" align=\"left\" valign=\"top\">$description</td>
    </tr>
  </tbody>
</table>
<br>
<table width=\"500\" border=\"1\" cellpadding=\"5\" cellspacing=\"2\">
  <tbody>
    <tr>
      <td colspan=\"2\" align=\"left\" valign=\"middle\" bgcolor=\"#84BDEC\"><h3>Pr&eacute;f&eacute;rences pour le rendez-vous</h3></td>
    </tr>
    <tr>
      <td width=\"155\" align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Disponibilit&eacute;</td>
      <td width=\"313\" align=\"left\" valign=\"middle\">$disponibilite</td>
    </tr>
    <tr>
      <td align=\"left\" valign=\"middle\" bgcolor=\"#D5D5D5\">Coordonn&eacute;es</td>
      <td align=\"left\" valign=\"middle\">$coordonnees</td>
    </tr>
  </tbody>
</table>
</body>
</html>
 ";

 // Always set content-type when sending HTML email

 mail($to, $courriel, $message, $headers,
 "From: $from\n" . 
        "MIME-Version: 1.0\n" . 
        "Content-type: text/html; charset=iso-8859-1"); 


 }
 ?> 

Has you can see, all values are empty, headers too. Im stuck and had no idea why it doesn't work. If someone can help me with this please, thanks a lot.

IMAGE: Email received from the php form

Answer 1

There are few errors in your code (not just the missing name attributes).

You have no name attributes for any of your inputs and error reporting would have thrown you something about it.

I.e.: For the $_POST['courriel'] you would need to change your email input to: (you can't rely on an "id" alone).

<input type="email" name = "courriel" class="form-control" id="courriel" placeholder="Adresse courriel valide">
                    ^^^^^^^^^^^^^^^^^

and following that same pattern for all your other inputs.

However, and as I stated in comments. Your header will fail.

You're using 5 parameters. There is a 5th available, but isn't used for what you're doing.

mail($to, $courriel, $message, $headers,
 "From: $from\n" . 
        "MIME-Version: 1.0\n" . 
        "Content-type: text/html; charset=iso-8859-1");

The syntax is:

• To:
• Subject:
• Message:
• Headers

As per the manual on mail():

• http://php.net/manual/en/function.mail.php

The 5th parameter is:

bool mail ( string $to , string $subject , string $message [, string $additional_headers [, string $additional_parameters ]] )

Example of 5 parameters:

mail('nobody@example.com', 'the subject', 'the message', null,  '-fwebmaster@example.com');

An example from the manual on using the 4 parameters and sending as HTML:

<?php
// multiple recipients
$to  = 'aidan@example.com' . ', '; // note the comma
$to .= 'wez@example.com';

// subject
$subject = 'Birthday Reminders for August';

// message
$message = '
<html>
<head>
  <title>Birthday Reminders for August</title>
</head>
<body>
  <p>Here are the birthdays upcoming in August!</p>
  <table>
    <tr>
      <th>Person</th><th>Day</th><th>Month</th><th>Year</th>
    </tr>
    <tr>
      <td>Joe</td><td>3rd</td><td>August</td><td>1970</td>
    </tr>
    <tr>
      <td>Sally</td><td>17th</td><td>August</td><td>1973</td>
    </tr>
  </table>
</body>
</html>
';

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers
$headers .= 'To: Mary <mary@example.com>, Kelly <kelly@example.com>' . "\r\n";
$headers .= 'From: Birthday Reminder <birthday@example.com>' . "\r\n";
$headers .= 'Cc: birthdayarchive@example.com' . "\r\n";
$headers .= 'Bcc: birthdaycheck@example.com' . "\r\n";

// Mail it
mail($to, $subject, $message, $headers);
?>

Add error reporting to the top of your file(s) which will help find errors.

<?php 
error_reporting(E_ALL);
ini_set('display_errors', 1);

// Then the rest of your code

Sidenote: Displaying errors should only be done in staging, and never production.