Question 108650 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Error 400 when using EmailJS in my HTML page

I am working on submitting form data to an email using EmailJS. I am using the example that they provided here. I have replaced the ‘YOUR_PUBLIC_KEY’ text with my public key. However, when I submit my form data I continuously get the error:
"FAILED… Object { status: 400, text: "The service ID is invalid. To find this ID, visit https://dashboard.emailjs.com/admin" }"
I am using a free subscription but I have not even sent 1 successful email so I still have 200 in my monthly quota. How do I resolve this issue?

<!DOCTYPE html>
<html>

<head>
  <title>Contact Form</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
  <script type="text/javascript">
    var onloadCallback = function() {
      grecaptcha.render('html_element', {
        sitekey: 'YOUR_SITE_KEY',
      });
    };
  </script>

  <script type="text/javascript">
    (function() {
      // https://dashboard.emailjs.com/admin/account
      emailjs.init('YOUR_PUBLIC_KEY');
    })();
  </script>
  <script type="text/javascript">
    window.onload = function() {
      document
        .getElementById('contact-form')
        .addEventListener('submit', function(event) {
          event.preventDefault();
          // generate a five digit number for the contact_number variable
          this.contact_number.value = (Math.random() * 100000) | 0;
          // these IDs from the previous steps
          emailjs.sendForm('contact_service', 'contact_form', this).then(
            function() {
              console.log('SUCCESS!');
            },
            function(error) {
              console.log('FAILED...', error);
            }
          );
        });
    };
  </script>
</head>

<body>
  <form id="contact-form">
    <input type="hidden" name="contact_number" />
    <label>Name</label>
    <input type="text" name="user_name" />
    <label>Email</label>
    <input type="email" name="user_email" />
    <label>Message</label>
    <textarea name="message"></textarea>
    <div id="html_element"></div>
    <input type="submit" value="Send" />
  </form>
  <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</body>

</html>

I tried generating a new key to test if that was the issue with no success. Under "API Settings" I have turned off "Allow EmailJS API for non-browser applications" and I turned off "Use Private Key". I even embedded the reCAPTCHA (v2 checkbox), that does work.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to resolve the issue after setting up MFA on my EmailJS account.


  2. 0

    That was happening to me, and it was because I didn’t have the account activated. when you log in, click on ’email services’ and select, for example, gmail with your account – Crislaez

    Service ID invalid when trying to use EmailJS with React

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search