# Form inside react modal not detected

**URL:** <https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337>\
**Category:** Support\
**Tags:** netlify-forms\
**Created:** [November 20, 2019, 6:46pm UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337 "2019-11-20T18:46:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pastenes](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/pastenes/32/3373_2.png) [@pastenes](https://answers.netlify.com/u/pastenes)\
**Post date:** [November 20, 2019, 6:46pm UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/1 "2019-11-20T18:46:44Z")

</div>

Hi,

I have two forms on this headless WordPress + Gatsby site: one as a Gatsby page and another inside a react-responsive-modal component.

The form on the page is being detected but the one in the modal isn’t. Both forms have the same fields but different names.

I followed all troubleshooting steps on [this article](https://answers.netlify.com/t/common-issue-form-problems-form-debugging-404-when-submitting/92) and [this post](https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/#form-handling-with-static-site-generators), including the Gatsby and Stateful React Form.

I really don’t know what I’m missing here.

```
import React from 'react'
import Modal from 'react-responsive-modal'
import Image from './image'

const styles = {
  modal: {
    padding: '0',
    maxWidth: '620px',
    margin: '10% auto',
  },
}

const encode = data => {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
    .join('&')
}
class ContactModal extends React.Component {
  state = {
    open: false,
    name: '',
    email: '',
    phone: '',
    message: '',
  }

  handleSubmit = e => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': 'Contact Modal', ...this.state }),
    })
      .then(() => alert('Success!'))
      .catch(error => alert(error))

    e.preventDefault()
  }

  handleChange = e => this.setState({ [e.target.name]: e.target.value })
  onOpenModal = () => {
    this.setState({ open: true })
  }

  onCloseModal = () => {
    this.setState({ open: false })
  }

  render() {
    const { name, phone, email, message, open } = this.state
    return (
      <div className="modal-container">
        <button className="nav-button" onClick={this.onOpenModal}>
          Get Started
        </button>

        <Modal open={open} onClose={this.onCloseModal} styles={styles}>
          <div className="modal-top double">
            <Image />
          </div>
          <div className="contact-grid modal">
            <h3>Get started with Intuitive Digital today.</h3>

            <form nonSubmit={this.handleSubmit}>
              
         
              <input
                type="text"
                name="name"
                value={name}
                maxLength="40"
                placeholder="Name"
                required
                onChange={this.handleChange}
              />

              <input
                type="email"
                name="email"
                value={email}
                maxLength="40"
                placeholder="Email"
                required
                onChange={this.handleChange}
              />

              <input
                type="tel"
                placeholder="Phone"
                name="phone"
                value={phone}
                maxLength="40"
                onChange={this.handleChange}
              />

              <textarea
                type="textarea"
                placeholder="Message"
                name="message"
                value={message}
                maxLength="2000"
                rows="10"
                required
                onChange={this.handleChange}
              ></textarea>

              <button type="submit" className="wp-block-button" name="submit">
                Let's Chat
              </button>
            </form>
          </div>
        </Modal>
      </div>
    )
  }
}

export default ContactModal

```

Thanks!  
Richard

---

<div class="post-metadata">

**Author:** ![laura](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/laura/32/6274_2.png) [@laura](https://answers.netlify.com/u/laura)\
**Post date:** [November 21, 2019, 10:20pm UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/2 "2019-11-21T22:20:15Z")

</div>

Hi Richard,

Please send us a link to your form on the web. Please use the same URL as you have been testing with, be that [https://mysite.com/contact](https://mysite.com/contact) or [https://some-name.netlifycom/my-test-form](https://some-name.netlifycom/my-test-form). Thanks!

---

<div class="post-metadata">

**Author:** ![pastenes](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/pastenes/32/3373_2.png) [@pastenes](https://answers.netlify.com/u/pastenes)\
**Post date:** [November 21, 2019, 10:36pm UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/3 "2019-11-21T22:36:07Z")

</div>

Hi Laura,

The modal form can be opened by the big blue “Get started” button on the right of the main nav:

[https://new.intuitivedigital.site/](https://new.intuitivedigital.site/)

The form that works is on this page:

[https://new.intuitivedigital.site/contact/](https://new.intuitivedigital.site/contact/)

I added a plain HTML hidden form with the same name as the modal form on the body of the site as part of the troubleshooting. This hidden form (called Contact Modal) is detected but it doesn’t process the actual modal form.

Thank you for looking into this!  
Richard

---

<div class="post-metadata">

**Author:** ![fool](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/fool/32/37_2.png) [@fool](https://answers.netlify.com/u/fool)\
**Post date:** [November 23, 2019, 1:16am UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/4 "2019-11-23T01:16:52Z")

</div>

we need a link to the actual html file with your form - could you share that? Not “click here” but “go to [https://site/file.html](https://site/file.html)” - it does have to literally be within an html file to work.

---

<div class="post-metadata">

**Author:** ![pastenes](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/pastenes/32/3373_2.png) [@pastenes](https://answers.netlify.com/u/pastenes)\
**Post date:** [November 23, 2019, 4:49am UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/5 "2019-11-23T04:49:01Z")

</div>

I’m a bit confused as your docs don’t mention that and also the form located on the second link (/co tact), which is a .js React/Gatsby file works fine. Is just the one in a modal component that doesn’t work.

So I don’t have an HTML file on this Gatsby site.

Can you advise further on this?

Thank you!

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [November 25, 2019, 10:05am UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/6 "2019-11-25T10:05:48Z")

</div>

@pastenes, there must be a pure HTML version of the form (not javascript generated in the browser) when the site is deployed. This requirement is documented here:

> **[Forms setup](https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms)**
>
> Use built-in form handling to simplify adding and managing forms for your project. There’s no need to make an API call or include extra form handling code.

Quoting:

> Our bots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our bots won’t find it in the pre-built files. You can work around this by creating a hidden HTML form with the `data-netlify="true"` attribute and input fields with `name` attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our [reCAPTCHA 2 integration](https://docs.netlify.com/forms/spam-filters/#recaptcha-2-challenge), and create a `div` element in the hidden HTML with the `data-netlify-recaptcha="true"` attribute.
> 
> You can also find related tutorials on our blog:
> 
> - [How to Integrate Netlify’s Form Handling in a React App](https://www.netlify.com/blog/2017/07/19/how-to-integrate-netlifys-form-handling-in-a-react-app/)
> - [How to Integrate Netlify forms in a Vue App](https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/)
> 
> While the two articles are fairly framework-specific, the code demonstrates how to prerender forms when working with them in a web application.

All form submissions using javascript/AJAX (if any) must use identical fields to the HTML version of the form.

Does an HTML version of the form exist in the deployed files? If not, please create one and let us know if this doesn’t resolve the issue. If there is such a form, would you please send the link to it?

---

<div class="post-metadata">

**Author:** ![Madgeniusblink](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/madgeniusblink/32/4133_2.png) [@Madgeniusblink](https://answers.netlify.com/u/Madgeniusblink)\
**Post date:** [January 14, 2020, 8:14pm UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/7 "2020-01-14T20:14:40Z")

</div>

so pretty much you need to add something like this:

```
       <div data-netlify="true">
        <input type="hidden" name="bot-field" />
        <input type="hidden" name="form-name" value="contact" />
      </div>

```

For the from to work? or a full clone of the form and hide the div form the html using something like:

```
          <div type="hidden" style={{ display: 'none' }}>
        <form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field" >
          
            <input type="hidden" name="bot-field" />
            <input type="hidden" name="form-name" value="contact" />

            <input id="name" type="text" name="name" required />
            <input type="email" name="email" required />

            <input id="subject" type="text" name="subject" required />

            <input id="message" type="textarea" name="message" required />

          <input type="submit" value="submit" />
        </form>
      </div>

```

Is this correct? my form is on a modal so its not being picked up by the netlify form but when I do form and i hide it it works…

is there a blog to perhaps a cleaner way of doing this? this must be documented on your documentation… it seems that alot of people have issues with this

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [January 16, 2020, 2:02am UTC](https://answers.netlify.com/t/form-inside-react-modal-not-detected/5337/9 "2020-01-16T02:02:34Z")

</div>

Hi, @Madgeniusblink, there is documentation about this here:

> **[Forms setup](https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms)**
>
> Use built-in form handling to simplify adding and managing forms for your project. There’s no need to make an API call or include extra form handling code.

Quoting that page:

> Our bots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our bots won’t find it in the pre-built files. You can work around this by creating a hidden HTML form with the `data-netlify="true"` attribute and input fields with `name` attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our [reCAPTCHA 2 integration](https://docs.netlify.com/forms/spam-filters/#recaptcha-2-challenge), and create a `div` element in the hidden HTML with the `data-netlify-recaptcha="true"` attribute.

So, it does appear to be thoroughly documented there. Is there something you think we should add to the documentation above, @Madgeniusblink? If so, what else would be helpful to include there?