Netlify forms + NextJS + MUI not working inside component

Support
,
1

Hi,
I’m trying to use netlify forms with NextJS and MaterialUI by using a reusable component with nothing more than a contact form in my index page.

Here’s the index page code:

//import ReactMarkdown from 'react-markdown'
//import fs from 'fs'
//import matter from 'gray-matter'
import ContactForm from '../components/ContactForm'

export default function Home(props) {

  return (
    <>
      
      <div>
        <h2>Intento de recuperar</h2>
        <img src="/uploads/unnamed.jpg" alt="intento" />
        <p>Lorem ipsum amet mamadas</p>

        <ContactForm />
        <p>The weather: {props.forecast}</p>
      </div>

    </>

  )
}

export async function getServerSideProps() {
  const response = await fetch("https://api.weather.gov/gridpoints/MFL/109,49/forecast")
  const weatherData = await response.json()

  return {
    props: {
      forecast: weatherData.properties.periods[0].detailedForecast
    }
  }
}

Here’s the component code:

import { TextField, Button } from '@mui/material'

const ContactForm = () => {

    return (
        <form
            method="POST"
            name="contact-mui"
            data-netlify="true"
            data-netlify-honeypot="bot-field"
        >
            <input type="hidden" name="form-name" value="contact-mui" />
            <TextField
                label="Nombre"
                name="name"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Email"
                name="email"
                required
                fullWidth
                type="email"
                margin="normal"
            />
            <TextField
                label="Teléfono"
                name="phone"
                required
                fullWidth
                type="tel"
                margin="normal"
            />
            <TextField
                label="Mensaje"
                name="message"
                multiline
                rows={4}
                fullWidth
                margin="normal"
            />
            <Button type="submit" variant="contained" color="primary">
                Submit
            </Button>
        </form>
    )
}

export default ContactForm

Here’s the live site: https://preeminent-cobbler-1d6e4f.netlify.app

Here’s what I have tried:

  1. attribute data-netlify=“true” in the form

Result: not working

  1. putting a hidden attribute inside the form as follows:
<input type="hidden" name="form-name" value="contact-mui" />

Result: Not working

  1. Putting a hidden hardcoded form in all of my pages (_app.js) just so netlify starts detecting forms as follows:
<form name="hidden" data-name="hidden" data-netlify="true" id="hidden" hidden>
                        <input type="text" name="name" />
                        <input type="email" name="email" />
                        <textarea name="message"></textarea>
 </form>

Result: Netlify does detect the form, but it won’t recognize my component form

  1. Creating a separate page with a hardcoded copy of my from to make netlify detect a form with the same name

Result: Netlify does detect the form but that is not working if I’m using the form with the same name located inside the component

Since I’m not conditionally rendering the form or blocking it with a React function of any sorts, I would expect that it is created at build time, I don’t think that the best solution is to copy the form on every page that I want it to be displayed in, using a component is the logical solution

Could you please let me know what am I missing?

Thanks

2

UPDATE:

Netlify does detect the form but it will not receive any submissions. When I click submit it won’t even show the default “Thank you” page

3

so removing this section did the work:

export async function getServerSideProps() {
  const response = await fetch("https://api.weather.gov/gridpoints/MFL/109,49/forecast")
  const weatherData = await response.json()

  return {
    props: {
      forecast: weatherData.properties.periods[0].detailedForecast
    }
  }
}

I’m kinda new in NextJS and even though the form was not rendered on server side, maybe the whole page was treated as such because of that particular part of the code. In case anybody understands why this happened, I would appreciate your comments

4

Thanks for sharing your solution.