8721 sujets

Développement web côté serveur, CMS

Problème dans la transmission des données d'un formulaire HTML/PHP

Bonsoir à tou(te)s,
J'ai réalisé un projet avec Argon (Bootstrap/vue.js). Il s'agit d'une SPA avec une section contact comprenant un formulaire de contact (nom, mail, message). Mon formulaire de contact, établi donc sur un fichier .vue, est importé sur mon idex.html:


<form class="needs-validation col-md-8 from-right" novalidate id="myForm" method="post" action="./index.php">
                <div class="form-column">
                    <div>
                        <label for="nom">Saisissez votre nom</label>
                        <input type="text" class="form-control" id="nom" required placeholder="Votre nom" name="nom">
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir votre nom.
                        </div>
                    </div>
                    <div>
                        <label for="email" class="mt-3">Saisissez votre email</label>
                        <input type="email" class="form-control" id="email" placeholder="Votre email" name="email" required>
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir un email valide.
                        </div>
                    </div>
                    <div>
                        <label for="message" class="mt-3">Saisissez votre message</label>
                        <textarea class="form-control" id="message" placeholder="Votre message ici" name="message" required></textarea>
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir votre message.
                        </div>
                    </div>
                </div>                      
                <button class="btn btn-primary my-5 mx-auto" type="submit">Envoyer</button>
                <div id="retourenvoimessage"></div>
            </form>


Me basant sur des démonstrations de ce forum, j'ai établi un fichier index.php, supposé récupérer les données du formulaire HTML, et me les retransmettre par email. D'avances mes excuses si mon code froisse des passionnés de PHP, pour ma part je ne connais pour le moment pas du tout ce langage et ai tenté de me débrouiller en piochant sur de la documentation:


<?php
$nom = $_POST['nom'];
$email = $_POST['email'];
$message = $_POST['message'];
$dest = "fer.mathieu@gmail.com";
$sujet = "Demande de contact";
$corp = "Nom : $nom\n Email : $email\n Message : $message";
$headers = "From: $nom\n Reply-To: $email";
if (mail($dest, $sujet, $corp, $headers)) {
    ?><script>document.querySelector('#retourenvoimessage').textContent="Message bien envoyé, merci!"</script><?php
} else {
    ?><script>alert("Oups, un problème est survenu lors de l'envoi du message, désolé...");document.location.href="http://monnomdedomaine/"</script><?php
}
?>


Mon souhait était que lors de la soumission, en cas de succès, un message soit ajouté spécifiant l'envoi.
J'ai une fonction Javascript qui prévient le comportement par défaut et ne recharge donc pas la page lors de la soumission.

