Пустая форма для отправки формы Netlify с плагином response-final-form

Я использую response-final-form для разработки многостраничной формы мастера, но теперь застрял на отправке своих материалов в Netlify.

Netlify обнаружил мою форму, но при отправке не получает данные моей формы

Я впервые использую Netlify для обработки отправки форм, поэтому я не уверен, что я делаю что-то не так на стороне Netlifys или на стороне response-final-forms.

важно я использую 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>
    )
}