Multiple forms submit to only one in the dashboard

My issue is simple. I have 2 forms on my site. One named contact and the other newsletter. However both output their responses to contact on my dashboard.

Here is my contact component

import React from 'react'

//Components

//Styles
import './contact.scss'

const ContactSection = ({ name }) => {
    return (
        <form 
          name="contact" 
          id="contact"
          method="POST" 
          action="/thanks/"
          netlify-honeypot="bot-field" 
          data-netlify="true"
          >
            <input type="hidden" name="form-name" value="contact" />             
            <p>
                <label htmlFor="name">Your Name: <input id="text" type="text" name="name" placeholder="First and Last Name" /></label>   
            </p>
            <p>
                <label htmlFor="email">Your Email: <input id="email" type="email" name="email" placeholder="Email Address" /></label>
            </p>
            <p>
                <label htmlFor="message">Message: <textarea id="message" type="message" name="message"></textarea></label>
            </p>
            <p>
                <button type="submit">Send</button>
            </p>
         </form>
    )
}

export default ContactSection

And my newsletter component

import React from "react"

//Components

//Styles
import './newsletter.scss'

const Newsletter = () => {
  return (
    <section className="newsletter-container">
      <div className="newsletter-title">
        <h1>Join our Newsletter</h1>
      </div>
      <div className="newsletter-form">
        <form 
          name="newsletter" 
          id="newsletter"
          method="POST" 
          action="/thanks/"
          netlify-honeypot="bot-field" 
          data-netlify="true"
          >
            <input type="hidden" name="form-name" value="contact" />             
            <p>
                <label htmlFor="name">Your Name: <input id="text" type="text" name="name" placeholder="First and Last Name" /></label>   
            </p>
            <p>
                <label htmlFor="email">Your Email: <input id="email" type="email" name="email" placeholder="Email Address" /></label>
            </p>
            <p>
                <button type="submit">Send</button>
            </p>
         </form>
      </div>
    </section>
  )
}

export default Newsletter

I use separate names and ids which created the correct forms on the dashboard. I am not sure why they output to only one though. In the docs it says I only need a separate name for these. Are their other parameters that I am missing?

Hey @byebyers :wave:t2:

I think I can see the issue :slight_smile: The most important part of Forms at runtime is that

<input type="hidden" name="form-name" value="contact" />             

you’ve got. The

<form name="newsletter" 

matters at build time and that’s why you get two Forms showing in the Netlify UI, but when you’re POST’ing up form data at runtime, the bucket it gets sent to is determined by the form-name=XYZ field in the form-encoded POST payload.

The key issue here being that both of your forms have the same hidden input value of “contact”.

If you change the newsletter hidden input to have the value of “newsletter” you should be all set

Hope that helps!

–
Jon

That worked! Thanks @jonsully.

For those interested in this post. Here are the tags that need to be labeled to separate forms.

Name and Id in the form tag

<form 
          name="newsletter" 
          id="newsletter"
          method="POST" 
          action="/thanks/"
          netlify-honeypot="bot-field" 
          data-netlify="true"
          >

and value in the Input tag.

<input type="hidden" name="form-name" value="newsletter" />        
1 Like

I’m working on something to make this easier now :slight_smile: Hopefully it’ll be simpler in the future!

–
Jon

1 Like

Awesome can’t wait for the next iteration!

Hey @byebyers :wave:t2:

I was able to whip up a package that might make things easier for you today. Curious if you’d be up for checking it out! :slight_smile:

–
Jon

Works nicely on my end! Thanks for the package. I do like the options for pre and post submit :grinning:

1 Like

Glad to hear it! I think it’ll help a lot of folks :pray:t2: Cheers!