Netlify не распознает форму в приложении nuxt

Мы реализовали простое приложение nuxt с базовой формой и развернули его для netlify. При нажатии кнопки «Отправить» формы мы получаем 404.

Здесь вы можете найти ссылку на развернутое приложение netlify:
РЕДАКТИРОВАТЬ -> Удаленная ссылка

После просмотра руководства по устранению неполадок они указали, что добавленные атрибуты «netlify» или «data-netlify =« true »не должны быть видимыми, если netlify распознал вашу форму, но они есть.

Кроме того, форму нельзя найти на вкладке конфигурации "form" бэкэнда netlify.

Конфигурация Nuxt:
SPA
Попутный ветер

Мы попытались добавить необходимые атрибуты для netlify: netlify или data-netlify = "true" & netlify-honeypot = "bot-field"

Мы также добавили библиотеку для предварительного рендеринга, которая называется prerender-spa-plugin.

Здесь вы можете найти содержимое страницы contact.vue. Простая форма с атрибутами name, установленными согласно документации netlify.

<template>
  <div>
    <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
      <p class="hidden">
        <label
          >Don’t fill this out if you're human: <input name="bot-field"
        /></label>
      </p>
      <p>
        <label
          >Name
          <input
            type="text"
            name="name"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <label
          >Email
          <input
            type="email"
            name="email"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
        /></label>
      </p>
      <p>
        <button
          type="submit"
          name="submit"
          class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        >
          Send
        </button>
      </p>
    </form>
  </div>
</template>

<script>
export default {};
</script>

<style>
.hidden {
  display: none;
}
</style>

Было бы здорово, если бы нам удалось это исправить, чтобы netlify наконец распознал нашу форму.


netlify forms vue.js nuxt.js
person OfficialLolodrom    schedule 25.07.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Netlify имеет встроенную обработку форм. Наши боты для сборки делают это, анализируя ваши HTML-файлы непосредственно во время развертывания, поэтому вам не нужно выполнять вызов API или включать дополнительный JavaScript на свой сайт.

Форма должна быть в обработанных файлах во время развертывания. Проблема с режимом SPA заключается в том, что ни одна из ваших страниц на самом деле не отображается как HTML. Вы можете проверить это, щелкнув страницу правой кнопкой мыши и выбрав «Просмотреть исходный код страницы». Вы не сможете найти форму.

Netlify решает эту проблему здесь в своих документах.

У них есть специальный пост для исправления этого для приложения Vue здесь

Еще немного покопавшись в проблеме, и мы найдем решение Nuxt здесь :

Поместите в static/form-dummy/index.html следующее:

<form name="MYFORM" action="/form/success" netlify>
  <!-- form controls here -->
</form>

Поместите следующее в pages/form/index.vue (или всякий раз, когда вы назвали свой файл Vue)

<form name="MYFORM" action="/form/success" method="post">
  <input type="hidden" name="form-name" value="MYFORM" />
  <!-- form controls here -->
</form>

Из сообщения:

Вам просто нужно убедиться, что вы добавили это скрытое в компонент Vue, чтобы Netlify распознал отправку формы как связанную с формой под названием MYFORM. Я думаю, вам также необходимо убедиться, что все входные данные, для которых вы хотите получать данные, присутствуют в обеих формах.

person HMilbradt    schedule 26.07.2019
comment
извините за поздний ответ, но я наконец смог проверить ваш подход. Работал как шарм. Большое спасибо! - person OfficialLolodrom; 30.07.2019