Netlify form submission blank with react-final-form plugin - reactjs

Question

I am using react-final-form to develop a multi-page wizard form but am now stuck on sending my submissions to Netlify.
Netlify has detected my form but on submit doesn't receive my forms data
This is my first time using Netlify to handle form submissions so I'm not sure if I'm doing something
wrong on Netlifys side or react-final-forms side.
important
im using GATSBY
index.js
<Wizard onSubmit={onSubmit}>
<Wizard.Page>
<div>
<div>
<label css={label}>> Name</label>
</div>
<Field
autocomplete="off"
css={input}
name="Name"
component="input"
type="text"
placeholder="$"
validate={required}
/>
<Error name="Name" />
</div>
<div>
<div>
<label css={label}>> Email</label>
</div>
<Field
autocomplete="off"
css={input}
name="Email"
component="input"
type="email"
placeholder="$"
validate={required}
/>
<Error name="Email" />
</div>
<div>
<div>
<label css={label}>> Social handle</label>
</div>
<Field
autocomplete="off"
css={input}
name="Social"
component="input"
type="text"
placeholder="$"
/>
<Error name="Social" />
</div>
</Wizard.Page>
<Wizard.Page>
<div>
<div>
<label css={label}>> What can we do for you?</label>
</div>
<div>
<label
style={{
display: 'flex',
alignItems: 'center',
paddingTop: '0.5em',
}}
>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="Shopify build"
/>{' '}
<span css={checkboxlabel}>Shopify build</span>
</label>
</div>
<div>
<label style={{ display: 'flex', alignItems: 'center' }}>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="pop-up store"
/>{' '}
<span css={checkboxlabel}>Pop-up store</span>
</label>
</div>
<div>
<label style={{ display: 'flex', alignItems: 'center' }}>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="WebVR"
/>{' '}
<span css={checkboxlabel}>WebVR</span>
</label>
</div>
<div>
<label style={{ display: 'flex', alignItems: 'center' }}>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="Website audit"
/>{' '}
<span css={checkboxlabel}>Website audit</span>
</label>
</div>
<div>
<label style={{ display: 'flex', alignItems: 'center' }}>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="Asset creation"
/>{' '}
<span css={checkboxlabel}>Asset creation</span>
</label>
</div>
<div>
<label style={{ display: 'flex', alignItems: 'center' }}>
<Field
css={checkbox}
onClick={play}
name="services"
component="input"
type="checkbox"
value="Other"
/>{' '}
<span css={checkboxlabel}>Other</span>
</label>
</div>
</div>
<div>
<div style={{ paddingTop: '1em' }}>
<label css={label}>> Budget</label>
</div>
<Field css={budget} name="Budget" component="select">
<option />
<option value="UNDER > $3000">UNDER > $3000</option>
<option value="$3000 - $10000">$3000 - $10000</option>
<option value="$10000 - $15000">$10000 - $15000</option>
<option value="$15000 - $25000">$15000 - $25000</option>
<option value="$25000+">$25000+</option>
</Field>
<Error name="budget" />
</div>
</Wizard.Page>
<Wizard.Page>
<div>
<div>
<label css={label}>> Message</label>
</div>
<Field
css={message}
name="message"
component="textarea"
placeholder="$"
/>
<Error name="message" />
</div>
</Wizard.Page>
Wizard.js
handleSubmit = values => {
const { children, onSubmit } = this.props
const { page } = this.state
const isLastPage = page === React.Children.count(children) - 1
if (isLastPage) {
return onSubmit(values)
} else {
this.next(values)
}
}
render() {
const { children } = this.props
const { page, values } = this.state
const activePage = React.Children.toArray(children)[page]
const isLastPage = page === React.Children.count(children) - 1
return (
<Form
autocomplete="off"
initialValues={values}
validate={this.validate}
onSubmit={this.handleSubmit}
>
{({ handleSubmit, submitting, values }) => (
<form name="notypo-services" method="POST" data-netlify="true" onSubmit={handleSubmit}>
{activePage}
<div className="buttons">
{page > 0 && (
<div onClick={this.previous}>
<PrevButton></PrevButton>
</div>
)}
{!isLastPage && (
<NextButton></NextButton>
)}
{isLastPage && (
<div type="submit">
<SendButton></SendButton>
</div>
)}
</div>
</form>
)}
</Form>
)
}

Answer 1

Your <form> tag should have an action and the data provided should have a key-value pair:
<form name="notypo-services"
method="POST"
data-netlify="true"
action="/"
onSubmit={handleSubmit}>
And your data should be structured like:
form-name: "notypo-services"
Name: "Your typed name"
Email: "Your typed email"
Note the form-name value. It's mandatory.
If you don't have a thank-you page, you can redirect the action to himself by /.
In addition, I would suggest adding data-netlify-honeypot to avoid spam.
You can check the Netlify documentation for further details.

Answer 2

after days of procrastinating, I finally put this together
On submit I transfer my data into a hidden form that then gets sent over to Netlify (succesfully)
handleSubmit = values => {
const { children, onSubmit } = this.props
const { page } = this.state
const isLastPage = page === React.Children.count(children) - 1
if (isLastPage) {
document.getElementById("realFormName").value = "notypo-services";
document.getElementById("realName").value = values.Name ;
document.getElementById("realEmail").value = values.Email;
document.getElementById("realSocial").value = values.Social;
document.getElementById("realServices").value = values.Services;
document.getElementById("realBudget").value = values.Budget;
document.getElementById("realMessage").value = values.Message;
document.getElementById("myForm").submit() ;
return false ;
} else {
this.next(values)
}
}
<form id="myForm" name="notypo-services" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" action="/" style={{display: 'none'}}>
<input hidden="true" name="form-name" type="text" id="realFormName" />
<input hidden="true" name="Name" type="text" id="realName" />
<input hidden="true" name="Email" type="email" id="realEmail" />
<input hidden="true" name="Social" type="text" id="realSocial" />
<input hidden="true" name="Services" type="text" id="realServices" />
<input hidden="true" name="Budget" type="text" id="realBudget" />
<input hidden="true" name="Message" type="text" id="realMessage" />
<input hidden="true" type="submit" value="Submit" />
</form>