Форма GatsbyJS + Netlify не принимает заявки
Итак, у меня есть веб-сайт, который я размещаю на Netlify. Я следил за документацией, которая есть на их сайте (о формах), и имя формы отображается на моем тире Netlify после развертывания, но ни одна из заявок не проходит.
Могу я помочь с этим?
Вот форма моего компонента Contact.js:
<form
name = "contact-me"
method = "post"
action = "/success"
data-netlify = "true"
data-netlify-honeypot = "bot-field"
>
<input type = "hidden" name = "bot-field" />
<label htmlFor = "name">
Name: <input type = "text" name = "name" id = "name" required />
</label>
<label htmlFor = "email">
Email: <input type = "email" name = "email" id = "email" required />
</label>
<label htmlFor = "message">
Message: <textarea name = "message" id = "message" required />
</label>
<footer className = "major">
<ul className = "actions">
<li>
<button type = "submit" className = "button small special">
Send
</button>
</li>
<li>
{/* eslint-disable-next-line */}
<button type = "reset" className = "button small">
Clear
</button>
</li>
</ul>
</footer>
</form>
Конечно, я использую Гэтсби для создания сайта.
Пожалуйста, дайте мне знать, если я должен разместить здесь ссылку на свое репо.
Спасибо
Привет, Бен. Я действительно да. Честно говоря, я до сих пор не знаю, в чем проблема, поскольку я следил за их документацией, но после повторения и попытки в режиме инкогнито я получил код, который вы видите выше.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Самый быстрый способ проверить, что netlify увидит, используя сайт Gatsby:
- отключите javascript в вашем браузере для сайта
- перейти на страницу контактов без javascript
- просмотреть исходный код страницы (страница, которую netlify использует для регистрации)
- просмотрите форму и убедитесь, что существует значение, для которого Netlify требует
- Требуется
data-netlify = "true"в форме
<form name = "contact" method = "POST" data-netlify = "true">
<p>
<label>Email: <input type = "text" name = "name" /></label>
</p>
<p>
<label>Message: <textarea name = "message"></textarea></label>
</p>
<p>
<button type=”submit”>Send</button>
</p>
</form>
Если он настроен правильно, ваша форма должна правильно обрабатываться в SPA и правильно регистрировать поля ввода.
Когда я следую вашим пунктам здесь, я вижу, что атрибут data-netlify = "true", кажется, исчез из моей формы (он был там раньше), и добавлено новое поле формы <input type = "hidden" name = "form-name" value = "contact">. Это ожидаемое поведение?
У меня та же проблема, что и у создателя этой проблемы, но она работает для меня, если я использую запрещать Javascript. При включенном Javascript я получаю ошибку 404 - очень странно
Хорошо, проблема обнаружена - при включенном Javascript параметр имени формы отсутствует в почтовом запросе.
У меня была аналогичная проблема. Решение заключалось в том, чтобы убедиться, что мой веб-воркер загружается после моего манифеста в gatsby-config.js:
{
plugins: [
{
resolve: `gatsby-plugin-manifest`,
options: {
...
}
},
'gatsby-plugin-offline'
]
}
Источник: https://www.gatsbyjs.org/docs/add-offline-support-with-a-service-worker/
Этот пакет также помог при построении формы: https://www.npmjs.com/package/react-netlify-form
Мне любопытно, решили ли вы свою проблему. У меня сейчас та же проблема ...