How to redirect only GET requests with Netlify's .toml

I currently have a website set up where we redirect the requests from our root (’/’) into a language specific page (’/en’ or ‘/pt’) depending on the user’s language. However that rule disables our form submissions, since POST requests sent to the root get 301 redirected as well. Is there any way to set up the redirect rules so that only GET requests to the root get redirected, or maybe a different form submission config?

Thank you,
Bruno Cangussu

Hi @Cangussu,

We don’t have that functionality at present (method-specific redirects).

Not sure how you have your redirects set up, but I’d suggest deploying an actual file at the URL you want to submit to (e.g. <form action=/page.html> and have /page.html deployed), and then if you use non-forced redirects:

/* /pt/* langauge=pt
/* /en/* language=en

things should work. If not, you could have a /pt/page.html and a /en/page.html and make their corresponding forms submit to the different endpoints, perhaps?

Hi @fool,

The redirect we currently have is simply a

[[redirects]]
  from = "/"
  to = "/pt/"
  status = 301
  force = true

If not, you could have a /pt/page.html and a /en/page.html and make their corresponding forms submit to the different endpoints, perhaps?

How would that work? We’re just using the basic Netlify’s forms settings, which needs the POST to hit the root, from what I understand. The contact forms for the different languages don’t need a separate endpoint since it’s the same employee that will be handling the user contact

The issue is mainly that we don’t want an empty root page because it’s bad for indexing, but redirecting it breaks the form for now, so we’re kinda lost :confused:

The POST needs to go wherever you define the action for the form in its html definition (as we parse it at build time, from whatever html file you define it in). A more expanded version of what I was suggesting:

  1. make two versions of the form - one english and one portuguese. They must have different <form name=????> identifiers (or if javascript, a field called form-name with different values)
  2. make them submit to different places - e.g <form action=/en/success.html ...> and <form action=/pt/sucesso.html>
  3. profit :slight_smile:

Hi @fool.

I’ve tried what you suggested over at https://appmasters.io/pt/contato and it didn’t work,
I created the /pt/sucesso page, and set the form’s action field to match it, but the POST request returns 404 on the devtools. The form is being submitted through javascript but it’s prerendered using Gatsby, so it still generates the .html files

@Cangussu are you submitting the form using fetch (javascript) or are you doing an http form post?

@futuregerald We’re using fetch

Could you try /pt/sucesso/ as your form destination? That’s a better specification for your /pt/sucesso/index.html file than without the /

@fool It’s still giving a 404

This is what my form looks like on the production website

<form value="contato" method="post" data-netlify="true" data-netlify-recaptcha="true" data-netlify-honeypot="bot-field" action="/pt/sucesso/">

The captcha is added into the form through JavaScript, and the submission logic looks like this

Hope this helps! :grin:

Hi, not sure if this is the cause but you have a value attribute in your tag. I think you mean for that to be a ‘name’ attribute. Could you make that change and see if that helps?

Hi @Dennis
I’ve made the change and now the request returns status code 303, but it still won’t show any submissions on the form. This is what the full network log looks like as I submit the request

I took a look at your site’s sourcemap and it seems that your form is conditionally setting the form name and action. Dynamically changing the name and action could definitely make our form-handling fail to parse the incoming form submission. Could you try making sure that your form name, action and input names are not dynamically assigned and let me know if that helps?

Hi @Dennis, sorry for the delay. Hope you had good holidays and new-years.

About the form, could you elaborate on that? The website is generated through Gatsby, which builds the form for the appropriate language based on a build-time language value, and doesn’t re-render it afterwards, so the form-name is not dynamically set.

Cheers

Hmm. On initial load, your site’s html is used but if you navigate to your contact page, Gatsby uses javascript to load subsequent pages. This is one reason your form might not be working. If you deploy a site with the example here (as-is) do you get the same error? If not, then I recommend having two separate components instead (without dynamic form names) and see if that helps.

Thank you for the support you all have provided us, but we have decided to use another solution for form submission, so I will be closing this thread.