Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add reCAPTCHA validation to contact form and enhance styling

Browse Source
This commit is contained in:
Roman Pyrih
2025-03-21 15:06:37 +01:00
parent 02ed5624e6
commit f503e19ea5
5 changed files with 294 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/kontakt-v3.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/kontakt-v3.css.map
View File

File diff suppressed because one or more lines are too long

197
layout/style-scss/kontakt-v3.scss
View File

@@ -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;
margin-bottom: 10px;
// text-decoration: underline;
// 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 {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: #fff246;
}
// &::after {
// content: '';
// position: absolute;
// bottom: 0;
// left: 50%;
// transform: translateX(-50%);
// width: 50px;
// height: 2px;
// 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%;
min-width: 350px;
width: 40%;
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) {
display: none;
}
@include respond-below(md) {
margin-bottom: 50px;
grid-area: numbers;
font-size: 20px;
font-weight: 300;
// @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) {
width: 100%;
// @include respond-below(md) {
// 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 {
padding: 120px 60px 60px 60px;
// ._accounts_numbers {
// padding: 120px 60px 60px 60px;
@include respond-below(md) {
display: none;
}
}
// @include respond-below(md) {
// 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;
}
}
}
}

120
plugins/special-actions-middle.php
View File

@@ -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']);
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(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
}
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']);
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 ) )
for ($i = 0; $i < $countfiles; $i++)
{
\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
\S::alert( \S::lang('wiadomosc-niezostala-wyslana' ) );
header('Location: ' . $_SERVER['REQUEST_URI']);
header( 'Location: ' . $_SERVER['REQUEST_URI'] );
exit;
}

107
templates_user/page-contact-v3.php
View File

@@ -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="_title" accordion="1">Obsługa klientów indywidualnych<img src="/images/contact-icon-arrow-down.svg"></div>
<div class="contact_accordion" id="obsluga-klienta">
<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');
$(this).find('img').attr('src', '/images/contact-icon-arrow-up.svg');
if ($(this).hasClass('_active')) {
$(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');