Sending data from the form to my email


  • The address of the form on the website is Konakty

  • After sending the form, I want the data from the form to go to my email, but instead an error pops up
    ** Page Not Found

Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

Back to our site

If this is your site, and you weren’t expecting a 404 for this path, please visit Netlify’s “page not found” support guide for troubleshooting tips.**

  • The project is created in React. In the public folder I put the file _redirects with the code (/* /index.html 200)

  • For the Netlify project, I activated “forms detection” in the FORMS tab.

  • It’s my first React project that I’m about to publish, so please bear with me, but I’m stuck with this problem and haven’t found a solution to my problem in other links on your forum. I am also solving it on the CZECH REPUBLIC forum, but so far no one has been found who has any experience with Netlify.

  • Here I am posting the code of the component with the form.

import "./css/Email.css";
import { useState } from "react";

const Email = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [text, setText] = useState("");
  const [error, setError] = useState("");

  const validateName = (name) => {
    const nameRegex = /^[a-zA-ZěščřžýáíéúůĚŠČŘŽÝÁÍÉÚŮ,:.() -]{4,20}$/;
    return nameRegex.test(name);

  const validateEmail = (email) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    return emailRegex.test(email);

  const validateText = (text) => {
    const textRegex = /^[a-zA-Z0-9ěščřžýáíéúůĚŠČŘŽÝÁÍÉÚŮ,:.() -]{10,100}$/;
    return textRegex.test(text);

  const btnSubmit = () => {
    // e.preventDefault();

    if (!name || !email || !text) {
      setError("Všechna pole jsou povinná");
    } else if (!validateName(name)) {
      setError("Délku Jména 4 - 100 znaků. Povolené znaky: ,.():-");
    } else if (!validateEmail(email)) {
      setError("Neplatný formát e-mailu");
    } else if (!validateText(text)) {
      setError("Délku text 10 - 100 znaků. Povolené znaky: ,.():-");
    } else {
      setError("Zpráva odeslána, brzy Vás kontaktuji zpět");

        // setName("");
        // setEmail("");
        // setText("");

  return (
    <section className="kontakty">
      {/* Nastavení pro Netlify */}
      <form name="contact" method="POST" data-netlify="true" action="/kontakty">
        <h1>Poslat E-mail</h1>
        <div className="kontakty-prvniRadek">
          <div className="sloupec">
              placeholder="Zadejte jméno"
              onChange={(e) => setName(}
          <div className="sloupec">
              placeholder="Zadejte e-mail"
              onChange={(e) => setEmail(}
          onChange={(e) => setText(}
          placeholder="Zadejte text"
        <div className="container-btnSubmit">
          <input className="btnSubmit" type="submit" onClick={btnSubmit} />
        {/* Inputy pro Netify */}
        value="Zpráva z mé webovky"
        value={`Jméno: ${name}\nE-mail: ${email}\nText: ${text}`}

export default Email;

Hi @arevyhs, the action property on the form indicates that the default success page will be replaced with a custom page you create.

So for example entering the path e.g (/kontakty) of your custom page means that it must be relative to where the index.js file is located in the project root.
Therefore you need to create a kontakty.js file with the content you want to display.
If you don’t want to display a custom success page then remove the action attribute

Kindly check the resource below on how to add a custom success page with React

You can also checkout the Netlify Forum links below if you have not already done so since the problem is similar to yours. The suggestions there might be helpful.

If the above does not work, if possible kindly share a repository of your project so that I can help with the debugging.