首页 > 解决方案 > 我怎样才能让我的第二个表格出现在 netlify 上?

问题描述

我一直在为网站制作一个新表单,但它没有显示在 netlify 表单上,并且在提交时我看到 404 错误。我不确定为什么会这样。我也有一个联系表格,但那个工作正常。我还记录了我的状态,并从所有字段中获取了要声明的所有值。

这些是与表单相关的代码。

function encode(data) {
    return Object.keys(data)
        .map(
            (key) =>
                encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
        )
        .join('&')
}
    const [state, setState] = useState({})

    const handleChange = (e) => {
        setState({ ...state, [e.target.name]: e.target.value })
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        const form = e.target
        fetch('/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: encode({
                'form-name': form.getAttribute('name'),
                ...state,
            }),
        })
            .then(() => navigate(form.getAttribute('action')))
            .catch((error) => alert(error))
    }
<form
                        className={'formStyle'}
                        name="full-stack-applications"
                        method="post"
                        action={
                            locale === 'en'
                                ? '/thankYouForYourApplication/'
                                : '/fi/thankYouForYourApplication/'
                        }
                        data-netlify="true"
                        data-netlify-honeypot="bot-field"
                        onSubmit={handleSubmit}
                    >
                        {/* The `form-name` hidden field is required to support form submissions without JavaScript */}
                        <input
                            type="hidden"
                            name="form-name"
                            value="full-stack-applications"
                        />
                        <p hidden>
                            <label>
                                Don’t fill this out:
                                <input
                                    name="bot-field"
                                    onChange={handleChange}
                                />
                            </label>
                        </p>

标签: netlifynetlify-form

解决方案


推荐阅读