Problem in transmitting data from an HTML / PHP form - php

Question

Good evening to all,
I did a project with Argon (Bootstrap / vue.js). This is a SPA with a contact section including a contact form (name, email, message). My contact form, is established on a .vue file, who is imported into my index.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>
I established an index.php file, supposed to retrieve the data from the HTML form, and forward it to me by email. I apologize in advance if my code offends PHP enthusiasts, for my part I do not know this language at all for the moment and have tried to get by by drawing on some 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://www.namesite.com/"</script><?php
}
?>
My wish was that during the submission, if successful, a message is added specifying the sending.
I have a javascript function which prevents the default behavior and therefore does not reload the page when submitting.
Yesterday I put my project online, and there "is the drama". When I fill in the fields of the form and submit it, firstly no message is added as wanted, but well that's not what bothers me the most.
I did receive an email from my host, containing the requested fields ('Name:', 'Email:', 'Message: "), but these are empty.
After much research on the net, not being able to find an answer to my problem, I motivate myself to post this one, at the risk of being hit with sticks if the problem, my mistake, was very simple Smiley confused.
Thank you in advance and sorry for my bad english.

Answer 1

The problem is probably caused by my Vue file. I do a new php file with PhpMailer, who works well in local mode. But when i submit my form, i no longer receive email as expected.
My Vue.js file:
<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>
import BaseNav from "#/components/BaseNav";
import CloseButton from "#/components/CloseButton";
export default {
name: 'Contact',
data(){
return {
nom: '',
email: '',
message: ''
}
}
};
</script>
My PHP file:
<?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 = 'myadress#gmail.com';
$mail->Password = 'mypassword';
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
//Recipients
$mail->setFrom($email, $nom);
$mail->addAddress('myadress#gmail.com');
// 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}";
}
?>
The Javascript function for the form:
(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);
})();