Is it possible to have two forms in one page?

[sgfanega]

Greetings,

I am building up a website where there will be two forms in one page: one at the bottom, and one when a modal pops up when first loading the page.

I have named both forms differently, but it seems to only detect one form. (Both are also using honey-pot).

Please advise on what to do next.

If you are confused with some of the HTML prefixes, they are part of react-bootstrap.

Modal Form:

<Form 
  name="sign-up-form" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <input type="hidden" name="form-name" value="sign-up-form"/>
  <input type="hidden" name="bot-field"/>

  <Form.Group className="form-email mt-4 mb-3" controlId="form-email">
    <Row className="justify-content-evenly">
      <Col sm={12} lg={8}>
        <Form.Control type="email" placeholder="Enter Email" aria-describedby="email" required/>
      </Col>
      <Col sm={12} lg={3}>
        <Button variant="btn btn-custom" type="submit" onClick={buttonClick}>Sign Up!</Button>
      </Col>
    </Row>
  </Form.Group>
</Form>

Other Form (The one that is detected):

<Form 
  name="contact-form" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
  >
    <input type="hidden" name="form-name" value="contact-form"/>
    <input type="hidden" name="bot-field"/>
  
    <Form.Group className="form-first-name mb-3" controlId="form-first-name" >
      <Form.Label>First Name:</Form.Label>
      <Form.Control type="text" placeholder="Enter First Name" aria-describedby="first-name" required/>
    </Form.Group>
    <Form.Group className="form-last-name mb-3" controlId="form-last-name">
      <Form.Label>Last Name:</Form.Label>
      <Form.Control type="text" placeholder="Enter Last Name" aria-describedby="last-name" required/>
    </Form.Group>
    <Form.Group className="form-email mb-3" controlId="form-email">
      <Form.Label>Email:</Form.Label>
      <Form.Control type="email" placeholder="Enter Email" aria-describedby="email" required/>
    </Form.Group>
    <Button variant="btn btn-custom" type="submit" onClick={buttonClick}>Get in Touch!</Button>
  </Form>

[fool]

Hiya @sgfanega ! Have you checked out our form debugging article?

https://answers.netlify.com/t/support-guide-form-problems-form-debugging-404-when-submitting

It describes how to get your forms detected, and how to troubleshoot when they are not.

I can tell you there is no limitation on the number of forms in a single html page, once you get the syntax right, so that troubleshooting guide should help you (TL;DR start from the html - not whatever code or packages create the html - and look specifically at the form definitions that get deployed on Netlify. I think you’ll find that there aren’t two definitions in an HTML file with data-netlify=true or netlify parameters.

[sgfanega]

Hi there!

Thanks for replying; I’ve been tinkering for a few days now since.

I still can’t get my other form to show up in the “Active Forms” section, and it’s essentially the same exact code as my “Contact Form”.

Not sure if it matters, but this sign up form appears right when you load my website. It’s basically a modal that pops up.

I will continue to tinker about but if you think you may have another solution, please let me know so.

Here is the HTML Code using DevTools.

Thanks!

[luke]

Hi, @sgfanega. The problem with the HTML from devtools is less helpful than one might expect. This is because we need to see the raw HTML before any client-side javascript is executed and most people are not disabling their javascript before opening their site.

The support guide lists the information that we need to debug this:

1. The URL for your live form as you want visitors to use it
2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “pure javascript form”)
3. The form name that you’ve set and that shows in our UI
4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
5. Description of anything you have tried that did or didn’t help or make things better/worse

There is no pure-HTML form for the “sign-up-form”. The HTML you included above is being generated by the client-side javascript. It does not exist in the HTML before the javascript is executed anywhere that I can find. This means that you will need to save a pure-HTML version of the form somewhere else for the form handler to be created for this form.

If there are questions about why that requirement exists or how to meet that requirement, please let us know.

[sgfanega]

Hi there @luke, thank you for the reply.

I think I understand now why the form I am having issues with is not being detected by Netlify Build; it loads inside a modal that requires JavaScript. Therefore, Netlify does not catch it.

I went ahead and added the sign-up form on my page while giving it.

display: none

It is not seen by the user but will be seen by Netlify and using the debugging tools.

Now, I’m worried this might not be the best practice; but if this is the only solution at the moment, I will take it.

Additionally, here are the answers to the questions you asked:

1. https://futureconnect.one
2. https://futureconnect.one - it is a one page website
3. “sign-up form” was the form I was having issues with, and “contact-form” was the form that worked. But as you now know, they both show up in Netlify UI
4. No errors
5. Explained above.

Please let me know if there is a better solution to what I have, and if you have additional questions.

Best,

Steve

[SamO]

Hi @sgfanega ,

Thanks for coming back and sharing your solution!

The solution may work for your current situation but you’re correct using a hidden form is not the most ideal option. This can be perceived as spam or deceptive to search engines. It might be worth exploring alternative approaches to making the form visible. Perhaps using server-side rendering? Good luck. (: