netlify form test

src/components/Contacts/Contacts.scss

@@ -21,6 +21,12 @@
       font-weight: 500;
     }
   }
+  & .contacts-submitted {
+    margin-bottom: 30px;
+    & h2 {
+      margin-bottom: 10px;
+    }
+  }
   & .contacts-form {
     margin-bottom: 50px;
     & h2 {

src/components/Contacts/ContactsForm/ContactsForm.js

@@ -1,16 +1,87 @@
 import React from "react"
 
+function encode(data) {
+  return Object.keys(data)
+    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+    .join("&")
+}
+
 const ContactsFrom = () => {
+  const [state, setState] = React.useState({})
+  const [submitted, setSubmitted] = React.useState(false)
+
+  const handleChange = e => {
+    setState({ ...state, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = e => {
+    e.preventDefault()
+    const form = e.target
+    fetch("/", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: encode({
+        "form-name": form.getAttribute("name"),
+        ...state,
+      }),
+    })
+      .then(() => setSubmitted(true))
+      .catch(error => alert(error))
+  }
+
+  if (submitted)
+    return (
+      <div className="contacts-submitted">
+        <h2>
+          <span role="img" aria-label="done">
+            ✔️
+          </span>{" "}
+          Данные приняты!
+        </h2>
+        <p>
+          Ваше письмо было обработано, в течение нескольких дней вам на почту
+          придет ответ.
+        </p>
+      </div>
+    )
+
   return (
     <div className="contacts-form">
       <h2>форма обратной связи</h2>
-      <form action="#">
+      <form
-        <input placeholder="Ваше имя" type="text" />
+        onSubmit={handleSubmit}
-        <input placeholder="Ваша почта" type="text" />
+        name="contact"
-        <input placeholder="Тема сообщения" type="text" />
+        method="POST"
-        <textarea placeholder="Ваше сообщение..." defaultValue={""} />
+        data-netlify="true"
+      >
+        <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">Отправить</button>
+          <button className="btn-primary" type="submit">
+            Отправить
+          </button>
         </div>
       </form>
     </div>

src/components/Header/Header.js

@@ -8,13 +8,14 @@ import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher"
 import LogoIcon from "../../images/logo-icon.svg"
 import TelegramIcon from "../../images/telegram-icon.svg"
 import TwitterIcon from "../../images/twitter-icon.svg"
+import YadzenIcon from "../../images/yadzen-icon.svg"
 
 const Header = () => {
   const {
     siteMetadata: {
       title,
       menuLinks,
-      social: { twitter, telegram },
+      social: { twitter, telegram, yadzen },
     },
   } = useSiteMetadataQuery()
   const [isScrolled, setIsScrolled] = React.useState(false)
@@ -38,7 +39,7 @@ const Header = () => {
     setIsMobileOpen(!isMobileOpen)
   }
 
-  const renderLinks = () => {
+  const MenuLinks = () => {
     return (
       <ul>
         {menuLinks.map((page, i) => (
@@ -50,13 +51,31 @@ const Header = () => {
                 : null
             }
           >
-            <Link to={page.link}>{page.name}</Link>
+            <Link onClick={() => setIsMobileOpen(false)} to={page.link}>
+              {page.name}
+            </Link>
           </li>
         ))}
       </ul>
     )
   }
 
+  const SocialLinks = () => {
+    return (
+      <>
+        <a href={yadzen} target="_blank" rel="noreferrer">
+          <YadzenIcon />
+        </a>
+        <a href={telegram} target="_blank" rel="noreferrer">
+          <TelegramIcon />
+        </a>
+        <a href={twitter} target="_blank" rel="noreferrer">
+          <TwitterIcon />
+        </a>
+      </>
+    )
+  }
+
   return (
     <header className={isScrolled ? "headerScrolled" : null}>
       <div className="header-content">
@@ -66,15 +85,12 @@ const Header = () => {
         </div>
         <div className="header-content__nav desktop">
           <div className="header-nav__social">
-            <a href={telegram} target="_blank" rel="noreferrer">
+            <SocialLinks />
-              <TelegramIcon />
-            </a>
-            <a href={twitter} target="_blank" rel="noreferrer">
-              <TwitterIcon />
-            </a>
           </div>
           <div className="header-nav__links">
-            <nav>{renderLinks()}</nav>
+            <nav>
+              <MenuLinks />
+            </nav>
           </div>
           <ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
         </div>
@@ -88,19 +104,16 @@ const Header = () => {
           {isMobileOpen ? (
             <>
               <span>{title}</span>
-              <nav>{renderLinks()}</nav>
+              <nav>
+                <MenuLinks />
+              </nav>
               <ThemeSwitcher
                 ready={ready}
                 isDark={isDark}
                 setIsDark={setIsDark}
               />
               <div className="mobile-social">
-                <a href="/" target="_blank">
+                <SocialLinks />
-                  <TelegramIcon />
-                </a>
-                <a href="/" target="_blank">
-                  <TwitterIcon />
-                </a>
               </div>
             </>
           ) : null}

src/components/Header/Header.scss

@@ -54,10 +54,11 @@ header {
         }
         & a {
           text-decoration: none; 
-        }
-        & a:nth-child(1) {
           margin-right: 13px;
         }
+        & a:nth-child(3) {
+          margin-right: 0px;
+        }
       }
       & .header-nav__links nav ul {
         display: flex;
@@ -141,8 +142,8 @@ header {
             fill: #0A0C10;
           }
         }
-        & a:nth-child(2) {
+        & a {
-          margin-left: 20px;
+          margin-right: 15px;
         }
         & a {
           text-decoration: none;
@@ -279,6 +280,9 @@ header {
           & .twitter-svg-social {
             fill: $white-clr;
           }
+          & .yadzen-svg-social {
+            fill: $white-clr;
+          }
         }
       }
       &__button.mobile {

src/images/yadzen-icon.svg

@@ -0,0 +1,19 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#yadzen-icon)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40624 0C4.90261 0.000333036 2.47489 0.0119894 1.22873 1.22891C0.0118761 2.47479 0.000217256 5.01652 0.000217256 8.40618C3.76404 8.2926 5.48522 8.19836 6.85797 6.85787C8.19838 5.48512 8.29266 3.76398 8.40624 0ZM1.22851 15.7712C0.0116588 14.5253 0 11.9836 0 8.59396C3.76383 8.70754 5.48501 8.80178 6.85776 10.1423C8.19817 11.515 8.29245 13.2362 8.40603 16.9998C4.9024 16.9998 2.47468 16.9885 1.22851 15.7712ZM8.59392 16.9998C8.7075 13.2362 8.80178 11.515 10.1422 10.1423C11.5149 8.80178 13.2361 8.70754 17 8.59396C16.9996 11.9836 16.988 14.5253 15.7711 15.7712C14.5249 16.9885 12.0976 16.9998 8.59392 16.9998ZM8.59392 0C8.7075 3.76398 8.80178 5.48512 10.1422 6.85787C11.5149 8.19836 13.2361 8.2926 17 8.40618C16.9996 5.01652 16.988 2.47479 15.7711 1.22891C14.5249 0.0119894 12.0976 0.000333036 8.59392 0Z" fill="black"/>
+<path class="yadzen-svg-social" fill-rule="evenodd" clip-rule="evenodd" d="M10.1422 10.1423C8.80178 11.515 8.7075 13.2362 8.59392 16.9998C12.0976 16.9998 14.5249 16.9885 15.7711 15.7712C16.988 14.5253 16.9996 11.9836 17 8.59396C13.2362 8.70754 11.5149 8.80178 10.1422 10.1423ZM0 8.59396C0 11.9836 0.0116588 14.5253 1.22851 15.7712C2.47468 16.9885 4.9024 16.9998 8.40603 16.9998C8.29245 13.2362 8.19817 11.515 6.85776 10.1423C5.48501 8.80178 3.76383 8.70754 0 8.59396ZM8.40624 0C4.90261 0.000333036 2.47489 0.0119894 1.22873 1.22891C0.0118761 2.47479 0.000217256 5.01652 0.000217256 8.40618C3.76404 8.2926 5.48522 8.19836 6.85797 6.85787C8.19838 5.48512 8.29266 3.76398 8.40624 0ZM10.1422 6.85787C8.80178 5.48512 8.7075 3.76398 8.59392 0C12.0976 0.000333036 14.5249 0.0119894 15.7711 1.22891C16.988 2.47479 16.9996 5.01652 17 8.40618C13.2362 8.2926 11.5149 8.19836 10.1422 6.85787Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 8.59466V8.50074V8.40713C13.2361 8.29323 11.5149 8.19934 10.1422 6.85854C8.80179 5.48607 8.70751 3.76496 8.59392 0.000976562H8.49996H8.40604C8.29246 3.76496 8.19818 5.48607 6.85773 6.85854C5.48498 8.19934 3.7638 8.29323 0 8.40713V8.50074V8.59466C3.7638 8.70853 5.48498 8.80245 6.85773 10.1429C8.19818 11.5157 8.29246 13.2368 8.40604 17.0008H8.49996H8.59392C8.70751 13.2368 8.80179 11.5157 10.1422 10.1429C11.5149 8.80245 13.2361 8.70853 17 8.59466Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="17" y1="16.9998" x2="17" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.01"/>
+<stop offset="0.47509" stop-color="white" stop-opacity="0.01"/>
+<stop offset="0.76042" stop-color="white" stop-opacity="0.04271"/>
+<stop offset="0.99531" stop-color="white" stop-opacity="0.09855"/>
+<stop offset="1" stop-color="white" stop-opacity="0.1"/>
+</linearGradient>
+<clipPath id="yadzen-icon">
+<rect width="17" height="17" fill="white"/>
+</clipPath>
+</defs>
+</svg>