Can't print console.log()

[ahsouri]

Hi,

I'm trying to link the subscription and contact forms to an API email service (https://www.emailjs.com/docs/sdk/send/). One thing I noticed is that I don't see anything being printed in the console log. I use "npm run dev" on a linux machine. I tried to test out this by simply adding a console.log() in the index.astro and nothing shows up. Why is that? Has anyone been successful linking the forms to an API email service?

Best,

[mearashadowfax]

Hey @ahsouri! I used contact/subscription forms in Astro in my other projects, and it worked just fine. Although I wasn't using EmailJS, here's something I found online that might help: stackoverflow Basically, if you're using UI framework components, you should add client:load or even better client:visible to your component, e.g., <Contact client:visible />. Hope this would point in the right direction!

[ahsouri]

Thanks, I used client:visible and it said astro can't handle it. I gave up. I decided to create a javascript and import that directly:

import { useState } from "react";

const EmailFooterInput = () => {
  const [result, setResult] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const json = JSON.stringify(Object.fromEntries(formData));

    setResult("Sending...");

    fetch("https://api.web3forms.com/submit", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: json,
    })
      .then(async (response) => {
        let json = await response.json();
        if (response.status === 200) {
          setResult(json.message);
        } else {
          setResult(json.message);
        }
      })
      .catch((error) => {
        console.error(error);
        setResult("Something went wrong!");
      })
      .finally(() => {
        form.reset();
        setTimeout(() => {
          setResult("");
        }, 5000);
      });
  };

  return (
    <form id="form" className="needs-validation" onSubmit={handleSubmit}>
      <input type="hidden" name="access_key" value="XXXXXXXXXXXXXXXXXXXXXXXXXX" />
      <input type="checkbox" className="hidden" style={{ display: "none" }} name="botcheck" />
      <div className="mb-5">
        <input type="text" placeholder="Full Name" name="name" required className="form-input" />
      </div>
      <div className="mb-5">
        <input type="email" placeholder="Email Address" name="email" required className="form-input" />
      </div>
      <div className="mb-3">
        <textarea name="message" placeholder="Your Message" required className="form-textarea"></textarea>
      </div>
      <button type="submit" className="submit-button">Send Message</button>
      <div id="result" className="result">{result}</div>
    </form>
  );
};

export default EmailFooterInput;

[ahsouri]

Forgot to say that I also decided to use Web3Forms instead of EmailJS.