使用 react-final-form 插件的 Netlify 表单提交空白

Question

我正在使用 react-final-form 来开发多页向导表单，但现在我无法将我的提交发送到 Netlify。

Netlify 已检测到我的表单，但在提交时未收到我的表单数据

这是我第一次使用 Netlify 处理表单提交，所以我不确定我是否在做某事 Netlifys 端或 react-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 > 00">UNDER > 00</option>
            <option value="00 - 000">00 - 000</option>
            <option value="000 - 000">000 - 000</option>
            <option value="000 - 000">000 - 000</option>
            <option value="000+">000+</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

您的 <form> 标签应该有一个 action 并且提供的数据应该有一个 key-value 对：

<form name="notypo-services" 
      method="POST" 
      data-netlify="true" 
      action="/"
      onSubmit={handleSubmit}>

您的数据结构应如下：

form-name: "notypo-services"
Name: "Your typed name"
Email: "Your typed email"

记下 form-name 值。这是强制性的。

如果您没有thank-you页面，您可以通过/将操作重定向到他自己。

此外，我建议添加 data-netlify-honeypot 以避免垃圾邮件。

您可以查看 Netlify documentation 了解更多详情。

Answer 2

经过几天的拖延，我终于把它放在一起了

在提交时，我将我的数据传输到一个隐藏的表单中，然后将其发送到 Netlify（成功）

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>

使用 react-final-form 插件的 Netlify 表单提交空白

Netlify form submission blank with react-final-form plugin

reactjs

gatsby

netlify

react-final-form