Form inside react modal not detected

Support
1

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 and this post, 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

2

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 or https://some-name.netlifycom/my-test-form. Thanks!

3

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/

The form that works is on this page:

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

4

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” - it does have to literally be within an html file to work.

5

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!

6

@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:

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, 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:

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?

7

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

9

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

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, 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?