J'ai voulu tester en local le formulaire qui semblait alors fonctionner. J'ai hier mis en ligne mon projet, et là, "c'est le drame". Lorsque je rempli les champs du formulaire et le soumet, premièrement aucun message n'est ajouté comme voulu, mais bon limite ce n'est pas ce qui m'embête le plus.
Je reçois bien un mail provenant de mon hébergeur, contenant les champs demandés ('Nom:', 'Email:', 'Message:"), mais ceux-ci sont vides.

Après moultes recherches sur le net, ne parvenant pas à trouver réponse à mon problème, je me motive à poster celui-ci, au risque de prendre des coups de bâtons si le problème, mon erreur, était simplissime Smiley confused .

Merci d'avance et bonnes fêtes à vous.


Edit: Je me rends compte que finalement je ne reçois pas tout a fait les mails lors de la soumission, mais plutôt de manière intempestive (3x par heure) et lorsque j'upload mon fichier php sur le serveur Smiley sweatdrop
Modifié par Yoji (21 Dec 2020 - 10:40)
Merci pour ton conseil gray-magic.
Je l'ai suivi.

Résultat, le formulaire PHP fonctionne très bien, merci. Lorsque je le passe directement en url en ayant pris soin au préalable de remplacer les variables attendues (nom, email, message) par du texte, je reçois bien ces données par mail, et je n'ai plus de mails intempestifs comme indiqué dans mon edit.

Mais la récupération des données saisies dans le formulaire par ma page php, semble ne toujours pas fonctionner. Lors de la soumission, je suis bien redirigé et un message indiquant que le mail a bien été transmis s'affiche, mais je ne reçois rien sur ma boîte mail...

Je pense que mon problème provient donc de mon fichier vue.js. Je vous communique l'ensemble des portions de code concernées.

Fichier vue.js :


<form class="needs-validation col-md-8 from-right" novalidate id="myForm" method="post" action="index.php">
                <div class="form-column">
                    <div>
                        <label for="nom">Saisissez votre nom</label>
                        <input v-model="nom" type="text" class="form-control" id="nom" required placeholder="Votre nom" name="nom">
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir votre nom.
                        </div>
                    </div>
                    <div>
                        <label for="email" class="mt-3">Saisissez votre email</label>
                        <input v-model="email" type="email" class="form-control" id="email" placeholder="Votre email" name="email" required>
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir un email valide.
                        </div>
                    </div>
                    <div>
                        <label for="message" class="mt-3">Saisissez votre message</label>
                        <textarea v-model="message" class="form-control" id="message" placeholder="Votre message ici" name="message" required></textarea>
                        <div class="valid-feedback">
                            C'est noté!
                        </div>
                        <div class="invalid-feedback">
                            Merci de saisir votre message.
                        </div>
                    </div>
                </div>                      
                <button class="btn btn-primary my-5 mx-auto" type="submit">Envoyer</button>
            </form>
        </div>            
    </section>
</template>

<script>
export default {
    name: 'Contact',
    data(){
        return {
            nom: '',
            email: '',
            message: ''
        }
    }
};
</script>


Fichier PHP:


<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'lib/PHPMailer/src/Exception.php';
require 'lib/PHPMailer/src/PHPMailer.php';
require 'lib/PHPMailer/src/SMTP.php';

$nom = $_POST['nom'];
$email = $_POST['email'];
$message = $_POST['message'];

// Instantiation and passing `true` enables exceptions
$mail = new PHPMailer(true);

try {
    //Server settings
    $mail->SMTPDebug = 2;                                                
    $mail->isSMTP();                                                            
    $mail->Host       = 'smtp.gmail.com';                            
    $mail->SMTPAuth   = true;                                    
    $mail->Username   = 'monadresse@gmail.com';            
    $mail->Password   = 'monmotdepasse';                      
    $mail->SMTPSecure = 'ssl';                                  
    $mail->Port       = 465;                                   

    //Recipients
    $mail->setFrom($email, $nom);                              
    $mail->addAddress('mon adresse mail');                 
    
    // Content
    $mail->isHTML(true);                                
    $mail->Subject = 'Contact via portfolio';
    $mail->Body    = "Nom : $nom\n 
                      Email : $email\n 
                      Message : $message";
    
    $mail->send();
    echo 'Message bien envoyé';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

?>


Fonction liée au formulaire dans le main.js:


(function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();


Encore une fois, merci d'avance pour vos retours
Modifié par Yoji (21 Dec 2020 - 18:33)
Hi,

Passe en mode debug et test déjà la connexion SMTP :
$mail->SMTPDebug = \SMTP::DEBUG_OFF;
if($mail->smtpConnect()){
echo "connexion validée par le serveur smtp";
}


Ensuite tu ne peu pas dire 'Message bien envoyé' sans testé le retour de la fonction send(). Qui d'ailleurs s'utilise plutôt comme ça 
if (!$mail->send()) {
      echo $mail->ErrorInfo;
 } else{
  echo 'Message bien envoyé';
}


Enfin fait un bon gros :
var_dump($_POST['nom']);


ça te permettra de voir où ça bug.
Tu peu aussi analyser la trame réseau via F12 > networks et regarder si les paramètres sont correctement envoyés.
Encore merci pour ton retour.
5 minutes après avoir posté ce message, cela a cessé de fonctionner sans que je n'ai changé quoi que se soit... Je ne comprends pas...
J'ai un message d'erreur:
Invalid address: (From):
Message could not be sent. Mailer Error: Invalid address: (From):

Pour le debug, ne s'agit-il pas de ce que j'ai à la ligne $mail->SMTPDebug = 2; ??
Initialement lorsque je passait mon fichier php en url, le déroulé de traitement s'affichait et là connexion au SMTP se faisait sans problème.

Pour ce qui est de la mention 'message bien envoyé', l'instruction try/catch ne joue t-elle pas justement le rôle de test de réalisation de fonction send()? Celle-ci se trouvant dans les instructions du try.
Pas de soucis.
1/ Le message d'erreur est super clair : "Invalid address: (From):" regarde donc ce que tu donne à la propriété From. (Par ailleurs c'est From pas setFrom).

2/ From c'est l'expéditeur (vue que je vois que tu crois assigner le destinataire d'après ton commentaire.

3/ Mea-culpa pour le debug j'avais pas fais attention à ta ligne (et je t'ai écris une bêtise en plus c'est \SMTP::DEBUG_ON).

4/ Conditionner avec des try/catch c'est déjà mal utiliser les try/catch. Les instructions try/catch servent à gérer les erreurs, rien de plus. L'instruction finally peut également servir à réaliser une action impérative (ex : fermer une connexion). petite citation "C'est une très mauvaise idée que d'utiliser les exceptions pour contrôler le flux"
Sujet clos
Aller à