Hello,
I have recently added a new Netlify form and I am running into an issue on submission.
site name: https://craftcoast.netlify.app/
The form (found here Canning Appointment | Book A Canning Service Request) is can be completed and is processed by Netlify correctly (email received), but the page fails to load the recaptcha and does not redirect on success. (meant to redirect to /html/success.html page)
I had added some custom JS to handle the redirect, but found that the Netlify documentation for forms mentioned I could simply include a success page redirect.
Copy of the form code:
<div id="canning-contact">
<form id="canning-contact-form"
class="contact-form"
method="POST"
data-netlify="true"
data-netlify-recaptcha="true"
action="/success.html">
<div id="company-name-container" class="form-col">
<label id="label-company-name" for="company-name">Company Name</label>
<input id="form-company-name" name="company-name" type="text" required />
</div>
<div id="contact-name-container" class="form-col">
<label id="label-contact-name" for="contact-name">Contact Person</label>
<input id="form-contact-name" name="contact-name" type="text" required />
</div>
<div id="company-email-container" class="form-col">
<label id="label-company-email" for="company-email">Contact Email</label>
<input id="form-company-email" name="company-email" type="email" required />
</div>
<div id="contact-phone-container" class="form-col">
<label id="label-contact-phone" for="contact-phone">Contact Phone</label>
<input id="form-contact-phone" name="contact-phone" type="text" required />
</div>
<div id="company-region-container" class="form-select-col">
<label for="company-region" id="label-company-region">Region</label>
<select name="company-region" id="region" required>
<option value="New Brunswick">New Brunswick</option>
<option value="New Brunswick">Nova Scotia</option>
<option value="New Brunswick">Prince Edward Island</option>
<option value="New Brunswick">Other</option>
</select>
</div>
<div id="date-container" class="form-col">
<label for="canning-date" id="label-canning-date">Preferred Date</label>
<input type="date" name="canning-date" id="input-canning-date" required>
</div>
<div id="time-container" class="form-col">
<label for="canning-time" id="label-canning-time">Preferred Time</label>
<input type="time" name="canning-time" id="input-canning-time" required>
</div>
<div id="can-size-container" class="form-checkbox-col">
<p class="bold">Can Size Required</p>
<div class="form-checkbox-container">
<input type="checkbox" name="can-size-250ml-slm" id="checkbox-can-size-250ml-slm" value="true">
<label for="can-size-250ml-slm">250mL Slim</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="can-size-355ml-slk" id="checkbox-can-size-355ml-slk" value="true">
<label for="can-size-355ml-slk">355mL Sleek</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="can-size-355ml-std" id="checkbox-can-size-355ml-std" value="true">
<label for="can-size-355ml-std">355mL Standard</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="can-size-473ml-std" id="checkbox-can-size-473ml-std" value="true">
<label for="can-size-473ml-std">473mL Standard</label>
</div>
</div>
<div id="cans-expected-container" class="form-col">
<label id="label-cans-expected" for="cans-expected" class="bold">Number of Cans Expected</label>
<input id="form-cans-expected" name="cans-expected" type="text" required />
</div>
<div id="can-size-container" class="form-checkbox-col">
<p class="bold">Equipment Required</p>
<div class="form-checkbox-container">
<input type="checkbox" name="air-compressor" id="checkbox-air-compressor" value="true">
<label for="air-compressor">Air Compressor</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="nitrogen-doser" id="checkbox-nitrogen-doser" value="true">
<label for="nitrogen-doser">Nitrogen Doser</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="do-tester" id="checkbox-do-tester" value="true">
<label for="do-tester">Dissolved Oxygen Tester</label>
</div>
<div class="form-checkbox-container">
<input type="checkbox" name="psl-labeler" id="checkbox-psl-labeler" value="true">
<label for="psl-labeler">Label Applicator</label>
</div>
</div>
<div id="instructions-container" class="form-col">
<label id="label-instructions" for="instructions" class="bold">Additional Instructions</label>
<textarea id="textarea-instructions" name="instructions"></textarea>
</div>
<div class="recaptcha">
<div data-netlify-recaptcha="true"></div>
</div>
<div id="submit-btn" class="btn-group">
<button class="submitBtn color-canning" type="submit">Send</button>
</div>
</form>
</div>
Here is a copy of the js code:
function submitForm(formData) {
if(!formData) {
return false;
}
fetch('/', {
method: 'POST',
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString()
})
.then(() => {
if(formData.has('form-name')) {
if(formData.get('form-name') === 'canning-form') {
// Handle Canning Form Redirect
window.location.href = '/html/success.html';
}
} else {
// Handle Contact Form submission
const sendBtn = document.querySelector('.submitBtn');
sendBtn.textContent = "Submitted";
sendBtn.classList.add('sent-message');
sendBtn.disabled = true;
}
})
.catch((error) => alert(error));
}
Any assistance is greatly appreciated.
Thank you.
