Почему не работает моя контактная форма Netlify? - PullRequest
Новая
       13

Почему не работает моя контактная форма Netlify?

1 голос
/ 02 ноября 2019

Итак, я ломал голову, смотрел учебники и пробовал все в целом. Документы Netlify немного неясны в отношении того, как это сделать, и учебники, которые я наблюдал, немного конфликтуют с ним в общей настройке кода. Может ли кто-нибудь возразить, что это правильный путь и мой код верен? если не подскажете, что можно добавить или удалить, чтобы это сработало? Я не вижу ни одного из представленных мной материалов в Netlify. 

import React from 'react';
import Layout from '../components/layout';
import SEO from '../components/seo';
import './contact.scss';

const ContactPage = () => {
  return (
    <Layout>
      <SEO title="Contact" />
      <h2 style={{ textAlign: 'center' }}>Drop a line and say hi!</h2>
      <h1>Contact Me</h1>
      <div className="contactForm">
        <form name="contact" netlify netlify-honeypot="bot-field" hidden>
          <input type="text" name="name" />
          <input type="email" name="email" />
          <input type="subject" name="subject" />
          <input type="budget" name="budget" />
          <textarea name="message"></textarea>
        </form>

        <form
          name="contact"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          action="/success/"
          data-netlify-recaptcha="true"
        >
          <input type="hidden" name="form-name" value="contact" />

          <input type="text" name="name" placeholder="Your Name" />

          <input type="email" name="email" placeholder="name@name.com" />

          <input
            type="subject"
            name="subject"
            placeholder="Your Question?"
            style={{ width: '70%', float: 'left' }}
          />

          <input
            type="budget"
            name="budget"
            placeholder="Your Budget"
            style={{ marginLeft: '2%', width: '27%', float: 'left' }}
          />

          <textarea
            name="message"
            placeholder="Whats on your mind?"
            style={{ height: '100px' }}
          ></textarea>

          <div data-netlify-recaptcha="true"></div>

          <button type="submit">Send</button>
        </form>
      </div>
    </Layout>
  );
};
export default ContactPage;

Если есть что-то дополнительное, что я могу предоставить, чтобы помочь прояснить это, пожалуйста, дайте мне знать. Я просто не знаю, что хорошо или нет добавлять или убирать из кода, чтобы он был представлен правильно. Netlify признает, что форма существует, но, похоже, ничего не отправлено.

1 Ответ

2 голосов
/ 04 ноября 2019

Я могу рассказать. У меня были трудности, когда я это реализовал.

Одна вещь, которую я заметил из вашего кода: почему у вас есть два тега формы? Удалите первый тег формы и все его содержимое. Я предполагаю, что из-за того, что две формы с одинаковым именем вызывают ваши проблемы.

Вот моя реализация формы, которая работает на Netlify: 

        <form name="form-feedback" // important: Give your form a name
              method="POST" // important: make sure there is some way the data is transfered like here with an HTML request
              data-netlify="true" // important: enable your form in netlify
              netlify-honeypot="bot-field"
              action="/thanks">

          <input name="form-name" value="form-feedback" type="hidden" />
          {/* important: value="form-feedback" needs to be the same as defined in the form tag*/}

          {/* your form fields */}
          <div>
            <Typography variant="body1" gutterBottom>More Feedback</Typography>
            <Input
              type="text"
              name="generalFeedback" // important: give your inputs a name
              placeholder="More Feedback"
              multiline
            />
          </div>

          {/* important: Your form needs to be submitted somehow */}
          <Button type="submit" value="Submit">Send Feedback</Button>
        </form>

Важные биты комментируются с important:.

Еще один совет: создайте базовый проект, форма которого имеет только компонент на своей странице индекса. Затем создайте фиктивный сайт, который вы можете загрузить, чтобы проверить и протестировать форму в этой изолированной среде.

...