Can't disable form success message

Support
1

I have a simple form and script that submits it. I want to disable the success message and keep users on the page. I thought e.preventDefault() would do that.

<form data-netlify="true" id="notfound" name="notfoundForm" method="POST" netlify-honeypot="bot-field">
  <input class="hidden" type="hide" name="form-name" value="notfoundForm"
  />
  <p class="hidden">
    <label>
      Beep-Boop. Bot-field <input name="bot-field" />
    </label>
  </p>
  <input id="url" class="hidden" name="url" />
  <input id="date" class="hidden" name="date" />
  <button type="submit" id="submit-button" class="hidden"></button>
</form>

<script>
const form = document.getElementById('notfound');
var url = document.getElementById('url');
var date = document.getElementById('date');
url.value = window.location.href;
date.value = new Date();
form.submit(function (e) {
  e.preventDefault();
  const formData = new FormData(e.target)

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  }).then(() => {
      console.log('Form submission success')
    })
    .catch(error => {
      console.error('Form submission error:', error)
    })
})
</script>
2

e.preventDefault() works in the context of an alert on an ajax submitted form. You may want to try using the sample here and see if that works: Forms setup | Netlify Docs

Another option that could work be to redirect to the same page: Forms setup | Netlify Docs

3

Hi @katrina-r , I edited the code slightly and realized that the same code works for one of my sites but not the other. They are deploying the same form.

Working: https://melodic-taiyaki-fce239.netlify.app/hy
Not working: https://gentle-torte-7343b2.netlify.app/hy

4

Both those URLs result in a 404 @jake1 when accessed directly

Screenshot 2023-04-25 at 6.56.31 pm
Screenshot 2023-04-25 at 6.56.31 pm2848×2660 237 KB

5

Yes, they are supposed to. The form triggers when the 404 page is loaded. We track the 404s using the forms.

In the first site, Netlify receives the form data. In the second, it doesn’t.

6 
<form id="notfound" method="POST" name="notfoundForm">
  <input class="hidden" type="hide" name="form-name" value="notfoundForm">
  <p class="hidden">
    <label>
      Beep-Boop. Bot-field <input name="bot-field">
    </label>
  </p>
  <input id="url" class="hidden" name="url">
  <input id="date" class="hidden" name="date">
  <button type="submit" id="submit-button" class="hidden"></button>
</form>
<script>
const form = document.getElementById('notfound');
var url = document.getElementById('url');
var date = document.getElementById('date');
url.value = window.location.href;
date.value = new Date();
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target)

fetch("/", {
  method: "POST",
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: new URLSearchParams(formData).toString(),
}).then(() => {
    console.log('Form submission success')
  })
  .catch(error => {
    console.error('Form submission error:', error)
  })
}
form.addEventListener('submit', handleSubmit)
document.getElementById('submit-button').click();
</script>

The code is identical in both sites.

7

I removed the hidden class from the submit button on both pages to manually submit. In neither case was I redirected. In the console I see “Form submission success”

I can’t help but think there are much better ways to track 404 page hits than by using Netlify Forms. First thought is to call a function (edge or lambda) that logs details to a data store.

This isn’t obviously a solution to the form issue.

8

Yes, it submits. The issue is netlify does not receive the data on the second site. But it does on the first site.

9

If you have access to my site, you can see the form submissions are empty for the second site.

10

Is the form recognised in the Netlify dashboard for the site that doesn’t work? Are the form fields the same in the dashboard and the page the form is on?

No, I don’t have access to the site (other than the front end) as I don’t work for Netlify.

11

I thought, as per the title of this thread and first post, the issue was the “success message”. Now you’re saying that it is not the issue, rather that you are not receiving submissions.

12

originally, yes. But now it’s a different issue. @jasiqli are you in Australia? I had a form submission on the second site come through 4 hours ago. I’m thinking it worked when you clicked the submit button.

13

Indeed I am.

I also tested using document.forms.notfound.submit() on both forms (this resulted in a redirect to the default “Thank You” page) so you may see numerous submissions in a short period of time.

14

so it does seem like there’s a bug here in Netlify. It triggers when you click the submit button but not with document.getElementById('submit-button').click();

15

It seems more like an issue in the front end code that is handling the submission than a back end issue receiving it.