Netlify form submission blank with react-final-form plugin

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>