form upd

src/components/Contacts/Contacts.scss

@@ -26,6 +26,13 @@
     & h2 {
       margin-bottom: 10px;
     }
+    & .reload-form {
+      text-decoration: underline;
+      cursor: pointer;
+      color: #6ab0f3;
+      background: none;
+      font-size: 16px;
+    }
   }
   & .contacts-form {
     margin-bottom: 50px;
@@ -33,10 +40,12 @@
       margin-bottom: 30px;
     }
     & form {
+      & .form-content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         padding: 0 20px;
+      }
       & input {
         margin-bottom: 10px;
         border-radius: 5px;

src/components/Contacts/ContactsForm/ContactsForm.js

@@ -9,6 +9,7 @@ function encode(data) {
 const ContactsFrom = () => {
   const [state, setState] = React.useState({})
   const [submitted, setSubmitted] = React.useState(false)
+  const [error, setError] = React.useState(false)
 
   const handleChange = e => {
     setState({ ...state, [e.target.name]: e.target.value })
@@ -26,9 +27,28 @@ const ContactsFrom = () => {
       }),
     })
       .then(() => setSubmitted(true))
-      .catch(error => alert(error))
+      .catch(error => {
+        console.error(error)
+        setError(true)
+      })
   }
 
+  if (error)
+    return (
+      <div className="contacts-submitted">
+        <h2>
+          <span role="img" aria-label="done">
+            ❌
+          </span>{" "}
+          Произошла ошибка при отправке.
+        </h2>
+        <p>
+          При обработке вашго письма произошла ошибка, попробуйте повторить
+          запрос через некоторое время.
+        </p>
+      </div>
+    )
+
   if (submitted)
     return (
       <div className="contacts-submitted">
@@ -42,6 +62,9 @@ const ContactsFrom = () => {
           Ваше письмо было обработано, в течение нескольких дней вам на почту
           придет ответ.
         </p>
+        <button className="reload-form" onClick={() => setSubmitted(false)}>
+          повторить запрос
+        </button>
       </div>
     )
 
@@ -53,7 +76,13 @@ const ContactsFrom = () => {
         name="contact"
         method="POST"
         data-netlify="true"
+        data-netlify-honeypot="bot-field"
       >
+        <div hidden>
+          Не заполняйте это
+          <input name="bot-field" onChange={handleChange} />
+        </div>
+        <div className="form-content">
           <input
             onChange={handleChange}
             name="name"
@@ -83,6 +112,7 @@ const ContactsFrom = () => {
               Отправить
             </button>
           </div>
+        </div>
       </form>
     </div>
   )