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 {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      padding: 0 20px;
+      & .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,35 +76,42 @@ const ContactsFrom = () => {
         name="contact"
         method="POST"
         data-netlify="true"
+        data-netlify-honeypot="bot-field"
       >
-        <input
-          onChange={handleChange}
-          name="name"
-          placeholder="Ваше имя"
-          type="text"
-        />
-        <input
-          onChange={handleChange}
-          name="email"
-          placeholder="Ваша почта"
-          type="email"
-        />
-        <input
-          onChange={handleChange}
-          name="subject"
-          placeholder="Тема сообщения"
-          type="text"
-        />
-        <textarea
-          onChange={handleChange}
-          name="message"
-          placeholder="Ваше сообщение..."
-          defaultValue={""}
-        />
-        <div className="submit-btn">
-          <button className="btn-primary" type="submit">
-            Отправить
-          </button>
+        <div hidden>
+          Не заполняйте это
+          <input name="bot-field" onChange={handleChange} />
+        </div>
+        <div className="form-content">
+          <input
+            onChange={handleChange}
+            name="name"
+            placeholder="Ваше имя"
+            type="text"
+          />
+          <input
+            onChange={handleChange}
+            name="email"
+            placeholder="Ваша почта"
+            type="email"
+          />
+          <input
+            onChange={handleChange}
+            name="subject"
+            placeholder="Тема сообщения"
+            type="text"
+          />
+          <textarea
+            onChange={handleChange}
+            name="message"
+            placeholder="Ваше сообщение..."
+            defaultValue={""}
+          />
+          <div className="submit-btn">
+            <button className="btn-primary" type="submit">
+              Отправить
+            </button>
+          </div>
         </div>
       </form>
     </div>