https://horizon-it.nl/en/contact.php

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta content="width=device-width, initial-scale=1.0" name="viewport">
6  <title>Horizon‑IT – Contact</title>
7  <meta name="description" content="Get in touch with Horizon‑IT. Send us a message — we usually reply the same business day.">
8  <meta name="keywords" content="contact, horizon-it, support, quote">
9
10  <link href="assets/img/favicon.png" rel="icon">
11  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
12
13  <link href="https://fonts.googleapis.com" rel="preconnect">
14  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
15  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
16
17  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
18  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
19  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
20  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
21  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
22
23  <link href="assets/css/main.css" rel="stylesheet">
24  <style>
25    .glass { 
26  backdrop-filter: blur(10px); 
27  background: rgba(12,58,40,.25); 
28  border: 1px solid rgba(161,240,67,.18); 
29  box-shadow: 0 8px 30px rgba(0,0,0,.25); 
30}
31
32.form-floating > label { 
33  color: rgba(255,255,255,.75); 
34}
35
36.contact-card { 
37  border:1px solid rgba(161,240,67,.18); 
38}
39
40.is-invalid + .invalid-feedback { 
41  display:block; 
42}
43
44/* 🔽 Donkere velden */
45.form-control {
46  background-color: rgba(20, 40, 35, 0.85);
47  color: #fff;
48  border: 1px solid rgba(161,240,67,.25);
49  border-radius: 0.5rem;
50}
51
52.form-control:focus {
53  background-color: rgba(20, 40, 35, 0.95);
54  color: #fff;
55  border-color: #A1F043;
56  box-shadow: 0 0 0 .2rem rgba(161,240,67,.25);
57}
58
59.form-control::placeholder {
60  color: rgba(255,255,255,.5);
61}
62
63.form-check-label {
64  color: rgba(255,255,255,.8);
65}
66
67textarea.form-control {
68  resize: vertical;
69}
70
71  </style>
72</head>
73<body class="contact-page">
74
75
76<header id="header" class="header d-flex align-items-center sticky-top">
77  <div class="header-container container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
78    <a href="index.php" class="logo d-flex align-items-center me-auto me-xl-0">
79      <img src="assets/img/logo2025.webp" alt="Horizon‑IT logo" loading="lazy">
80    </a>
81
82    <nav id="navmenu" class="navmenu">
83      <ul>
84                  <!-- On inner pages: Home becomes a dropdown with sections from index -->
85          <li class="dropdown " id="home-sections">
86            <a href="index.php" class="home-link"><span>Home</span> <i class="bi bi-chevron-down"></i></a>
87            <ul>
88                              <li><a href="index.php#hero" data-section="#hero">Overview</a></li>
89                              <li><a href="index.php#services" data-section="#services">Services</a></li>
90                              <li><a href="index.php#cases" data-section="#cases">Cases</a></li>
91                              <li><a href="index.php#contact" data-section="#contact">Contact</a></li>
92                          </ul>
93          </li>
94        
95        <!-- About dropdown -->
96                <li class="dropdown ">
97          <a href="about.php" class=""><span>About Us</span> <i class="bi bi-chevron-down"></i></a>
98          <ul>
99            <li><a href="about.php" class="">Who We Are</a></li>
100            <li><a href="history.php" class="">Our History</a></li>
101            <li><a href="approach.php" class="">Our Approach</a></li>
102            <!-- <li><a href="team.php" class="">Team</a></li> -->
103          </ul>
104        </li>
105
106        <!-- Direct links -->
107        <li><a href="index.php#services">Services</a></li>
108        <li><a href="cases.php" class="">Cases</a></li>
109        <li><a href="contact.php" class="active">Contact</a></li>
110      </ul>
111      <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
112    </nav>
113
114    <a class="btn-getstarted" href="contact.php">Get in Touch</a>
115      <div class="language-switch d-flex align-items-center">
116        <a href="/?lang=nl" title="Dutch">
117          <img src="assets/vendor/flags/nl.svg" alt="NL" width="24" height="16" />
118        </a>
119      </div>
120  </div>
121</header>
122

