Add reCAPTCHA validation to contact form and enhance styling

layout/style-scss/kontakt-v3.scss

@@ -1,6 +1,11 @@
 @import 'variables';
 @import '_mixins';
 
+html {
+	scroll-behavior: smooth;
+	scroll-padding-top: 105px;
+}
+
 strong {
 	font-weight: 700;
 }
@@ -206,7 +211,7 @@ strong {
 					align-items: center;
 					justify-content: flex-start;
 					padding: 22px 46px 19px;
-					background: #2e2d2c;
+					background: #1d1d1e;
 					border-radius: 3px;
 					font-weight: 200;
 
@@ -392,11 +397,30 @@ strong {
 
 									._autoryzowani_partnerzy {
 										._title {
+											position: relative;
+											max-width: fit-content;
+											margin-left: auto;
+
+											color: #3f3f3f;
 											font-size: 18px;
+											font-weight: 300;
 											text-align: right;
 											text-transform: uppercase;
-											text-decoration: underline;
+											// text-decoration: underline;
-											margin-bottom: 10px;
+											// margin-bottom: 10px;
+											padding-bottom: 2px;
+											margin-bottom: -3px;
+											line-height: 1;
+
+											&::before {
+												content: '';
+												position: absolute;
+												left: 0;
+												right: 0;
+												bottom: 0;
+												height: 1px;
+												background: #bbbbbb;
+											}
 										}
 
 										._grid {
@@ -448,7 +472,7 @@ strong {
 										._city {
 											padding-bottom: 30px;
 											margin-bottom: 30px;
-											border-bottom: 1px solid #bbbbbb;
+											// border-bottom: 1px solid #bbbbbb;
 
 											._description {
 												height: 100%;
@@ -468,20 +492,30 @@ strong {
 														display: block;
 														margin-bottom: 5px;
 
-														&::after {
+														// &::after {
-															content: '';
+														// 	content: '';
-															position: absolute;
+														// 	position: absolute;
-															bottom: 0;
+														// 	bottom: 0;
-															left: 50%;
+														// 	left: 50%;
-															transform: translateX(-50%);
+														// 	transform: translateX(-50%);
-															width: 50px;
+														// 	width: 50px;
-															height: 2px;
+														// 	height: 2px;
-															background: #fff246;
+														// 	background: #fff246;
-														}
+														// }
 													}
 
 													strong {
 														position: relative;
+
+														&::after {
+															content: '';
+															position: absolute;
+															bottom: -5px;
+															left: 0;
+															right: 0;
+															height: 2px;
+															background: #fff246;
+														}
 													}
 												}
 											}
@@ -550,6 +584,28 @@ strong {
 								gap: 40px;
 							}
 
+							&.export {
+								max-width: 920px;
+
+								._person__wrapp {
+									@include respond-above(md) {
+										flex-basis: 260px;
+									}
+
+									._person {
+										p {
+											strong {
+												font-weight: 700;
+
+												a {
+													font-weight: 700;
+												}
+											}
+										}
+									}
+								}
+							}
+
 							._person__wrapp {
 								flex-basis: 320px;
 								text-align: center;
@@ -676,8 +732,8 @@ strong {
 		}
 
 		._left {
-			width: 30%;
+			width: 40%;
-			min-width: 350px;
+			min-width: 520px;
 			background: url('/layout/images/contact-left-bg.png') no-repeat;
 			background-size: cover;
 			padding: 60px;
@@ -686,6 +742,11 @@ strong {
 			display: flex;
 			flex-direction: column;
 
+			@include respond-below(lg) {
+				padding: 60px 30px;
+				min-width: 410px;
+			}
+
 			@include respond-below(md) {
 				width: 100%;
 				min-width: unset;
@@ -739,6 +800,15 @@ strong {
 				grid-template-columns: 1fr;
 				gap: 10px;
 
+				._head_link {
+					> a {
+						color: #fff;
+						font-family: $font3;
+						font-weight: 600;
+						cursor: pointer;
+					}
+				}
+
 				._head {
 					font-weight: 600;
 					cursor: pointer;
@@ -776,14 +846,25 @@ strong {
 			}
 
 			._accounts {
-				margin-top: 400px;
+				margin-top: 280px;
+				display: grid;
+				grid-template-columns: 1fr auto;
+				grid-template-areas: 'icon text' 'numbers numbers';
+				align-items: center;
+				gap: 20px 30px;
 
 				@include respond-below(md) {
 					margin-top: 50px;
+					margin-bottom: 50px;
+					grid-template-columns: 1fr 1fr;
 				}
 
 				._icon {
-					margin-bottom: 20px;
+					grid-area: icon;
+					// margin-bottom: 20px;
+					width: 100%;
+					max-width: 78px;
+					margin-left: auto;
 
 					@include respond-below(md) {
 						filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
@@ -792,33 +873,54 @@ strong {
 				}
 
 				._text {
+					grid-area: text;
 					font-size: 15px;
+					margin: 0;
 
+					// @include respond-below(md) {
+					// 	margin-bottom: 20px;
+					// }
 					@include respond-below(md) {
-						margin-bottom: 20px;
+						text-align: left;
 					}
 				}
 
 				._accounts_numbers {
-					@include respond-above(md) {
+					grid-area: numbers;
-						display: none;
+					font-size: 20px;
-					}
+					font-weight: 300;
-					@include respond-below(md) {
+
-						margin-bottom: 50px;
+					// @include respond-above(md) {
+					// 	display: none;
+					// }
+					// @include respond-below(md) {
+					// 	margin-bottom: 50px;
+					// }
+
+					@include respond-below(lg) {
+						font-size: 17px;
 					}
 				}
 			}
 		}
 
 		._right {
-			width: 70%;
+			// width: 60%;
 
-			@include respond-below(md) {
+			// @include respond-below(md) {
-				width: 100%;
+			// 	width: 100%;
+			// }
+
+			._h1 {
+				color: #181c1d;
+				font-size: 32px;
+				font-family: $font3;
+				font-weight: 300;
+				padding: 40px 60px 0px 60px;
 			}
 
 			._map {
-				padding: 60px 60px 0 60px;
+				padding: 30px 60px 0 60px;
 
 				@include respond-below(md) {
 					padding: 60px 0;
@@ -826,7 +928,7 @@ strong {
 			}
 
 			.contact-form-box {
-				padding: 60px;
+				padding: 60px 30px 30px 30px;
 				background: #f5f5f5;
 
 				@include respond-below(md) {
@@ -834,13 +936,13 @@ strong {
 				}
 			}
 
-			._accounts_numbers {
+			// ._accounts_numbers {
-				padding: 120px 60px 60px 60px;
+			// 	padding: 120px 60px 60px 60px;
 
-				@include respond-below(md) {
+			// 	@include respond-below(md) {
-					display: none;
+			// 		display: none;
-				}
+			// 	}
-			}
+			// }
 
 			.c-row {
 				&-1 {
@@ -1074,10 +1176,29 @@ strong {
 						}
 					}
 
+					.form_actions {
+						@include respond-below(xs) {
+							flex-direction: column;
+							align-items: center;
+							row-gap: 20px;
+						}
+					}
+
+					.g-recaptcha {
+						@include respond-above(xs) {
+							max-width: fit-content;
+							margin-left: auto;
+						}
+						@include respond-below(xs) {
+							display: flex;
+							justify-content: center;
+						}
+					}
+
 					button[type='submit'] {
 						background: #fbf27a;
 						width: fit-content;
-						margin-left: auto;
+						// margin-left: auto;
 						border: none;
 
 						color: #1d1d1e;
@@ -1099,6 +1220,10 @@ strong {
 						img {
 							margin-left: 10px;
 						}
+
+						@include respond-above(xs) {
+							margin-left: 20px;
+						}
 					}
 				}
 			}

plugins/special-actions-middle.php

@@ -313,63 +313,81 @@ if ( \S::get('action') == 'send-contact-landing' and \S::get( 'token' ) == \S::g
 
 if ( \S::get('action') == 'send-contact-form-new' and \S::get( 'token' ) == \S::get_session( 'contact-form-token' ) and !\S::get( 'website' ) )
 {
-  $countfiles = count($_FILES['files']['name']);
+  if(isset($_POST['g-recaptcha-response'])){
-
+    $captcha=$_POST['g-recaptcha-response'];
-  for ($i = 0; $i < $countfiles; $i++)
-  {
-    $filename = $_FILES['files']['name'][$i];
-    if ($filename and pathinfo( $_FILES['files']['name'][$i], PATHINFO_EXTENSION ) != 'php' )
-    {
-      move_uploaded_file($_FILES['files']['tmp_name'][$i], 'temp/' . $filename);
-      $files_to_send[] = 'temp/' . $filename;
-    }
   }
+  if(!$captcha){
+    \S::alert( "Weryfikacja reCaptcha nie powiodła się. Proszę spróbować ponownie." );
+    header( 'Location: ' . $_SERVER['REQUEST_URI'] );
+    exit;
+  }
+  $secretKey = "6LfaovglAAAAAAz84QLdbONodP1yJUpSOVTnFMt4";
+  $ip = $_SERVER['REMOTE_ADDR'];
+  // post request to server
+  $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) .  '&response=' . urlencode($captcha);
+  $response = file_get_contents($url);
+  $responseKeys = json_decode($response,true);
+  // should return JSON with success as true
+  if($responseKeys["success"]) {
+    $countfiles = count($_FILES['files']['name']);
 
-
+    for ($i = 0; $i < $countfiles; $i++)
-  if (
-      \S::get( 'name' )
-    and
-      \S::get( 'email' )
-    and
-      \S::get( 'postal_code' )
-    and
-      \S::get( 'phone' )
-    and
-      \S::get( 'voivodeship' )
-    and
-      \S::get( 'client' )
-    and
-      strposa( \S::get( 'name' ), $spam_words ) === false
-    and
-      strposa( \S::get( 'email' ), $spam_words ) === false
-    and
-      strposa( \S::get( 'postal_code' ), $spam_words ) === false
-    and
-      strposa( \S::get( 'phone' ), $spam_words ) === false
-    and
-      strposa( \S::get( 'message' ), $spam_words ) === false )
-  {
-    $text = '<p><b>Imię:</b> ' . \S::get('name') . '</p>';
-    $text .= '<p><b>Email:</b> ' . \S::get('email') . '</p>';
-    $text .= '<p><b>Kod pocztowy:</b> ' . \S::get('postal_code') . '</p>';
-    $text .= '<p><b>Województwo:</b> ' . \S::get('voivodeship') . '</p>';
-    $text .= '<p><b>Klient:</b> ' . \S::get('client') . '</p>';
-    $text .= '<p><b>Telefon:</b> ' . \S::get('phone') . '</p>';
-    $text .= '<p><b>Wiadomość:</b> ' . nl2br(\S::get('message')) . '</p>';
-    $text .= '<p style="font-size: 13px; color: #ccc; margin-top: 50px;"><b>Wysłano:</b> ' . date( 'Y-m-d H:i:s' ) . '</p>';
-    
-    saveContactData( \S::get('name'), \S::get('email'), \S::get('phone'), \S::get('message'), \S::get('postal_code'), '', '', '', '', );
-
-    if ( \S::send_email( 'l.paczkowska@vidok.com', 'Wiadomość ze strony vidok.com', $text, \S::get('email'), $files_to_send ) )
     {
-      \S::alert( \S::lang('wiadomosc-zostala-wyslana' ) );
+      $filename = $_FILES['files']['name'][$i];
+      if ($filename and pathinfo( $_FILES['files']['name'][$i], PATHINFO_EXTENSION ) != 'php' )
+      {
+        move_uploaded_file($_FILES['files']['tmp_name'][$i], 'temp/' . $filename);
+        $files_to_send[] = 'temp/' . $filename;
+      }
+    }
+
+
+    if (
+        \S::get( 'name' )
+      and
+        \S::get( 'email' )
+      and
+        \S::get( 'postal_code' )
+      and
+        \S::get( 'phone' )
+      and
+        \S::get( 'voivodeship' )
+      and
+        \S::get( 'client' )
+      and
+        strposa( \S::get( 'name' ), $spam_words ) === false
+      and
+        strposa( \S::get( 'email' ), $spam_words ) === false
+      and
+        strposa( \S::get( 'postal_code' ), $spam_words ) === false
+      and
+        strposa( \S::get( 'phone' ), $spam_words ) === false
+      and
+        strposa( \S::get( 'message' ), $spam_words ) === false )
+    {
+      $text = '<p><b>Imię:</b> ' . \S::get('name') . '</p>';
+      $text .= '<p><b>Email:</b> ' . \S::get('email') . '</p>';
+      $text .= '<p><b>Kod pocztowy:</b> ' . \S::get('postal_code') . '</p>';
+      $text .= '<p><b>Województwo:</b> ' . \S::get('voivodeship') . '</p>';
+      $text .= '<p><b>Klient:</b> ' . \S::get('client') . '</p>';
+      $text .= '<p><b>Telefon:</b> ' . \S::get('phone') . '</p>';
+      $text .= '<p><b>Wiadomość:</b> ' . nl2br(\S::get('message')) . '</p>';
+      $text .= '<p style="font-size: 13px; color: #ccc; margin-top: 50px;"><b>Wysłano:</b> ' . date( 'Y-m-d H:i:s' ) . '</p>';
+      
+      saveContactData( \S::get('name'), \S::get('email'), \S::get('phone'), \S::get('message'), \S::get('postal_code'), '', '', '', '', );
+
+      if ( \S::send_email( 'l.paczkowska@vidok.com', 'Wiadomość ze strony vidok.com', $text, \S::get('email'), $files_to_send ) )
+      {
+        \S::alert( \S::lang('wiadomosc-zostala-wyslana' ) );
+      }
+      else
+        \S::alert( \S::lang('wiadomosc-niezostala-wyslana' ) );
     }
     else
       \S::alert( \S::lang('wiadomosc-niezostala-wyslana' ) );
+  } else {
+    \S::alert( "Jesteś robotem!" );
   }
-  else
+  header( 'Location: ' . $_SERVER['REQUEST_URI'] );
-    \S::alert( \S::lang('wiadomosc-niezostala-wyslana' ) );
-
-  header('Location: ' . $_SERVER['REQUEST_URI']);
   exit;
 }

templates_user/page-contact-v3.php

@@ -37,6 +37,9 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
             <a href="tel:+48178595660">+48 17 859 56 60</a><br>
             <a href="mailto:biuro@vidok.com">biuro@vidok.com</a>
           </div>
+          <div class="_head_link" accordion="4">
+            <a href="#obsluga-klienta">OBSŁUGA KLIENTA</a>
+          </div>
           <div class="_head" accordion="2">
             SERWIS <img src="/layout/images/arrow-white-down.svg">
           </div>
@@ -64,7 +67,7 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
             PLN: PL 31 1050 1562 1000 0090 3034 4197
           </div>
         </div>
-        <div class="_h1">ZNAJDŹ<br>SALON</div>
+        <!-- <div class="_h1">ZNAJDŹ<br>SALON</div> -->
         <div class="_socials">
           <a href="https://www.facebook.com/vidok.okna.drzwi/" target="_blank">
             <img src="/layout/images/icon-facebook-white.svg">
@@ -152,16 +155,18 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
                   <label for="zgoda_2">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu otrzymywania materiałów reklamowych.</label>
                 </div>
               </div>
-              <div class="_1_column _right">
+              <div class="_1_column form_actions">
+                <div class="g-recaptcha" data-sitekey="6LfaovglAAAAAAieLVC7i4xGkQA5ufXUbWLipSbp"></div>
                 <button type="submit">Wyślij<img src="/images/contact-icon-check.svg"></button>
               </div>
             </form>
           </div>
         </div>
-        <div class="_accounts_numbers">
+        <!-- <div class="_accounts_numbers">
           EUR: PL 84 1050 1562 1000 0090 3034 4213<br>
           PLN: PL 31 1050 1562 1000 0090 3034 4197
-        </div>
+        </div> -->
+        <div class="_h1">ZNAJDŹ SALON</div>
         <div class="_map">
           <div id="map" style="width: 100%; height: 500px;"></div>
         </div>
@@ -175,8 +180,8 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
 
       <div class="row row-2">
         <div class="col-12">
-          <div class="contact_accordion">
+          <div class="contact_accordion" id="obsluga-klienta">
-            <div class="_title" accordion="1">Obsługa klientów indywidualnych<img src="/images/contact-icon-arrow-down.svg"></div>
+            <div class="_title" accordion="1">Obsługa klientów <strong>indywidualnych</strong><img src="/images/contact-icon-arrow-down.svg"></div>
             <div class="_content _2_columns" accordion="1" style="display: none;">
               <div class="_left">
                 <a href="#" voivodeship="dolnoslaskie">dolnośląskie <img src="/images/contact-icon-arrow-down.svg"></a>
@@ -475,26 +480,6 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
                         </div>
                       </div>
                       <!-- c-2 -->
-                      <div class="_city">
-                        <div class="_description">
-                          <p>
-                            ul. Piłsudskiego 8<br />
-                            <span>37-100 <strong>Łańcut</strong></span>
-                          </p>
-                          <a class="contact-btn" href="/salon-lancut">więcej o salonie</a>
-                        </div>
-                      </div>
-                      <!-- c-3 -->
-                      <div class="_city">
-                        <div class="_description">
-                          <p>
-                            ul. Jagiellońska 16<br />
-                            <span>38-500 <strong>Sanok</strong></span>
-                          </p>
-                          <a class="contact-btn" href="/salon-sanok">więcej o salonie</a>
-                        </div>
-                      </div>
-                      <!-- c-5 -->
                       <div class="_city">
                         <div class="_description">
                           <p>
@@ -504,7 +489,7 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
                           <a class="contact-btn" href="/rzeszow-salon">więcej o salonie</a>
                         </div>
                       </div>
-                      <!-- c-4 -->
+                      <!-- c-3 -->
                       <div class="_city">
                         <div class="_description">
                           <p>
@@ -514,7 +499,17 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
                           <a class="contact-btn" href="/salon-krosno">więcej o salonie</a>
                         </div>
                       </div>
-                      <!-- c-6 -->
+                      <!-- c-5 -->
+                      <div class="_city">
+                        <div class="_description">
+                          <p>
+                            ul. Piłsudskiego 8<br />
+                            <span>37-100 <strong>Łańcut</strong></span>
+                          </p>
+                          <a class="contact-btn" href="/salon-lancut">więcej o salonie</a>
+                        </div>
+                      </div>
+                      <!-- c-4 -->
                       <div class="_city">
                         <div class="_description">
                           <p>
@@ -524,6 +519,16 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
                           <a class="contact-btn" href="/salon-przemysl">więcej o salonie</a>
                         </div>
                       </div>
+                      <!-- c-6 -->
+                      <div class="_city">
+                        <div class="_description">
+                          <p>
+                            ul. Jagiellońska 16<br />
+                            <span>38-500 <strong>Sanok</strong></span>
+                          </p>
+                          <a class="contact-btn" href="/salon-sanok">więcej o salonie</a>
+                        </div>
+                      </div>
                       <!-- c-7 -->
                       <div class="_city">
                         <div class="_description">
@@ -1163,7 +1168,7 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
               </div>
             </div>
 
-            <div class="_title" accordion="6">Obsługa klientów instytucjonalnych<img src="/images/contact-icon-arrow-down.svg"></div>
+            <div class="_title" accordion="6">Obsługa klientów <strong>instytucjonalnych</strong><img src="/images/contact-icon-arrow-down.svg"></div>
             <div class="_content" accordion="6" style="display: none;">
               <div class="_city_content _city_content_2">
                 <div class="_persons">
@@ -1275,7 +1280,7 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
             <div class="_title" accordion="3">Obsługa partnerów handlowych <strong>EXPORT</strong><img src="/images/contact-icon-arrow-down.svg"></div>
             <div class="_content" accordion="3" style="display: none;">
               <div class="_city_content _city_content_2">
-                <div class="_persons">
+                <div class="_persons export">
                   <div class="_person__wrapp">
                     <div class="_person_title">RYNEK NIEMIECKI <span>|</span> DE</div>
                     <div class="_person">
@@ -1370,19 +1375,19 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
       styles: [{
           elementType: "geometry",
           stylers: [{
-            color: "#333333"
+            color: "#F4F4F4"
           }]
         },
         {
           elementType: "labels.text.stroke",
           stylers: [{
-            color: "#333333"
+            color: "F4F4F4"
           }]
         },
         {
           elementType: "labels.text.fill",
           stylers: [{
-            color: "#B1B1B1"
+            color: "#181C1D"
           }]
         },
 
@@ -1391,21 +1396,21 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
           featureType: "road.highway",
           elementType: "geometry",
           stylers: [{
-            color: "#E5C163"
+            color: "#FFF246"
           }]
         }, // Autostrady
         {
           featureType: "road.highway",
           elementType: "geometry.stroke",
           stylers: [{
-            color: "#E5C163"
+            color: "#FFF246"
           }]
         }, // Kontur autostrady
         {
           featureType: "road.highway",
           elementType: "labels.text.fill",
           stylers: [{
-            color: "#E5C163"
+            color: "#FFF246"
           }]
         }, // tekst
 
@@ -1414,21 +1419,21 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
           featureType: "road.arterial",
           elementType: "geometry",
           stylers: [{
-            color: "#535353"
+            color: "#FFF246"
           }]
         }, // Główne drogi
         {
           featureType: "road.local",
           elementType: "geometry",
           stylers: [{
-            color: "#535353"
+            color: "#FFF246"
           }]
         }, // Ulice
         {
           featureType: "road",
           elementType: "labels.text.fill",
           stylers: [{
-            color: "#B1B1B1"
+            color: "#FFF246"
           }]
         }, // tekst
 
@@ -1452,14 +1457,14 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
           featureType: "water",
           elementType: "geometry",
           stylers: [{
-            color: "#2b2b2b"
+            color: "#F4F4F4"
           }]
         }, // Woda
         {
           featureType: "landscape",
           elementType: "geometry",
           stylers: [{
-            color: "#2a2a2a"
+            color: "#F4F4F4"
           }]
         }
       ]
@@ -1513,21 +1518,33 @@ $google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
     }
 
     $('body').on('click', '.contact_accordion ._title', function(e) {
-
       e.preventDefault();
+
       var accordion = $(this).attr('accordion');
       $('.contact_accordion ._content').each(function() {
         if ($(this).attr('accordion') == accordion) {
-          $(this).show();
+          if ($(this).hasClass('_active')) {
+            $(this).removeClass('_active');
+            $(this).hide();
+          } else {
+            $(this).addClass('_active');
+            $(this).show();
+          }
         } else {
+          $(this).removeClass('_active');
           $(this).hide();
         }
       });
 
       $('.contact_accordion ._title').each(function() {
         if ($(this).attr('accordion') == accordion) {
-          $(this).addClass('_active');
+          if ($(this).hasClass('_active')) {
-          $(this).find('img').attr('src', '/images/contact-icon-arrow-up.svg');
+            $(this).removeClass('_active');
+            $(this).find('img').attr('src', '/images/contact-icon-arrow-down.svg');
+          } else {
+            $(this).addClass('_active');
+            $(this).find('img').attr('src', '/images/contact-icon-arrow-up.svg');
+          }
         } else {
           $(this).removeClass('_active');
           $(this).find('img').attr('src', '/images/contact-icon-arrow-down.svg');