Two Separate Form Components Rendered Conditionally on Page

I am conditionally rendering an Application Form component and a Contact Form component via a Contact page. The problem that I am running into is this; when my project is deployed to Netlify, it recognizes the Contact Form, but not the Application form.

Troubleshooting I have done:

  • Rendered Application Form component to a different page and deployed to Netlify. Result: Netlify recognized the Application Form this way on the forms tab. Yay!
  • Removed all content in Contact Form page and kept the Application Form conditionally rendered through Contact page then deployed to Netlify. Netlify did not recognize in the forms tab.

Here is the code for page/contact.js:

const ContactPage = () => {
  const [ focused, setFocused ] = useState(0)
  const tabNames = ["Contact Us", "Enroll Today"]

  let content

  function handleClick(index) {
    return setFocused(index)
  }

  if (tabNames[focused] === "Contact Us") {
    content = <ContactForm />
  } else {
    content = <ApplicationForm />
  }

  return (
    <Layout>
      <Head title="Contact" />
      <div id="contact-page-container">
        <ul className="tab-container">
          {tabNames.map(function(name, index) {
            var style = '';

            if (focused === index) {
              style = 'focused'
            }

            return (
                <button key={name} className={`tab ${style}`} onClick={() => handleClick(index)}>{name}</button>
          )})}
        </ul>
        <div>
          { content }
        </div>
      </div>
    </Layout>
  )
}

export default ContactPage;

The following code is from components/contactForm.js:

const ContactForm = () => {
  const [state, setState] = React.useState({})

  const handleChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        ...state,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }

  return (
    <div id="form-container">
      <form
        name="Contact Form"
        method="post"
        action="/thanks/"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        onSubmit={handleSubmit}
      >

        <input type="hidden" name="form-name" value="Contact Form" />
        <p hidden>
          <label>
            Don’t fill this out: <input name="bot-field" onChange={handleChange} />
          </label>
        </p>

        <div className="field-wrap">
          <input required type="text" name="name" placeholder="Name" onChange={handleChange} />
        </div>
        
       {/* More form inputs here with the same format */}

      </form>
    </div>
  )
}

export default ContactForm

And this code is from components/applicationForm.js:

const ApplicationForm = () => {
  const [state, setState] = React.useState({})

  const handleChange = (e) => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target

    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'),
        ...state,
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }

  return (
    <div id="form-container">
      <form
        name="Application Form"
        method="post"
        action="/thanks/"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        onSubmit={handleSubmit}
      >
      
        <input type="hidden" name="form-name" value="Application Form" />
        <p hidden>
          <label>
            Don’t fill this out: <input name="bot-field" onChange={handleChange} />
          </label>
        </p>

        <h1>Enroll Online Or Download the Application Here</h1>

        <div className="field-wrap">
          <input required type="text" name="last-name" placeholder="Last Name*" onChange={handleChange} />
        </div>

        {/* More form inputs here with the same format */}

        <p>
          <button type="submit">Send</button>
        </p>
      </form>
    </div>

  )
}

export default ApplicationForm

How do I go about making the Application Form recognized through the conditional rendering in the Contact page?

i don’t have an answer for you just yet, but, just checking, does this work locally?