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>
)
}
2
Answers
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)
Your
<form>
tag should have anaction
and the data provided should have akey
–value
pair:And your data should be structured like:
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.