Wrong fields in submitted form

Hello netlify team!

I have a problem with Netlify forms. We use Nextjs on our project. Form submission works perfect, but I have wrong fields name in data:

I guess the reason is that we use next/translate in the text of labels for inputs. Name for inputs are written without next/translate. Here is the example of our fields. TextInput is just a wrapper for html input. Props labelText is for label:

I tried to remove translation from labels and put just text, and it worked fine.
Is there any solution to use translation in labels?

Hi @alisakova,

I’m not sure how next/translate works, but I’d be making an assumption right now based on what I know about how Netlify works.

Netlify Forms will parse the form during build time and thus, whatever exists in the HTML output during the build time is what Netlify will register in the database. If next/translate does the translations on the server or client-side after the initial build, Netlify Forms would not be able to take that into account.

But there’s a possible solution. You can include a plain non-functioning HTML form in the static folder. You can add the netlify attributes to this form, and not add any of that to the actual form in Next.js. As long as the form name and the input names match, the form would be successfully submitted.

Hi, @hrishikesh !
Thank you very much. It works!

1 Like