Netlify Forms — это простой и удобный способ настроить формы на ваших статически сгенерированных веб-сайтах.

Однако исторически проекты, использующие NuxtJS, сталкивались с трудностями при внедрении форм Netlify из-за того, как Netlify сканирует код NuxtJS.

В этом руководстве показано, как эффективно использовать Netlify Forms и NuxtJS.

Как использовать формы Netlify с NuxtJS

В Netlify Forms docs вам говорят, что все, что вам нужно сделать, это включить скрытый атрибут data-netlify="true" в вашу основную форму, и тогда все готово.

Однако по состоянию на февраль 2021 года NuxtJS и Netlify Forms могут приводить к странному и неожиданному поведению — например, ваши формы не отправляются при смене страниц или ваша форма отправляется, но совершенно пуста.

После нескольких часов исследований я понял проблему и узнал, как ее исправить. Чтобы заставить Netlify Forms работать, нам просто нужно добавить несколько дополнительных строк кода.

Добавьте скрытое поле ввода под элементом формы

Для ясности предположим, что это пример формы, которую мы хотим подключить к Netlify:

<form name=”contact” method=”POST”> 
  <input name=”first-name” placeholder=”First Name”> 
  <input name=”last-name” placeholder=”Last Name”> 
  <input type=”submit” value=”Submit”> 
</form>

Чтобы заставить эту форму работать, вам нужно добавить скрытый элемент ввода под элементом формы. Этот элемент ввода должен иметь две вещи: атрибут value, который совпадает с атрибутом name его родительской формы, и атрибут name, равный form-name.

Смущенный? Вот как будет выглядеть ваш HTML после добавления скрытого поля ввода:

<form name="contact" data-netlify="true" method="POST">
  <input type="hidden" value="contact" name="form-name" />
  <input name="first-name" placeholder="First Name">
  <input name="last-name" placeholder="Last Name">
  <input type="submit" value="Submit">
</form>

Если вам интересно, вы заметите, что наше скрытое поле ввода размечено немного иначе, чем имя, фамилия и вводимые данные, которые у нас были ранее — у него есть закрывающий тег /> в отличие от обычного тега ввода >. Это целенаправленно. По какой-то причине поисковые роботы Netlify предпочитают именно эту разметку. Убедитесь, что ваше скрытое поле также включает это.

Включить атрибут приманки

Чтобы еще больше увеличить вероятность того, что поисковые роботы Netlify найдут нашу форму, мы добавим последний атрибут: атрибут data-netlify-honeypot. Измените форму, чтобы она выглядела следующим образом:

<form name="contact" data-netlify="true" data-netlify-honeypot="bot-field" method="POST">
  <input type="hidden" value="contact" name="form-name" />
  <input name="first-name" placeholder="First Name">
  <input name="last-name" placeholder="Last Name">
  <input type="submit" value="Submit">
</form>

Эта волшебная конфигурация была результатом примерно пяти часов брутального исправления ошибок. Мои формы Netlify нормально отправлялись в моих проектах NextJS, но по какой-то причине они не отправлялись в моих проектах NuxtJS, что побудило к исследованию.

Я искренне надеюсь, что вам понравилось это краткое руководство о том, как на самом деле использовать Netlify Forms с NuxtJS! Удачного программирования.

Понравилась статья? Перейдите на страницу https://nicksaraev.com/how-to-actually-use-netlify-forms-with-nuxtjs, чтобы узнать больше.