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?