I would like to display an alert after sending an email as in this portfolio: https://www.mathieu-crevoulin.com/ after when you send mail you can see this alert : E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.
contact.php
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';
if(isset($_POST["send"])){
$body = $_POST['message'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = '[email protected]';
$mail->Password = 'psw';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465;
$mail->setFrom('[email protected]');
$mail->addAddress($_POST["email"]);
$mail->isHTML(true);
$mail->Subject = 'Projet web';
$mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;
$mail->send();
header("Location: http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
}
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha512-doJrC/ocU8VGVRx3O9981 2aYUn3fuWVWvqLi1U tA2MWVzsw NVKq1PrENF03M TYBP92PnYUlXFH1ZW0FpLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
<title>Portfolio</title>
</head>
<body>
<style>
#success-message, #error-message
{
display: none;
}
</style>
<nav style="padding: 1%;">
<div >
<a href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" >
</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarNav">
<ul >
<li >
<a href="#scrollspyHeading1">Home</a>
</li>
<li >
<a href="#scrollspyHeading2">Services</a>
</li>
<li >
<a href="#scrollspyHeading3">Compétences</a>
</li>
<!-- <li >
<a href="#scrollspyHeading4">Portfolio</a>
</li> -->
<li >
<a href="#scrollspyHeading6">À Propos</a>
</li>
<li >
<a href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg
images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg
images/10705380.jpg -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<div id="carouselExampleInterval" data-bs-ride="carousel">
<div id="scrollspyHeading1">
<div data-bs-interval="3000">
<img src="images/888777555.jpeg" alt="...">
<div style="top: 0">
<h2 >Développeur indépendant</h2>
<p >SAVINOV Denis</p>
</div>
</div>
</div>
<div data-aos="fade-right">
<h5 ><strong>Intégration Web</strong></h5>
<p >Des intégrations (X)HTML / CSS respectueuses des
standards du Web.
</p>
</div>
<div data-aos="fade-right">
<i ></i>
</div>
<div data-aos="fade-right">
<h5 ><strong>Développements spécifiques</strong></h5>
<p >Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
</div>
<div data-aos="fade-right">
<i ></i>
</div>
<div data-aos="fade-right">
<h5 ><strong>Référencement naturel</strong></h5>
<p >Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div data-aos="fade-right">
<i style="width: 100%;"><img src="images/5902216.png" alt="" style="width: 100%;"></i>
</div>
</div>
</div>
<div >
<div data-aos="fade-up">
<div >
<img src="images/index1.jpeg" alt="...">
</div>
</div>
</div>
<div >
<div >
<div data-aos="fade-left">
<i style="width: 100%;"><img src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png" alt="" style="width: 100%;"></i>
</div>
<div data-aos="fade-left">
<h5 ><strong>Conception graphique & Webdesign</strong></h5>
<p >Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
</div>
<div data-aos="fade-left">
<i style="width: 100%;"><img src="images/3938579.png" alt="" style="width: 100%;"></i>
</div>
<div data-aos="fade-left">
<h5 ><strong>Dynamisme des pages</strong></h5>
<p >Des animations de contenu non intrusives
pour embellir votre projet.</p>
</div>
<div data-aos="fade-left">
<i style="width: 100%;"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i>
</div>
<div data-aos="fade-left">
<h5 ><strong>Interface d'administration</strong></h5>
<p >Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
</div>
<div data-aos="fade-left">
<i style="width: 100%;"><img src="images/1027666.png" alt="" style="width: 100%;"></i>
</div>
<div data-aos="fade-left">
<h5 ><strong>Responsive design</strong></h5>
<p >Compatible tous supports, tablette & application
mobile.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393785.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h1 style="color: white;">Développement Web Responsive
</h1>
<h4 style="color: white;">Compatible Mobile, Tablettes &
P.C</h4>
</div>
</div>
</div>
</div>
<div >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(521120.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h1 style="color: white;"> PME, associations ou
particuliers,
je réponds à vos besoins en développement web </h1>
</div>
</div>
</div>
</div>
</br>
<div id="scrollspyHeading6" style="padding-bottom: 3%;">
<h1 style="padding-top: 4%;" data-aos="fade-down">
<g>À PROPOS</g>
</h1>
<h4 style="color: rgb(117, 111, 111);" data-aos="fade-down">Je suis développeur web freelance et j'aime ça !
</h4>
<div >
<div data-aos="fade-right">
<h4 >Un développeur web passionné !</h4>
<p >Ma passion pour le développement web commence en 2003 et m'a
demandé un
changement
radical de cursus
afin de pouvoir pleinement l'exploiter.</br> </br>
Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
divers projets développés.</br> </br>
En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un
plus
large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
</div>
<div data-aos="fade-up">
<div >
<div >
<img src="images/index1.jpeg" alt="...">
</div>
</div>
</div>
<div data-aos="fade-left">
<h4 >Expérience en développement</h4>
<p > Mon expérience acquise au fil des projets me permet de mieux
comprendre les
attentes d'un client
et de
répondre précisement au besoin demandé en fonction du domaine d'activité.</p>
<p >Du site vitrine au projet plus complexe, je vous propose une
expertise et un
développement web qui
correspond à vos attentes & à vos besoins.</p>
<h3 >Un tarif adapté à votre projet</h3>
<p > Travaillant régulièrement avec des PME, associations ou
particuliers, je vous
propose des solutions
à
votre portée & adaptée à votre budget.</p>
</div>
</div>
</div>
<div >
<div style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393769.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div style="height: 200px;">
<div >
<h1 style="color: white;"> Un interlocuteur unique pour
un site internet
réussi
!
</h1>
</div>
</div>
</div>
</div>
<div id="scrollspyHeading7">
<h1 style="padding-top: 4%;" data-aos="fade-down">
<b>CONTACTEZ-MOI</b>
</h1>
<h3 style="background-color: rgb(245, 245, 245);padding: 1%;" data-aos="fade-down"><b>Une
idée ? Un projet ? N'hésitez pas à
demander un devis !
[GRATUIT]</b></h3>
<div style="padding: 3%;">
<div >
<div >
<div >
<div data-aos="fade-right">
<div >
<i ></i>
</div>
<div style="padding-top: 3%; padding-bottom: 3px; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>ADRESSE</b></h6>
<p>45, allée des Grives 83390 Cuers</p>
</div>
<div >
<i ></i>
</div>
<div style="padding-top: 3%; padding-bottom: 3px; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>Téléphone</b></h6>
<p>( 33) 6.15.42.10.45</p>
</div>
<div >
<i ></i>
</div>
<div style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>E-mail</b></h6>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
<div >
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954510748!2d7.692039647318505!3d48.56905316137844!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1:0x971a483118e7241f!2sStrasbourg!5e0!3m2!1sen!2sfr!4v1659196020939!5m2!1sen!2sfr" width="300" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-aos="fade-up"></iframe>
<!-- <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813:0x48d94c0efba762bd!2sWoronesch, Oblast Woronesch, Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe> -->
</div>
<div data-aos="fade-left">
<form id="contactForm" action="contact.php" method="POST">
<div >
<span id="basic-addon1"><i ></i></span>
<input type="text" id="name" name="name" placeholder="Nom Prénom"
aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
</div>
<!-- Email address input -->
<div >
<span id="basic-addon1">@</span>
<input type="text" id="email" name="email" placeholder="Email"
aria-label="email" aria-describedby="basic-addon1" required>
</div>
<div >
<span id="basic-addon1"><i ></i></span>
<input type="text" id="phone" name="phone" placeholder="Téléphone"
aria-describedby="basic-addon2" required>
</div>
<!-- Message input -->
<div >
<textarea id="exampleFormControlTextarea1" rows="3"
placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
</div>
<!-- Form submit button -->
<div >
<button name="send" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer style="background-color: #2c2c2c;">
<div style="padding: 5%;">
<div >
<div data-aos="fade-right">
<h6 style="color: white;"> Développeur Informatique Indépendant</h6>
<p >Développeur Web front & back-end & Webdesigner freelance, je suis à votre
disposition pour répondre à
tout type
de projets de création de sites internet, de développement spécifique ou d'applications web.
</p>
<p >Passionné par les technologies liées au Web, je mets mes compétences au
service de vos besoins dans
divers
domaines.</p>
</div>
<div data-aos="fade-left">
<h6 style="color: white;"> Mathieu CRÉVOULIN</h6></br>
<a href="https://goo.gl/maps/XD9CrQDL9WXZWrWV6" style="margin-bottom: 0; text-decoration: none;"> <i > 45, allée
des Grives 83390 Cuers </i></a></br>
<a href="https://api.whatsapp.com/send?phone=33651289271" style="margin-bottom: 0; text-decoration: none;"> <i ></i> ( 33)
6.15.42.10.45</a>
<p style="margin-bottom: 0;"> <i ></i>
[email protected] </p>
<p style="margin-bottom: 0;"><i ></i>
www.mathieu-crevoulin.com</p>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
const $this = $(this);
// disable submit button
const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');
// send message
$.ajax({
type: 'POST',
url: 'contact.php',
data: $this.serialize(),
success: function(data){
alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
$this[0].reset(); // reset form
},
error: function(jqXHR, textStatus, errorThrown){
alert('An error occurred. Please try again')
},
complete: function(jqXHR, textStatus){
// enable submit button
$button.text('Submit').removeAttr('disabled');
}
})
})
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>
I would like to do the same so that after sending an email there is an alert that appears as in the example I showed (without loading the page or sending to a new page). I tried to create a new page with an alert but I wish its done like in the example I showed. How should I do?
CodePudding user response：
You can achieve this using AJAX. Try this
contact.php file
if(isset($_POST["send"])){
$body = $_POST['message'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = '[email protected]';
$mail->Password = 'psw';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465;
$mail->setFrom('[email protected]');
$mail->addAddress($_POST["email"]);
$mail->isHTML(true);
$mail->Subject = 'Projet web';
$mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;
$mail->send();
// header("Location: http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
echo 'sent';
exit;
}
index.php
<div data-aos="fade-left">
<form id="contactForm" action="contact.php" method="POST">
<div >
<span id="basic-addon1"><i ></i></span>
<input type="text" id="name" name="name" placeholder="Nom Prénom"
aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
</div>
<!-- Email address input -->
<div >
<span id="basic-addon1">@</span>
<input type="text" id="email" name="email" placeholder="Email"
aria-label="email" aria-describedby="basic-addon1" required>
</div>
<div >
<span id="basic-addon1"><i ></i></span>
<input type="text" id="phone" name="phone" placeholder="Téléphone"
aria-describedby="basic-addon2" required>
</div>
<!-- Message input -->
<div >
<textarea id="exampleFormControlTextarea1" rows="3"
placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
</div>
<!-- Form submit button -->
<div >
<button name="send" type="submit">Submit</button>
</div>
</form>
</div>
Add this before the closing body tag. For submitting the form asynchronously
<script>
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
const $this = $(this);
// disable submit button
const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');
// send message
$.ajax({
type: 'POST',
url: 'contact.php',
data: $this.serialize(),
success: function(data){
alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
$this[0].reset(); // reset form
},
error: function(jqXHR, textStatus, errorThrown){
alert('An error occurred. Please try again')
},
complete: function(jqXHR, textStatus){
// enable submit button
$button.text('Submit').removeAttr('disabled');
}
})
})
})
</script>