Form Submission - Failed to redirect on Submit

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.

Hey @CraftCoast,

It looks like your JavaScript is failing:

Maybe start with debugging that error first?

Hi @hrishikesh ,

thanks for responding. I’ve fixed the console error. Just CSP errors in the console now.

Any ideas where I’m going wrong with the form submission redirect (or CSP)?

I’ve attached my build file here:

[[redirects]]
  from = "/*"
  to = "/html/404.html"
  status = 404

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self'; frame-ancestors 'self'; form-action 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; base-uri 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';"

Hi @CraftCoast,

Thanks for the follow-up and providing the additional information.

If you could, please remove the three headers (unless you have added them with a specific intention):

X-Frame-Options = "SAMEORIGIN"
X-XSS-Protection = "1; mode=block"
X-Content-Type-Options = "nosniff"

Additionally, please try removing the Content-Security-Policy header entirely.

If the form is then working, please re-add the Content-Security-Policy header and edit the section with script-src 'self’; to include https://www.google.com/ for script-src 'self' https://www.google.com/;.

Let us know if you have any questions or if the form is still not working after removing the headers and CSP.

1 Like

Hi @Melvin,

I’ve removed the CSP header entirely, the form redirect feature is still not functioning as expected.

It’s worth noting that I have tried the following for form actions, and neither redirected to the success page

<form id="canning-contact-form"
        class="contact-form" 
        method="POST" 
        data-netlify="true" 
        action="/html/success.html">
</form>

and

<form id="canning-contact-form"
        name="canning-contact-form" 
        class="contact-form" 
        method="POST" 
        data-netlify="true" 
        action="/success">
</form>

Chris

I also thought that maybe not having the “name” attribute on the form may be part of the issue, but my testing revealed no change after adding the it.

Hey @CraftCoast,

You’re using JavaScript to submit the form. You’d have to redirect using JavaScript or show a message on the same page.

Redirection is easy and you could add something like location.href = '/html/success.html'. But, this defeats the use of using JavaScript to submit the form.

Hi @hrishikesh Thank you for the response.

I guess I misunderstood the documentation.

I’ve added an extra line to the form submission to redirect when the promise resolves, this seems to have solved the issue I was having.

Thanks again for your help.

Chris

Thanks so much for coming back and letting us know! Glad everything is working now. Happy building :rocket: