hugo.pradier2
/
Portfolio_PRADIER
generated from Templates_CodeFirst/templateHtmlCss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
master
Hugo PRADIER 11 months ago
parent f7b5877242
commit 92d53f202d
2 changed files with 157 additions and 12 deletions
Show Stats Download Patch File Download Diff File

54
assets/js/sendEmail.js
Unescape View File

@ -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.");
}
);
}

115
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save