contact.html

<!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 rel="stylesheet" href="contactStylesheet.css">
    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <link rel="icon" href="assets/logo.png">
    <title data-i18n="contact">Contact</title>
    <script src="translations.js"></script>
    <script src="languageSwitcher.js"></script>
    <script src="https://kit.fontawesome.com/673bbe22a9.js" crossorigin="anonymous"></script>
</head>

<body>
    <header>
        <div class="logo" data-i18n="welcome">Welcome to Free Fall</div>

        <div class="language-switcher">
            <select id="languageSelect" onchange="setLanguage(this.value)">
                <option value="en" data-i18n="english">English</option>
                <option value="bg" data-i18n="bulgarian">Bulgarian</option>
            </select>
        </div>

        <div class="hamburger">
            <span class="fas fa-bars"></span>
        </div>

        <nav class="nav-bar">
            <ul>
                <li><a href="index.html" data-i18n="home">Home</a></li>
                <li><a href="templates.html" data-i18n="startSimulation">Start Simulation</a></li>
                <li><a href="information.html" data-i18n="information">Information</a></li>
                <li><a href="" class="active" data-i18n="contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <script>
        hamburger = document.querySelector(".hamburger");
        hamburger.onclick = function () {
            navBar = document.querySelector(".nav-bar");
            navBar.classList.toggle("active");
        }
    </script>

    <div class="container">
        <form onsubmit="sendEmail(); reset(); return false;">
            <h3 data-i18n="contactUs">Contact Us</h3>
            <input type="text" id="name" data-i18n-placeholder="name" placeholder="Your Name" required>
            <input type="email" id="email" data-i18n-placeholder="email" placeholder="Your Email" required>
            <input type="text" id="phone" data-i18n-placeholder="phone" placeholder="Your Phone Number (optional)">
            <textarea id="message" rows="10" data-i18n-placeholder="message"
                placeholder="What would you like to contact me about?" required></textarea>
            <button type="submit"><strong data-i18n="send">Send</strong></button>
        </form>
    </div>

    <script>
        function sendEmail() {
            let name = document.getElementById("name");
            let email = document.getElementById("email");
            let phone = document.getElementById("phone");
            let ebody = '<b>Name: </b>${name.value} <br><b>Email: </b>${email.value}<br><b>Phone: </b>${phone.value}'

            Email.send({
                SecureToken: "57fe2734-ea05-4387-98fe-f6b99a893cb8",
                To: 'simplifiedphysicsit@gmail.com',
                From: email.value,
                Subject: "Contact Email From: " + email.value,
                Body: ebody
            }).then(
                message => {
                    if (message === "OK") {
                        alert(getTranslation('emailSent'));
                    } else {
                        alert(getTranslation('emailError'));
                    }
                }
            );
        }
    </script>
</body>

</html>