I need help with emailing through a website. I an not doing this for school this is my own project that I am working on and I’m having some trouble with using database and what not

Here is the video
https://www.youtube.com/watch?v=IxziwuuaS3c

Setup your own to test would be best

I am using visual studio code, JavaScript and CSS, no html, next.js and node.js (I think) I change the files from js to jsx

Here is my code:

“use client”;

import Email from ’emailjs-com’;

import Link from ‘next/link’;

import { useEffect } from ‘react’; // Import useEffect hook

import ‘../emailUs/formEmail.css’;

const EmailUs = () => {

useEffect(() => {

// Wrap the code that accesses the document object inside the useEffect hook

const form = document.querySelector("form");




// Get form fields inside the function

const fullname = document.getElementsByName("name");

const email = document.getElementsByName("email");

const phone = document.getElementsByName("phone");

const subject = document.getElementsByName("subject");

const message = document.getElementsByName("message");




function sendEmail() {




  // Compose email body

  const bodyMessage = `Full Name: ${fullname.value}<br>Email: ${email.value}<br>Phone: ${phone.value}<br>Subject: ${subject.value}<br>Message: ${message.value}`;




  // Send email using Email.js

  // This code will only run in the browser environment

  Email.send({

    Host: "smtp.elasticemail.com",

    Username: "[email protected]",

    Password: "",

    To: '[email protected]',

    From: "[email protected]",

    Subject: subject.value,

    Body: bodyMessage

  }).then(

    message => alert(message)

  );

}




// Add event listener inside the useEffect hook

// This code will only run in the browser environment

form.addEventListener("submit", (e) => {

  e.preventDefault();

  sendEmail();

});




// Clean up the event listener when the component unmounts

return () => {

  // This code will only run in the browser environment

  form.removeEventListener("submit", (e) => {

    e.preventDefault();

    sendEmail();

  });

};

}, []);

return (

<div>

  {/* Header */}

  <header>

    <div className="logo">Logo</div>

    <div className="header-links">

      <Link href="/email-us">Email Us</Link>

      <Link href="/login">Login</Link>

      <Link href="/sign-in">Sign In</Link>

    </div>

  </header>




  {/* Navigation */}

  <nav style={{}}>

      <ul>

        <li><Link href="/">Home</Link></li>

        <li><Link href="/aboutUs">About Us</Link></li>

        <li><Link href="/buy">Buy</Link></li>

        <li><Link href="/sell">Sell</Link></li>

        <li><Link href="/featured-listings">Featured Listings</Link></li>

        <li>

          <a> Area </a>

          <ul className="dropdown">

            <li /*style={{paddingLeft: '20px'}}*/><Link href="/area/1">A1</Link></li>

            <li><Link href="/area/2">A2</Link></li>

          </ul>

        </li>

        <li><Link href="/propertySearch">Property Search</Link></li>

        <li><Link href="/blog">Blog</Link></li>

        <li><Link href="/contactUs">Contact Us</Link></li>

      </ul>

    </nav>




    {/* Main Content */}

   

        <main style={{paddingTop: '100px'}}>

            <div className="formForEmail" /*style={{paddingTop: '100px'}}*/>

                <form className='formForEmailDesign'>

                    <h3 className="formh3">GET IN TOUCH</h3>

                    <input className='forminputformtextarea' type="text" name="name" placeholder='Your name' required/>

                    <input className='forminputformtextarea' type="email" name="email" placeholder='Email id' required/>

                    <input className='forminputformtextarea' type="text" name="phone" placeholder='Phone no' required/>

                    <input className='forminputformtextarea' type="text" name="subject" placeholder='Subject' required/>

                    <textarea className='forminputformtextarea' name="message" row="4" placeholder='How can we help you?' required/>

                    <button className='formbutton' type="submit">Send Email</button>

                </form>

            </div>

            <script src='https://smtpjs.com/v3/smtp.js'></script>

            <script src='script.js'></script>

        </main>

        {/* Footer */}

            <footer>

                {/* Add footer content here */}

            </footer>

</div>

);

};

export default EmailUs;

formEmail.css:

/* Email Form*/

.formForEmail{

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

.formForEmailDesign{

background: #bb9c65;

display: flex;

flex-direction: column;

padding: 10px 20px;

width: 90%;

max-width: 600px;

border-radius: 10px;

color: #0f0f0f;

}

.formh3{

color: #555;

font-weight: 800;

margin-bottom: 20px;

}

.forminputformtextarea{

border: 0;

margin: 10px 0;

padding: 20px;

outline: none;

background: #f5f5f5;

font-size: 16px;

}

.formbutton{

padding: 15px;

background: #ff5361;

color: #fff;

font-size: 18px;

border: 0;

outline: none;

cursor: pointer;

width: 150px;

margin: 20px auto 0;

border-radius: 30px;

}

I try to follow the video and add other things like useEffect
Some code
And explanation on what to do.