332 lines
18 KiB
PHP
332 lines
18 KiB
PHP
<? \S::set_session('contact-form-token', bin2hex(random_bytes(32))); ?>
|
|
<?php
|
|
$google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
|
|
?>
|
|
|
|
<div class="main-page">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="breadcrumbs">
|
|
<a href="/">Strona główna</a>
|
|
<span class="sep"><img src="/images/breadcrumbs-sep.svg"></span>
|
|
<span class="last">Kontakt</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-1">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="contact-form">
|
|
<div class="_left">
|
|
<h1>Kontakt</h1>
|
|
|
|
<div class="contact-form-tiles">
|
|
<div class="tile tile-1">
|
|
<h2 class="tile-title">
|
|
Firmy VIDOK Sp. z o.o.
|
|
</h2>
|
|
|
|
<div class="tile-data">
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-home.svg">
|
|
</div>
|
|
<p class="_text">
|
|
36-054 MROWLA Rudna Mała 75<br>
|
|
NIP: 813-10-86-710<br>
|
|
ING Bank Śląski S.A.<br>
|
|
<strong>31 1050 1562 1000 0090 3034 4197</strong>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-marker.svg">
|
|
</div>
|
|
<div class="_text">
|
|
<a href="#"><strong>POKAŻ NA MAPIE</strong></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile tile-2">
|
|
<h2 class="tile-title _title_border">
|
|
Sekretariat
|
|
</h2>
|
|
|
|
<div class="tile-data">
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-phone.svg">
|
|
</div>
|
|
<p class="_text _phones">
|
|
<a href="tel://+48178595659">+48 17 859 56 59</a>
|
|
<br>
|
|
<a href="tel://+48178595660">+48 17 859 56 60</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-mail.svg">
|
|
</div>
|
|
<div class="_text _mails">
|
|
<a href="mailto:biuro@vidok.com">biuro@vidok.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile tile-3">
|
|
<h2 class="tile-title _title_border">
|
|
Marketing
|
|
</h2>
|
|
|
|
<div class="tile-data">
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-phone.svg">
|
|
</div>
|
|
<p class="_text _phones">
|
|
<a href="tel://+48178595672">+48 17 859 56 72</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-mail.svg">
|
|
</div>
|
|
<div class="_text _mails">
|
|
<a href="mailto:marketing@vidok.com">marketing@vidok.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile tile-4">
|
|
<h2 class="tile-title _title_border">
|
|
Serwis
|
|
</h2>
|
|
|
|
<div class="tile-data">
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-phone.svg">
|
|
</div>
|
|
<p class="_text _phones">
|
|
<a href="tel://+48178595682">+48 17 859 56 82</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="c-row">
|
|
<div class="_icon">
|
|
<img src="/images/contact-icon-mail.svg">
|
|
</div>
|
|
<div class="_text _mails">
|
|
<a href="mailto:biuro@vidok.com">biuro@vidok.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="_right">
|
|
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d42692.02628765994!2d21.950983061623088!3d50.09456168281469!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473ce36b077ae3b5%3A0x31bb36833c20c2f0!2sVIDOK%20Sp.%20z%20o.o.%20Producent%20okien%20i%20drzwi!5e0!3m2!1spl!2spl!4v1740569106728!5m2!1spl!2spl" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> -->
|
|
<div id="map" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-2">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2>Skontaktuj się <strong>z nami</strong></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-3">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="contact-form-box">
|
|
<div class="c-row c-row-1">
|
|
<p>Masz pytania dotyczące naszych produktów lub chcesz otrzymać wycenę?</p>
|
|
<p>Wypełnij poniższy formularz kontaktowy - nasz specjalista skontaktuje się z Tobą i odpowie na wszystkie pytania.</p>
|
|
</div>
|
|
<div class="c-row c-row-2">
|
|
<form method="POST" action="" enctype="multipart/form-data" id="contact-form-new">
|
|
<input type="hidden" name="action" value="send-contact-form-new">
|
|
<input type="hidden" name="token" value="<?= \S::get_session( 'contact-form-token' );?>">
|
|
<input type="hidden" name="website" value="">
|
|
|
|
<div class="_2_columns">
|
|
<input type="text" name="name" placeholder="Imię" required>
|
|
<input type="email" name="email" placeholder="Adres e-mail" required>
|
|
</div>
|
|
<div class="_2_columns">
|
|
<input type="text" name="phone" placeholder="Telefon" required>
|
|
<input type="text" name="postal_code" placeholder="Kod pocztowy" required>
|
|
</div>
|
|
<div class="_2_columns">
|
|
<select name="voivodeship" required>
|
|
<option value="" disabled selected>Województwa</option>
|
|
<option value="dolnoslaskie">dolnośląskie</option>
|
|
<option value="kujawsko-pomorskie">kujawsko-pomorskie</option>
|
|
<option value="lubelskie">lubelskie</option>
|
|
<option value="lubuskie">lubuskie</option>
|
|
<option value="lodzkie">łódzkie</option>
|
|
<option value="malopolskie">małopolskie</option>
|
|
<option value="mazowieckie">mazowieckie</option>
|
|
<option value="opolskie">opolskie</option>
|
|
<option value="podkarpackie">podkarpackie</option>
|
|
<option value="podlaskie">podlaskie</option>
|
|
<option value="pomorskie">pomorskie</option>
|
|
<option value="slaskie">śląskie</option>
|
|
<option value="swietokrzyskie">świętokrzyskie</option>
|
|
<option value="warminsko-mazurskie">warmińsko-mazurskie</option>
|
|
<option value="wielkopolskie">wielkopolskie</option>
|
|
<option value="zachodniopomorskie">zachodniopomorskie</option>
|
|
</select>
|
|
|
|
<div class="_radios">
|
|
<div class="_radio">
|
|
<input type="radio" id="client-private" name="client" value="Klient prywatny" required>
|
|
<label for="client-private">Klient prywatny</label>
|
|
</div>
|
|
<div class="_radio">
|
|
<input type="radio" id="client-business" name="client" value="Klient biznesowy" required>
|
|
<label for="client-business">Klient biznesowy</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="_1_column">
|
|
<textarea name="message" placeholder="Jeżeli masz jakieś uwagi, wytyczne możesz wpisać je tutaj. Możesz także wpisać wymiary i rodzaje okien jakimi jesteś zainteresowany."></textarea>
|
|
</div>
|
|
<div class="_text">Chcesz przesłać nam wizualizacje, projekt lub inne materiały? Skorzystaj z pola poniżej i dodaj plik do wiadomości.</div>
|
|
<div class="_file fileuploader fileuploader-theme-default">
|
|
<input type="hidden" name="fileuploader-list-files" value="[]">
|
|
<input type="file" name="files[]" class="files" multiple="multiple">
|
|
<div class="fileuploader-items">
|
|
<ul class="fileuploader-items-list"></ul>
|
|
</div>
|
|
</div>
|
|
<div class="_1_column">
|
|
<div class="_checkbox">
|
|
<input type="checkbox" name="zgoda_1" id="zgoda_1">
|
|
<label for="zgoda_1">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu przygotowania stosownej oferty.</label>
|
|
</div>
|
|
</div>
|
|
<div class="_1_column">
|
|
<div class="_checkbox">
|
|
<input type="checkbox" name="zgoda_2" id="zgoda_2">
|
|
<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">
|
|
<button type="submit">Wyślij<img src="/images/contact-icon-check.svg"></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link class="footer" href="/plugins/fileuploader/jquery.fileuploader.min.css" rel="stylesheet" type="text/css">
|
|
<link class="footer" href="/plugins/fileuploader/font/font-fileuploader.css" rel="stylesheet" type="text/css">
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_map_api; ?>&callback=initMap" async defer></script>
|
|
<script class="footer" type="text/javascript" src="/plugins/fileuploader/jquery.fileuploader.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function initMap() {
|
|
const map = new google.maps.Map(document.getElementById("map"), {
|
|
center: { lat: 50.041112190287635, lng: 21.99914482536555 },
|
|
zoom: 11.2,
|
|
styles: [
|
|
{ elementType: "geometry", stylers: [{ color: "#333333" }] },
|
|
{ elementType: "labels.text.stroke", stylers: [{ color: "#333333" }] },
|
|
{ elementType: "labels.text.fill", stylers: [{ color: "#B1B1B1" }] },
|
|
|
|
// (motorway)
|
|
{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#E5C163" }] }, // Autostrady
|
|
{ featureType: "road.highway", elementType: "geometry.stroke", stylers: [{ color: "#E5C163" }] }, // Kontur autostrady
|
|
{ featureType: "road.highway", elementType: "labels.text.fill", stylers: [{ color: "#E5C163" }] }, // tekst
|
|
|
|
// (primary, secondary, local)
|
|
{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#535353" }] }, // Główne drogi
|
|
{ featureType: "road.local", elementType: "geometry", stylers: [{ color: "#535353" }] }, // Ulice
|
|
{ featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#B1B1B1" }] }, // tekst
|
|
|
|
// Ukryj numery dróg (E40, A4, 92 itp.)
|
|
{ featureType: "road", elementType: "labels.icon", stylers: [{ visibility: "off" }] }, // Ukryj ikony dróg
|
|
{ featureType: "road", elementType: "labels.text", stylers: [{ visibility: "off" }] }, // Ukryj tekst dróg
|
|
|
|
{ featureType: "water", elementType: "geometry", stylers: [{ color: "#2b2b2b" }] }, // Woda
|
|
{ featureType: "landscape", elementType: "geometry", stylers: [{ color: "#2a2a2a" }] }
|
|
]
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('#contact-form-new input.files').fileuploader({
|
|
fileMaxSize: 10,
|
|
extensions: ['jpg', 'jpeg', 'png', 'pdf', 'text/plain', 'csv', 'xml', 'xls', 'xlsx', 'doc', 'dot', 'docx'],
|
|
addMore: true,
|
|
captions: {
|
|
button: function(e) {
|
|
return "Wybierz plik<img src='/images/contact-icon-file.svg'>";
|
|
},
|
|
feedback: function(e) {
|
|
return (
|
|
"PRZYCIĄGNIJ I UPUŚĆ LUB"
|
|
);
|
|
},
|
|
feedback2: function(e) {
|
|
return (
|
|
e.length +
|
|
" " +
|
|
(1 < e.length ? "pliki są wybrane" : "plik jest wybrany")
|
|
);
|
|
},
|
|
confirm: "Potwierdzenie",
|
|
cancel: "Anuluj",
|
|
name: "Nazwa",
|
|
type: "Typ pliku",
|
|
size: "Rozmiar pliku",
|
|
dimensions: "Wymiary",
|
|
duration: "Czas",
|
|
crop: "Utnij to",
|
|
rotate: "Koło",
|
|
sort: "Sortować",
|
|
open: "Otwierasz",
|
|
download: "Ściągnij",
|
|
remove: "Usunąć",
|
|
drop: "Umieść plik tutaj do przesłania",
|
|
paste: '<div class="fileuploader-pending-loader"></div> Wklej plik, kliknij tutaj, aby usunąć',
|
|
removeConfirmation: "Czy na pewno chcesz usunąć plik??",
|
|
errors: {
|
|
filesLimit: "Sam ${limit} pliki można przesyłać.",
|
|
filesType: "Sam ${extensions} pliki można przesyłać.",
|
|
fileSize: "${name} jest zbyt duży! Wybierz plik do ${fileMaxSize} MB.",
|
|
filesSizeAll: "Wybrane pliki są za duże! Wybierz plik do ${maxSize} MB.",
|
|
fileName: "Plik o tej samej nazwie ${name} jest już wybrany.",
|
|
remoteFile: "Pliki zdalne są niedozwolone.",
|
|
folderUpload: "Foldery są niedozwolone.",
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|