formulaire de contact fonctionnel
continuous-integration/drone/push Build is passing Details

master
Hugo PRADIER 11 months ago
parent f7b5877242
commit 92d53f202d

@ -0,0 +1,54 @@
function sendEmail() {
const firstName = document.getElementById("firstname").value;
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;
const message = document.getElementById("message").value;
// Vérifier que tous les champs sont remplis
if (
firstName.trim() === "" ||
name.trim() === "" ||
email.trim() === "" ||
phone.trim() === "" ||
message.trim() === ""
) {
alert("Veuillez remplir tous les champs.");
return;
}
// Vérifier le format de l'e-mail avec une regex
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Veuillez entrer une adresse e-mail valide.");
return;
}
// Vérifier le format du numéro de téléphone avec une regex
const phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phone)) {
alert("Veuillez entrer un numéro de téléphone valide (10 chiffres).");
return;
}
const serviceID = "service_v7bbwjc";
const templateID = "template_rij5pjp";
emailjs
.send(serviceID, templateID, {
firstname: firstName,
name: name,
email: email,
phone: phone,
message: message,
})
.then(
() => {
alert("Votre message a bien été envoyé !");
document.getElementById("contact-form").reset();
},
(err) => {
alert("Désolé, une erreur s'est produite. Veuillez réessayer.");
}
);
}

@ -26,6 +26,18 @@
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
/>
<!-- EmailJS -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
></script>
<script type="text/javascript">
(function () {
emailjs.init("zIk9mEnEj0qd3wDjU");
})();
</script>
</head>
<body>
@ -65,7 +77,7 @@
<a class="nav-link" href="#experiences">Expériences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#parcours">Parcours</a>
<a class="nav-link" href="#formation">Formation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#competences">Compétences</a>
@ -93,12 +105,50 @@
Alternant Développeur
</h1>
<h2 class="fw-light">Bienvenue sur mon portfolio !</h2>
<a
href="https://www.linkedin.com/in/hugo-pradier-25b562251/"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="LinkedIn"
>
<i class="fab fa-linkedin fa-2x mt-4"></i>
</a>
<a
href="https://github.com/Hugo-P3663"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="Github"
>
<i class="fab fa-github fa-2x"></i> </a
><a
href="mailto:pradier.hugo36@gmail.com"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="Mail"
>
<i class="bi bi-envelope-fill fa-2x"></i> </a
><a
href="tel:+33 7 68 36 13 59"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="Phone"
>
<i class="bi bi-telephone-fill fa-2x"></i>
</a>
<br />
<button
class="btn btn-secondary mt-5"
onclick="window.open('./assets/pdf/CV PRADIER Hugo.pdf', '_blank')"
>
Télécharger mon CV
</button>
<!-- renvoi vers le formulaire de contact -->
<button
class="btn btn-secondary mt-5"
onclick="window.location.href='#contact'"
>
Contactez-moi
</button>
</div>
<div class="col-12 col-md-6">
<img
@ -142,7 +192,7 @@
</p>
<p>
Dans ce portfolio, je vous invite à découvrir en détail mes
compétences, mon parcours et mes diverses expériences.
compétences, ma formation et mes diverses expériences.
</p>
<p>
N'hésitez pas à me contacter pour toute question ou opportunité
@ -175,10 +225,10 @@
</div>
</section>
<!-- Parcours -->
<section id="parcours" class="py-5">
<!-- Formation -->
<section id="formation" class="py-5">
<div class="container">
<h2>Parcours</h2>
<h2>Formation</h2>
<div class="row gy-4 mt-4">
<div class="col-3">
<div class="bg-secondary h-100 w-100 py-5"></div>
@ -260,7 +310,6 @@
<ul class="list-unstyled mt-5">
<li><i class="bi bi-geo-alt-fill"></i> 63110 - Beaumont</li>
<li><i class="bi bi-telephone-fill"></i> +33 7 68 36 13 59</li>
<!-- <li><i class="bi bi-email"></i> pradier.hugo36@gmail.com</li> -->
<li>
<i class="bi bi-envelope-fill"></i>
<a href="mailto:pradier.hugo36@gmail.com">
@ -273,14 +322,15 @@
<div class="col-6">
<!-- Formulaire -->
<h3>Formulaire</h3>
<form class="row mt-5">
<form id="contact-form" class="row mt-5">
<div class="col-6 my-2">
<label for="firstname" class="form-label">Prénom</label>
<input
name="firstname"
type="text"
class="form-control"
class="form-control default-example"
id="firstname"
placeholder="Ex: John"
/>
</div>
<div class="col-6 my-2">
@ -288,8 +338,9 @@
<input
name="name"
type="text"
class="form-control"
class="form-control default-example"
id="name"
placeholder="Ex: Doe"
/>
</div>
<div class="col-12 my-2">
@ -297,21 +348,37 @@
<input
name="email"
type="email"
class="form-control"
class="form-control default-example"
id="email"
placeholder="Ex: johndoe@example.com"
/>
</div>
<div class="col-12 my-2">
<label for="phone" class="form-label">Téléphone</label>
<input
name="phone"
type="tel"
class="form-control default-example"
id="phone"
placeholder="Ex: 1234567890"
/>
</div>
<div class="col-12 my-2">
<label for="message" class="form-label">Message</label>
<textarea
name="message"
class="form-control"
class="form-control default-example"
id="message"
rows="3"
placeholder="Exemple de message"
></textarea>
</div>
<div class="col-12 my-2">
<button type="submit" class="btn btn-secondary w-100">
<button
type="button"
class="btn btn-secondary w-100"
onclick="sendEmail()"
>
Envoyer
</button>
</div>
@ -369,6 +436,26 @@
<i class="fab fa-github fa-2x"></i>
</a>
</li>
<li class="list-inline-item">
<a
href="mailto:pradier.hugo36@gmail.com"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="Mail"
>
<i class="bi bi-envelope-fill fa-2x"></i>
</a>
</li>
<li class="list-inline-item">
<a
href="tel:+33 7 68 36 13 59"
class="text-decoration-none text-dark"
data-bs-toggle="tooltip"
title="Phone"
>
<i class="bi bi-telephone-fill fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
@ -433,5 +520,9 @@
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<!-- JS Perso -->
<script src="zIk9mEnEj0qd3wDjU.js"></script>
<script src="./assets/js/sendEmail.js"></script>
</body>
</html>

Loading…
Cancel
Save