Netlify form is active but won't recieve submissions

Hi there. I’ve been working on trying to get the contact form on my website up and running. Netlify will show it as an active form through the portal, but no matter what I can’t seem to receive any submissions.

You can view my website here, if you scroll to the bottom you’ll find the contact form in question.
Here’s the html for my form:

<form name="contact" id="contact-form" method="post" action="" onsubmit="validateForm()" data-netlify="true">
    <label for="name" id="name">NAME</label>
    <input type="text" name="name" class="input" id="name" placeholder="somebody..." autocomplete="nope"
        data-tippy-content="Let us know who's calling">
    <label for="email" id="email">EMAIL</label>
    <input type="text" name="email" class="input" id="email" placeholder="someone@something.com..." autocomplete="nope"
        data-tippy-content="How do we get back to you?">
    <label for="subject" id="subject">SUBJECT</label>
    <input type="text" name="subject" class="input" id="subject" placeholder="something..." autocomplete="nope"
        data-tippy-content="Enter a subject for your message">
    <label for="message" id="message">MESSAGE</label>
    <textarea name="message" class="input" id="message" placeholder="some text" autocompete="nope"
        data-tippy-content="What's on your mind?"></textarea>
    <div id="captcha" data-netlify-recaptcha="true"></div>
    <button type="submit" id="submit">SUBMIT</button>
</form>

Here’s the JavaScript behind my form:

function validateForm() {
  event.preventDefault();

  var form = document.forms[0];

  var name = form.elements["name"].value;
  var email = form.elements["email"].value;
  var subject = form.elements["subject"].value;
  var message = form.elements["message"].value;

  if (name == null || name == "") {
    returnMessage("Please enter your name.", false);
    return false;
  }
  if (email == null || email == "" || !validateEmail(email)) {
    validateEmail(email);
    returnMessage("Please enter a valid email address.", false)
    return false;
  }
  if (subject == null || subject == "") {
    returnMessage("Please enter your subject.", false)
    return false;
  }
  if (message == null || message == "") {
    returnMessage("Please enter your message.", false)
    return false;
  } else {
    returnMessage("Thank you! We'll be in touch asap!", true);
    return true;
  }
}

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

function returnMessage(message, condition) {
  if (!condition) {
    $("#form-response").css("background", "#ff6666");
    $("#form-response").fadeIn(400).show().delay(3000).fadeOut(400);
  } else {
    $("#form-response").css("background", "#00e673");
    $("#form-response").fadeIn(400).show().delay(3000).fadeOut(400);
  }
  $("#form-response > p").text(message);
}

$("#contact-form").submit(function (e) {
  e.preventDefault();
});

I’ve cycled through a number of solutions posted here on the forums and other forums regarding the matter, but I haven’t been able to come to any kind of solution.
Any kind of help would be much appreciated!

Hiya, sorry you are having trouble getting your forms to work.

This Common Issue is the first port of call to debug any forms issues.

Sounds like you have already tried looking around the forums, but FYI these are the topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else and there is a solution.

Given that you have some complex branching in there, have you verified that that isn’t the source of the problem?

Also keep in mind that we do filter out spammy-seeming submissions, such as “test@test.com” - you’ll want to test with real-seeming data.

Let us know if this doesn’t help.

Hi Perry!
I took a look through the debugging post you mentioned earlier, however none have really seemed to work.
I’ve tried to disable my JavaScript code, so that I could verify whether that was the issue, but that doesn’t appear to be it.
Even if Netlify does filter out spammy submissions, shouldn’t it still go through registered as one? If that’s what the portal suggests anyways, with the option to view spam-marked submissions.

I just took a look at some older versions of my site. It seems to have worked at some point, but stopped working after an update - just not sure which one.
Spammy doesn’t seem to be an issue either, as on this form and when I tested said form before, I could literally submit nothing, and it would be recieved by Netlify.
I can indeed send through to the old form, but not the new. But I can’t think of what would’ve gone wrong. Does anything in my JavaScript code look off to you?

My old code looks like this:

<form name="contact" id="contact-form" method="POST">
<input type="hidden" name="form-name" value="contact">
    <label for="name" id="name">NAME</label>
    <input type="text" name="name" id="name" placeholder="..." autocomplete="nope">
    <label for="email" id="email">EMAIL</label>
    <input type="text" name="email" id="email" placeholder="..." autocomplete="nope">
    <label for="subject" id="subject">SUBJECT</label>
    <input type="text" name="subject" id="subject" placeholder="..." autocomplete="nope">
    <label for="message" id="message">MESSAGE</label>
    <textarea name="message" id="message" placeholder="..." autocompete="nope"></textarea>
    <button type="submit" id="submit">SUBMIT</button>
</form>

Other than the fact it doesn’t contain the Netlify recaptcha, I’m not sure what might be causing issues.

Hi @tonycre8!

It looks as if something in your script might be preventing the form from submitting.

If you can’t see any obvious cause of the problem after checking your form script, I would suggest starting again with a clean Netlify Form (like this example in the official docs) and then gradually add your own functionality to it until it stops working, thus exposing where a problem might exist in your code.

Or if it it helps, you can one-click deploy this starter project which includes a working Netlify Form, and use that for testing instead.

Thanks a bunch Dan!
I’ve taken a look at it.
At first, it seemed as if validation wasn’t running before I submitted the form. After fixing that though, it seems the reason was because I was clearing the form before I submitted it!
I also added some extra code based on the resources you sent me, to ensure the form is validated before it posts the message.

$("#contact-form").submit(function (e) {
  e.preventDefault();
  
  if (validateForm() == true) {
    var $form = $(this);
    $.post($form.attr("action"), $form.serialize());
    $("#contact-form").trigger("reset");
  }
});

Thanks so much guys!

That’s great news :+1: glad you got it working!

1 Like

great teamwork folks! glad its working now.