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.
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>```