123<script>
124// Optional enhancement: if you're on index.php, mark section links active when scrolling
125(function() {
126  const isIndex = false;
127  if (!isIndex) return;
128
129  const links = document.querySelectorAll('#navmenu a[href^="index.php#"], #navmenu a[href^="#"]');
130  const map = new Map();
131  links.forEach(a => {
132    const id = a.getAttribute('href').split('#')[1];
133    const el = id ? document.getElementById(id) : null;
134    if (el) map.set(id, { link: a, el });
135  });
136
137  function onScroll() {
138    let currentId = null;
139    const scrollPos = document.documentElement.scrollTop || document.body.scrollTop;
140    map.forEach(({ el }, id) => {
141      if (el.offsetTop - 120 <= scrollPos) currentId = id;
142    });
143    // clear
144    links.forEach(a => a.classList.remove('active'));
145    if (currentId && map.get(currentId)) {
146      map.get(currentId).link.classList.add('active');
147    }
148  }
149
150  document.addEventListener('scroll', onScroll, { passive: true });
151  window.addEventListener('load', onScroll);
152})();
153</script>

153
154
155<main class="main">
156  <!-- Page Title -->
157  <div class="page-title">
158    <div class="breadcrumbs">
159      <nav aria-label="breadcrumb">
160        <ol class="breadcrumb">
161          <li class="breadcrumb-item"><a href="index.php"><i class="bi bi-house"></i> Home</a></li>
162          <li class="breadcrumb-item active current">Contact</li>
163        </ol>
164      </nav>
165    </div>
166
167    <div class="title-wrapper" data-aos="fade-up">
168      <h1>Contact us</h1>
169      <p>Questions, quotes or support — send us a message and we’ll get back to you.</p>
170    </div>
171  </div>
172
173  <!-- Contact Section -->
174  <section class="section">
175    <div class="container" data-aos="fade-up" data-aos-delay="100">
176      <div class="row g-4">
177
178        <div class="col-lg-7">
179          <div class="glass rounded-4 p-3 p-lg-4 contact-card">
180            <h3 class="mb-3">Send a message</h3>
181
182            <form id="contactForm" class="php-email-form" method="post" action="forms/contact-endpoint.php" novalidate>
183              <div class="row g-3">
184                <div class="col-md-6">
185                  <div class="form-floating">
186                    <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
187                    <label for="name">Your name</label>
188                    <div class="invalid-feedback">Please enter your name.</div>
189                  </div>
190                </div>
191                <div class="col-md-6">
192                  <div class="form-floating">
193                    <input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" required>
194                    <label for="email">Email</label>
195                    <div class="invalid-feedback">Please enter a valid email.</div>
196                  </div>
197                </div>
198                <div class="col-md-6">
199                  <div class="form-floating">
200                    <input type="tel" class="form-control" id="phone" name="phone" placeholder="+31">
201                    <label for="phone">Phone (optional)</label>
202                  </div>
203                </div>
204                <div class="col-md-6">
205                  <div class="form-floating">
206                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
207                    <label for="subject">Subject</label>
208                    <div class="invalid-feedback">Please add a subject.</div>
209                  </div>
210                </div>
211                <div class="col-12">
212                  <div class="form-floating">
213                    <textarea class="form-control" id="message" name="message" placeholder="How can we help?" style="height: 140px" required></textarea>
214                    <label for="message">How can we help?</label>
215                    <div class="invalid-feedback">Please enter a short message.</div>
216                  </div>
217                </div>
218
219                <!-- Cloudflare Turnstile -->
220                <div class="col-12">
221                  <div id="cf-turnstile-container" class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-theme="auto"></div>
222                </div>
223
224                <div class="col-12">
225                  <div class="form-check mb-2">
226                    <input class="form-check-input" type="checkbox" value="1" id="consent" name="consent" required>
227                    <label class="form-check-label" for="consent">I agree that Horizon‑IT may contact me about my request.</label>
228                    <div class="invalid-feedback">Please agree so we can contact you.</div>
229                  </div>
230                </div>
231
232                <div class="col-12">
233                  <div class="d-grid">
234                    <button type="submit" id="submitBtn" class="btn-getstarted">
235                      <span class="btn-text">Send message</span>
236                      <span class="btn-spinner d-none ms-2 spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
237                    </button>
238                  </div>
239                </div>
240
241                <div class="col-12">
242                  <div id="formAlert" class="alert d-none mt-3" role="alert"></div>
243                </div>
244              </div>
245            </form>
246
247          </div>
248        </div>
249
250        <div class="col-lg-5">
251          <div class="glass rounded-4 p-3 p-lg-4 h-100">
252            <h4 class="mb-3">Other ways to reach us.</h4>
253            <ul class="list-unstyled small mb-4">
254              <li class="d-flex align-items-center mb-2">
255                <i class="bi bi-envelope me-2"></i>
256                <a href="/cdn-cgi/l/email-protection#abc3cac7c7c4ebc3c4d9c2d1c4c586c2df85c5c7"><span class="__cf_email__" data-cfemail="f199909d9d9eb1999e83988b9e9fdc9885df9f9d">[email&#160;protected]</span></a>
257              </li>
258              <li class="d-flex align-items-center mb-2">
259                <i class="bi bi-telephone me-2"></i>
260                <a href="tel:+31133699318">+31 (0)13 369 93 18</a>
261              </li>
262              <li class="d-flex align-items-center mb-2">
263                <i class="bi bi-geo-alt me-2"></i>
264                Kraaivenstraat 36-07, 5048AB Tilburg
265              </li>
266              <li class="d-flex align-items-center mb-2">
267                <i class="bi bi-building me-2"></i>
268                KVK: 83702563
269              </li>
270              <li class="d-flex align-items-center">
271                <i class="bi bi-receipt me-2"></i>
272                BTW: NL003860182B52
273              </li>
274            </ul>
275            <div class="ratio ratio-16x9 rounded-4 overflow-hidden">
276              <iframe
277                title="Horizon-IT servicegebied"
278                src="https://www.openstreetmap.org/export/embed.html?bbox=4.0,50.5,

2786.3,51.9&layer=mapnik"
279                loading="lazy"
280              ></iframe>
281            </div>
282          </div>
283        </div>
284      </div>
285    </div>
286  </section>
287
288  <!-- CTA -->
289  <section class="section py-5">
290    <div class="container" data-aos="zoom-in">
291      <div class="p-4 p-lg-5 rounded-4 text-center glass">
292        <h3 class="mb-3">Prefer a quick call?</h3>
293        <p class="mb-4">Book a 15‑minute intro — we’ll see how we can help.</p>
294        <div class="d-flex gap-3 justify-content-center flex-wrap">
295          <a href="contact.php" class="btn-getstarted"><i class="bi bi-calendar-event"></i> Schedule a call</a>
296        </div>
297      </div>
298    </div>
299  </section>
300</main>
301
302<footer id="footer" class="footer position-relative dark-background">
303
304    <div class="container footer-top">
305      <div class="row gy-4">
306        <div class="col-lg-4 col-md-6 footer-about">
307          <a href="index.php" class="logo d-flex align-items-center">
308             <img src="assets/img/logo2025.webp" alt="">
309          </a>
310          <div class="footer-contact pt-3">
311            <p>Kraaivenstraat 36-07</p>
312            <p>5048AB Tilburg, Netherlands</p>
313            <p class="mt-3"><strong>Phone:</strong> <span>+31 (0)13 369 93 18</span></p>
314            <p><strong>Email:</strong> <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7bfb6bbbbb897bfb8a5beadb8b9fabea3f9b9bb">[email&#160;protected]</a></span></p>
315          </div>
316          <div class="social-links d-flex mt-4">
317            <a href="https://www.instagram.com/horizon_itsolutions/"><i class="bi bi-instagram"></i></a>
318            <a href="https://www.linkedin.com/company/horizon-it-solution/"><i class="bi bi-linkedin"></i></a>
319          </div>
320        </div>
321
322        <div class="col-lg-2 col-md-3 footer-links">
323          <h4>Useful Links</h4>
324          <ul>
325            <li><a href="index.php">Home</a></li>
326            <li><a href="about.php">About us</a></li>
327            <li><a href="index.php#services">Services</a></li>
328            <li><a href="terms.php">Terms of service</a></li>
329            <li><a href="privacy.php">Privacy policy</a></li>
330          </ul>
331        </div>
332
333        <div class="col-lg-2 col-md-3 footer-links">
334          <h4>Our Services</h4>
335          <ul>
336            <li><a href="index.php#services">Home/Enterprise networking</a></li>
337            <li><a href="https://horizon-hosting.nl">Public and Private cloud solutions</a></li>
338            <li><a href="m365.php.php">Microsoft 365</a></li>
339            <li><a href="system-management.php">Onsite & Remote IT Management</a></li>
340            <li><a href="datacenter-maintenance.php">Datacenter Maintenance</a></li>
341          </ul>
342        </div>
343
344        <div class="col-lg-2 col-md-3 footer-links">
345          <h4>Quick links</h4>
346          <ul>
347            <li><a href="https://office.com">Microsoft</a></li>
348            <li><a href="https://excalibur.horizon-datacenter.nl/roundcube">Horizon Webmail</a></li>
349            <li><a href="https://billing.horizon-it.nl">Hosting panel</a></li>
350          </ul>
351        </div>
352
353      </div>
354    </div>
355
356    <div class="container copyright text-center mt-4">
357      <p>© 2021-2025<span>Copyright</span> <strong class="px-1 sitename">Horizon-IT Solutions</strong> <span>All Rights Reserved</span></p>
358      <div class="credits">
359        Designed by <a href="https://horizon-dev.nl/">Horizon Development</a>
360      </div>
361    </div>
362
363  </footer>
364<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
365<div id="preloader"></div>

365
366
367<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

367<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

367

368<script src="assets/vendor/aos/aos.js"></script>

368

369<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>

369

370<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>

370

371<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

371

372<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

372

373<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>

373

374<script src="assets/js/main.js"></script>

374
375
376<!-- Cloudflare Turnstile -->

377<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

377
378

379<script>
380(function() {
381  const form = document.getElementById('contactForm');
382  const submitBtn = document.getElementById('submitBtn');
383  const spinner = submitBtn.querySelector('.btn-spinner');
384  const btnText = submitBtn.querySelector('.btn-text');
385  const alertBox = document.getElementById('formAlert');
386
387  function setSubmitting(state) {
388    submitBtn.disabled = state;
389    spinner.classList.toggle('d-none', !state);
390    btnText.textContent = state ? 'Sending…' : 'Send message';
391  }
392
393  function showAlert(type, message) {
394    alertBox.className = 'alert mt-3 alert-' + type;
395    alertBox.textContent = message;
396  }
397
398  form.addEventListener('submit', async function (e) {
399    e.preventDefault();
400    // simple client validation
401    let valid = true;
402    form.querySelectorAll('[required]').forEach(el => {
403      if (!el.value || (el.type === 'checkbox' && !el.checked)) {
404        el.classList.add('is-invalid');
405        valid = false;
406      } else {
407        el.classList.remove('is-invalid');
408      }
409    });
410    if (!valid) { showAlert('warning', 'Please fill in the required fields.'); return; }
411
412    setSubmitting(true);
413    showAlert('info', 'Submitting…');
414
415    try {
416      const formData = new FormData(form);
417      // Prefer API from widget if available
418      const w = document.getElementById('cf-turnstile-container');
419      if (window.turnstile && w) {
420        const token = turnstile.getResponse(w);
421        if (token) formData.set('cf-turnstile-response', token);
422      }
423
424      const res = await fetch(form.action, {
425        method: 'POST',
426        body: formData,
427        headers: { 'Accept': 'application/json' }
428      });
429
430      const data = await res.json().catch(() => ({}));
431      if (!res.ok || !data.ok) {
432        const msg = data && data.message ? data.message : 'Something went wrong. Please try again.';
433        showAlert('danger', msg);
434        if (window.turnstile && w) turnstile.reset(w);
435      } else {
436        showAlert('success', data.message || 'Thanks! Your message has been sent.');
437        form.reset();
438        if (window.turnstile && w) turnstile.reset(w);
439      }
440    } catch (err) {
441      console.error(err);
442      showAlert('danger', 'Network error. Please try again.');
443    } finally {
444      setSubmitting(false);
445    }
446  });
447})();
448</script>

448
449

450<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"a36806b229614d4090aa21cc3fd0cae0","r":1,"spa":2}' crossorigin="anonymous"></script>

450
451</body>
452</html>