diff options
Diffstat (limited to 'contact.html')
| -rw-r--r-- | contact.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..9453c88 --- /dev/null +++ b/contact.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <!-- PAGE SETUP--> + <title>peten.ca | contact</title> + <link rel="icon" type="image/x-icon" href="/images/petemcgeenobg.png" /> + <meta charset="utf-8" /> + <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" name="viewport" /> + <meta name="viewport" content="width=device-width" /> + + <!-- CSS --> + <link href="/css/blog-styles.css" rel="stylesheet" /> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" + integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" /> + + <!-- JS --> + <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" + crossorigin="anonymous"></script> + <script src="/scripts/peten.js"></script> + <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> + + <!-- FONTS --> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap" + rel="stylesheet" /> +</head> + +<body class="fade-in"> + <div class="blog-container font-montserrat"> + <aside class="sidebar"> + <img src="/images/PeteMcGee.png" alt="Profile Picture" class="profile-pic" /> + <h2 class="text-dark"><a href="index.html">peter nguyen</a></h2> + <p> + Apprentice carpenter, hobbyist programmer and mostly average high + school graduate. + </p> + <nav> + <ul> + <li class="nav-item"> + <a class="nav-link text-dark" href="projects.html">projects</a> + </li> + <li class="nav-item"> + <a class="nav-link text-dark" href="blog.html">blog</a> + </li> + <li class="nav-item"> + <a class="nav-link text-dark" href="about.html">about</a> + </li> + <li class="nav-item"> + <a class="nav-link text-dark active" href="contact.html">contact</a> + </li> + </ul> + </nav> + </aside> + + <main class="blog-content"> + <h3>Contact</h3> + + <form id="contactForm" action="contact.php" method="POST"> + <label for="name">Name:</label> + <input type="text" id="name" name="name" required> + + <label for="email">Email:</label> + <input type="email" id="email" name="email" required> + + <label class="form-label" for="message">Message:</label> + <textarea id="message" name="message" required></textarea> + + <!-- Google reCAPTCHA --> + <div class="g-recaptcha" data-sitekey="6LdCkMwqAAAAAMBqomzrbldJdtsmMNAeCzKSPHZK"></div> + + <button type="submit">Send</button> + </form> + + <!-- Response message container --> + <p id="responseMessage"></p> + + + + </main> + </div> + + <!-- Include reCAPTCHA script --> + <script src="https://www.google.com/recaptcha/api.js" async defer></script> + + <footer class="footer"> + Copyright Peter Nguyen <span id="copyright-year"></span>. All rights + reserved. + </footer> + + <!-- BOOTSTAP JS --> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" + integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" + crossorigin="anonymous"></script> + + <script> + document.getElementById("contactForm").addEventListener("submit", function (event) { + event.preventDefault(); // Prevent form from submitting normally + + let form = this; + let formData = new FormData(form); + + // Get reCAPTCHA response + let recaptchaResponse = grecaptcha.getResponse(); + if (!recaptchaResponse) { + document.getElementById("responseMessage").innerText = "Please complete the reCAPTCHA."; + return; + } + formData.append("g-recaptcha-response", recaptchaResponse); + + fetch("contact.php", { + method: "POST", + body: formData + }) + .then(response => response.text()) + .then(data => { + document.getElementById("responseMessage").innerText = data; + form.reset(); // Reset the form after submission + grecaptcha.reset(); // Reset reCAPTCHA + }) + .catch(error => { + document.getElementById("responseMessage").innerText = "Error submitting the form. Try again."; + console.error("Error:", error); + }); + }); + </script> + +</body> + +</html>
\ No newline at end of file |