Form submission works in one site but not another

I have two sites:

Each of these sites contains the same code to submit forms to Netlify. In https://melodic-taiyaki-fce239.netlify.app/, the form submission works. I get the submissions in the UI. However, in the other site, I get no submissions in the UI.

Hiya,

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

If you are still having problems, please provide more information such as what you have already tried, a link to your live form and your repo/code!

Hello, the forms are in the linked sites.

One form is submitted when you click the thumbs in the footer or in the right sidebar.
Another form is submitted automatically when the 404 page loads.

<script>
const thumbs = document.querySelectorAll('.thumb');
const positiveModal = document.getElementById('positive');
const negativeModal = document.getElementById('negative');
var currentForm;

thumbs.forEach(function(thumb) {
  thumb.addEventListener('click', function() {
    if (thumb.id.indexOf('up') !== -1) {
      positiveModal.classList.toggle("hidden");
      currentForm = positiveModal
    } else if (thumb.id.indexOf('down') !== -1) {
      negativeModal.classList.toggle("hidden");
      currentForm = negativeModal
    }
  });
});

const handleSubmit = function (e) {
  e.preventDefault();
  const currentUrl = 'https://grand-lokum-795b84.netlify.app/current/introduction/'
  const beta = false
  var version = '';
  version = 21.11

  const form = event.target;
  var formData = new FormData(form);

  formData.set('version', version)
  formData.set('url', currentUrl)
  formData.set('beta', beta)

  const formFields = e.target.closest('form')
  const feedback = formFields.querySelector('input[name="feedback"]:checked').value

  formData.set('positiveFeedback', feedback)
  formData.set('otherText', (form.querySelector('textarea[name="otherText"]').value))

  formData.set('email', (form.querySelector('input[name="email"]').value))

  formData.set('date', new Date().toISOString())
  formData.set('navigator', JSON.stringify({
    appName: window.navigator.appName,
    appVersion: window.navigator.appVersion,
    platform: window.navigator.platform,
    userAgent: window.navigator.userAgent,
    language: window.navigator.language
  }))

  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  }).then(() => {
      console.log('Form submission success')
      clearFeedbackModal()
    })
    .catch(error => {
      console.error('Form submission error:', error)
    })
}
function clearFeedbackModal() {
  var modalBody = currentForm.querySelector('.feedback-modal-body');
  modalBody.innerHTML = `
  <div class="form-field wrapper">
  <span class="material-icons MuiIcon-root" aria-hidden="true" style="color: green;overflow: hidden;width: 1em;height: 1em;font-size: 4em;">checkmark</span>
  <h4>Thank you for your feedback!</h4>
  <p>We appreciate your input and will use it to improve our documentation.</p>
  <div class="form-field wrapper">
    <button onclick="closeForm(event)" class="button close">Close</button>
  </div>
</div>
  `;
}

function closeForm(e) {
  e.preventDefault()
  currentForm.classList.toggle("hidden");
}
</script>
<script>
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)
  })
}
window.addEventListener("DOMContentLoaded", (event) => {
  const form = document.getElementById('notfound');
  form.addEventListener('submit', handleSubmit)
  var url = document.getElementById('url');
  var date = document.getElementById('date');
  url.value = window.location.href;
  date.value = new Date();
  document.getElementById('submit-button').click();
  });
</script>```

The forms are working correctly in https://melodic-taiyaki-fce239.netlify.app/ but not in https://gentle-torte-7343b2.netlify.app/

1 Like

The one where it doesn’t work, you’ve configured a 301 redirect:

As mentioned in those guides, redirect would block the submission

Awesome, thanks so much @hrishikesh - I updated the fetch URL and now it works.