Submit redirect error with internationalisation

Support
, , , ,
#1

Hi all, this is my first post, and I am not used to this but will try to be clear.

URL with issues:

Also these URLs…
{ https://dev-mlmv.netlify.app/en/peer-supporters/nina-moore }
{ https://dev-mlmv.netlify.app/en/news-events/2021-christmas-celebrations }
[ https://dev-mlmv.netlify.app/en/accessibility ]

There are no actual error messages but the ‘action’ URL for the forms is random, no consistency with my builds, it either goes to…
[ https://dev-mlmv.netlify.app/en/thank-you ]
or
[ https://dev-mlmv.netlify.app/mi/thank-you ]

The form HTML source is correct (As per chosen language) but en/* normally redirects to mi/*. I have followed instructions.

I did add a timestamp to the URL (which can be seen in the form) but this did not help.

Locally the form redirect to ‘/en/thank-you’ is working fine.

There are no build problems or browser issues.
Running SSG Gatsby 2.25.3

A hard-coded action works fine, unfortunately this is an international site. I and the client would like to use the suitable “lang” template after so much effort has gone is so far to build this app.

Also, I have renamed the forms a few times while testing so would be nice to delete old forms from the admin panel.

Thanks in advance - any suggestions?

My source (Snippet)

const submitUrl = "/" + i18n.language + "/thank-you?t=" + Math.floor(Date.now() / 1000)
<form
        name="ContactForm"
        method="POST"
        enctype="application/x-www-form-urlencoded"
        action={`${submitUrl}`}
        data-netlify="true"
   >
        <input type="hidden" name="form-name" value="ContactForm" />
        <input type="hidden" name="Source" value="Contact form" />
        <FormName />
        <FormEmail />
        <FormSubject />
        <FormMessage />
        <FormCheckTerms />
        <FormSubmit />
</form>

My HTML build (Snippet)

<form 
        name="ContactForm" 
        method="POST" 
        enctype="application/x-www-form-urlencoded"
        action="/en/thank-you?t=1610114531" 
        data-netlify="true">

        <input type="hidden" name="form-name" value="ContactForm">
        <input type="hidden" name="Source" value="Contact form">
        <label for="name">Your name (required)
            <input type="text" name="name" placeholder="Your name" required="">
        </label>
        <label for="email">Your email address (required)
            <input type="email" name="email" placeholder="Your email address"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required="">
        </label>
        <label for="subject">Subject
            <input type="text" name="subject" id="subject">
        </label>
        <label for="message">Message<textarea name="message" rows="5">
            </textarea>
        </label>
        <label for="terms" class="checkbox">
            <span>I have read, understood and agree
                to the <a aria-label="Link to the terms of use" tabindex="0" href="/en/terms-and-use">Privacy &amp;
                    Legal policies</a> for My Life My Voice before submitting this form.
            </span>
            <input type="checkbox" name="terms" id="terms"
                value="Privacy &amp; Legal policies terms have been agreed by user">
        </label>
        <button type="submit" id="submitBtn" name="submit" class="buttonSecondary" disabled="">
            <svg aria-hidden="true" width="176" height="151" viewBox="0 0 176 151">
                <polygon fill="#FFF" points=".084 151 176 75.5 .084 0 0 58.722 125.714 75.5 0 92.278"></polygon>
            </svg>
            Submit form
        </button>
    </form>
#2

Hey there,
Apologies for the long delay in responding here. Are you still running into this? If so, it would be great to see an x-nf-request-id for the POST request that the browser makes when you submit to your form. If you have any questions about how to get that, please let us know!

Also wanted to share a bit about how our form action works: our form parser looks for the elements of your form when we build your site. Then, our forms accept data in the shape of the form that we set up for you during your build. For the action in particular, our form parser takes whatever path you put there and, on submission, serves the page located at that path.

I’ve seen other people have issues with a dynamic action element, so I’m not sure it’s actually possible to use it that way. A workaround would be to use Gatsby’s navigate utility to do a client-side route to the correct path. Here’s an example:

      // On success, redirect to the custom success page using Gatsby's `navigate` helper function
      .then(() => navigate("/thank-you/"))
      // On error, show the error in an alert
      .catch(error => alert(error));
  };