Ввод формы не отображается при загрузке первой страницы

Question

Отсутствует ввод формы

Мой ввод формы не отображается при загрузке первой страницы!Когда я иду на другую страницу и захожу, все решается.И это единственная проблема с netlify, когда я развернул в работе, проблема исчезла (проблема также не очевидна в разработке или в комплекте с gatsby serve).

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

Это 2 развертывания:

[x] netlify: https://vigilant -torvalds-72b098.netlify.com /

[x] всплеск: http://hallowed -sand.surge.sh /

Я попытался изменить имена форм, но безрезультатно.

Есть ли обходные пути для этой проблемы?

Это мой код

Этот точный код работает найти с моим другим мульти-страница (см. веб-сайт).Также все работает найти, когда я захожу на другую страницу на сайте.

import Grid from "@material-ui/core/Grid"
import { FaMapMarkerAlt, FaTruck } from "react-icons/fa"
import { Link } from "gatsby"
import { navigateTo } from "gatsby-link"

// Styles
import "./footer.scss"
import "../elements/subscribeForm.scss"

// Images
import nglogo from "../images/ng-logo.png"

// Form Helpers
function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

export default class footer extends Component {
  state = {
    footerEmail: "",
    type: "email"
  }

  handleChange = e => {
    this.setState({
      footerEmail: e.target.value,
    })
  }

  handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "subscribeFormFooter",
        ...this.state,
      }),
    })
      .then(() => navigateTo(form.getAttribute("action")))
      .catch(error => alert(error))
  }

  render() {
    return (
      <footer className="footer">
        <Grid container className="footer__item" spacing={32}>
          <Grid item xs={12} sm={12} md={5} lg={5} className="footer__item1">
            <h1>Be Future Ready</h1>
            <p>
              Our dedication to innovation and efficiency helps us provide our
              customers with long-term savings. <br />
              Subscribe to our newsletter to receive timely updates on products,
              services and global developments.
            </p>
            <form
              name="subscribeFormFooter"
              method="post"
              action="thankyou/"
              data-netlify="true"
              onSubmit={this.handleSubmit}
              className="subscribe__input"
            >
              <input
                type={this.state.type}
                name="footerEmail"
                placeholder="Email Address"
                onChange={this.handleChange}
                value={this.state.footerEmail}
              />
              <button
                type="submit"
                disabled={!this.state.footerEmail}
                style={
                  !this.state.footerEmail
                    ? { backgroundColor: "#c8d6e5", cursor: "default" }
                    : {}
                }
              >
                Subscribe
              </button>
            </form>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item2">
            <h2>Sitemap</h2>
            <ul>
              <Link to="/projects">
                <li>Projects</li>
              </Link>
              <Link to="/downloads">
                <li>Downloads</li>
              </Link>
              <Link to="quote">
                <li>Quote</li>
              </Link>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={2} lg={2} className="footer__item3">
            <h2>Connect</h2>
            <ul>
              <a href="https://www.facebook.com/gundapowerpvt/" target="blank">
                <li>Facebook</li>
              </a>
              <a
                href="https://www.linkedin.com/company/14446246/"
                target="blank"
              >
                <li>LinkedIn</li>
              </a>
              <a href="mailto:info@gundapower.com" target="_top blank">
                <li>Email</li>
              </a>
            </ul>
          </Grid>
          <Grid item xs={12} sm={12} md={3} lg={3} className="footer__item4">
            <h2>Contact</h2>
            <h5>
              <FaMapMarkerAlt /> Administrative Office
            </h5>
            <p>123/10 Pannipitiya Road Battaramulla, Sri Lanka</p>
            <h5>
              <FaTruck /> Warehouse Location
            </h5>
            <p>184, Buthgamuwa Road Rajagiriya, Sri Lanka</p>
          </Grid>
        </Grid>
        <Grid container>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={12}
            className="footer__copyright"
          >
            © Copyright {new Date().getFullYear()} Gunda Power. All Rights
            Reserved.
            <a href="https://www.stem.lk" target="blank">
              Designed by Stem.lk
              <img className="footer__nglogo" src={nglogo} alt="nugoo" />
            </a>
          </Grid>
        </Grid>
      </footer>
    )
  }
}

Ввод должен отображаться, но это не так.Хорошо работает на разработке, комплектации, а также развертывании скачков.Так что я думаю, что это как-то связано с ребятами из netlify.Любые идеи будут высоко оценены.

Answer 1

Добавление ярлыка устранило проблему!

Черт возьми

<label htmlFor="newsletterEmail" style={{ display: "none" }}>
                  Email
                </label>
                <input
                  type="email"
                  name="newsletterEmail"
                  placeholder="Email Address"
                  onChange={this.handleChange}
                  value={this.state.newsletterEmail}
                />