JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EmailJS Example</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
</head>
<body>

    <!-- HTML Form -->
    <h2>Send Email</h2>
    <form id="emailForm" onsubmit="sendEmail(event)">
        <input type="text" id="name" placeholder="Your name" required>
        <input type="email" id="email" placeholder="Your email" required>
        <textarea id="message" placeholder="Your message" required></textarea>
        <button type="submit">Send Email</button>
    </form>

    <!-- Status Message -->
    <p id="status"></p>

    <!-- JavaScript Code -->
    <script type="text/javascript">
        // Initialize EmailJS with your Public Key
        emailjs.init("0pAqFysGQx8Vubt7t"); // Replace with your actual Public Key

        // Function to send email
        function sendEmail(event) {
            event.preventDefault();

            const templateParams = {
                user_name: document.getElementById("name").value,
                user_email: document.getElementById("email").value,
                message: document.getElementById("message").value,
            };

            emailjs.send("service_16hfei8", "template_yb45gnf", templateParams)
                .then(function(response) {
                    document.getElementById("status").textContent = "Email sent successfully!";
                }, function(error) {
                    document.getElementById("status").textContent = "Failed to send email.";
                });
        }
    </script>

</body>
</html>