Hi all, I have an issue to implement netlify form with a next.js project and MUI

Hi all, I am building an app using Next.js , Netlify and MUI. I am trying to implement Netlify Form but I am getting a problem, I read a lot of documentation and post but I could not find the solution.
Problem: the Submissions from is created but then , the submissions are not saved. either in the verify submission nor in the spam submission.
here the domain to the website: Cellect Energy Home

here the code that I am implementing

type or paste code here

 <form
              onSubmit={handleSubmit}
              name="contactform"
              method="POST"
              data-netlify="true"
              data-netlify-honeypot="bot-field"
            >
              <input
                type="hidden"
                name="emailhidden"
                value="contactform"
              />
              <div hidden>
                <label>
                  Don't fill this out if you're human:
                  <input name="bot-field" />
                </label>
              </div>
              <Styled.InputContainer>
                <div>
                  <label
                    htmlFor="newsletter-email"
                    className="body-small"
                    style={{ color: "white" }}
                  >
                    Subscribe to our newsletter
                  </label>
                  <TextField
                    id="email"
                    type="email"
                    variant="filled"
                    color="primary"
                    sx={Styled.FormWidth}
                    onChange={(e) => setSuscriptor(e.target.value)}
                    value={subscriptor}
                    name="email"
                    inputMode="email"
                  />
                </div>
                <Styled.Btn>
                  <ButtonMui
                    size="medium"
                    variant="contained"
                    color="secondary"
                    type="submit"
                    sx={Styled.Button}
                  >
                    Subscribe
                  </ButtonMui>
                </Styled.Btn>
              </Styled.InputContainer>
            </form>


Thank you so much in advance.

Hi @lolo-vignolo, thank for the post.
If you have not read the blog post at How to add a Netlify Contact Form in React - DEV Community already, kindly do so.

It show you have to create a Netlify Form using MUI. It should help you get started since it is similar to what you want to achieve.

Thanks.

Hi , good morning. Sorry the delay! Thank you so much for the information. I will try in this way to see if I can get it.
Thank you so much again!

1 Like

Hi @lolo-vignolo,
Thanks for the reply.
Let me know once you get it working.

1 Like

Hi, I have the same issue and I have tried everything available in the tutorials. If I’m calling the form from a component (nothing special) it will nor work. It only works if it’s hardcoded on each page. Have you had any luck with this?

1 Like

Hi alfredo good morning!. No ,I ´ve been traying in different ways and nothing. I don´t know if this can be because I am doing it in next.js and may be that related to SSR can change something. But i don´t have the solution yet

Hi Lolo, you’re probably right. I was calling server side props to the page where I had the form. After I removed that section of the page, the form started to work as expected.

I’m not sure why the form would be SSR when it can be static, I’m kinda new to NextJS and I don’t know if I can specify when a component should be generated on build and not SSR.

As of now, the only solution that I can think of is to have the form on a separate page with no SSR at all