contact.html

---
layout: default
title: Contact
permalink: /contact/
---

<section class="page-hero">
  <div class="container">
    <h1>Get in Touch</h1>
    <p class="subtitle">Tell us about your infrastructure and we'll see what we can do to help you!</p>
  </div>
</section>

<section class="page-content">
  <div class="container narrow">
    <div class="contact-grid">
      <div class="contact-form-wrap">
        <form id="contact-form" class="contact-form" action="https://formgrid.dev/api/f/pp1nf6ru" method="POST">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" required placeholder="Your name">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required placeholder="you@company.com">
          </div>
          <div class="form-group">
            <label for="company">Company</label>
            <input type="text" id="company" name="company" placeholder="Your company name">
          </div>
          <div class="form-group">
            <label for="services">What are you looking to migrate?</label>
            <select id="services" name="services" required>
              <option value="">Select a service...</option>
              <option value="databases">Databases (RDS, MongoDB Atlas)</option>
              <option value="search">Search (Elasticsearch / OpenSearch)</option>
              <option value="cache">Caching (Redis, ElastiCache)</option>
              <option value="full">Full Infrastructure</option>
              <option value="other">Other / Not sure</option>
            </select>
          </div>
          <div class="form-group">
            <label for="message">Tell us what you're looking for</label>
            <textarea id="message" name="message" required rows="5" placeholder="Share your current setup, timeline, and any concerns..."></textarea>
          </div>
          <div class="contact-form__hp" aria-hidden="true">
            <label for="contact-company-url">Company website (optional)</label>
            <input type="text" id="contact-company-url" name="_honey" tabindex="-1" autocomplete="off">
          </div>
          <div class="form-group contact-form__captcha">
            <span class="contact-form__captcha-label">Before sending, please verify below</span>
            <div class="h-captcha" data-sitekey="f97e67a4-ec22-49e2-93f6-655cb872b958"></div>
          </div>
          <button type="submit" class="btn btn-primary btn-full">Send Message</button>
        </form>
        <p id="contact-form-status"></p>
      </div>
      <div class="contact-info">
        <div class="info-card">
          <h3>Free Assessment</h3>
          <p>We'll review your current infrastructure and provide a detailed migration plan with cost projections.</p>
        </div>

        <div class="info-card">
          <h3>Prefer Email?</h3>
          <p>Reach us directly at <a href="mailto:hello@bigtechmigration.eu?subject=Big Tech Migration Assessment">hello@bigtechmigration.eu</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<script>
  window.addEventListener("load", function () {
    var form = document.getElementById("contact-form");
    var status = document.getElementById("contact-form-status");

    function resetCaptcha() {
      if (typeof hcaptcha !== "undefined") {
        hcaptcha.reset();
      }
    }

    async function handleSubmit(event) {
      event.preventDefault();
      var data = new FormData(event.target);
      var honey = (data.get("_honey") || "").toString().trim();
      if (honey !== "") {
        form.style.display = "none";
        status.innerHTML = "Thanks for reaching out! We'll be in touch with you soon.";
        status.className = "form-status form-status-success";
        return;
      }
      if (typeof hcaptcha === "undefined" || !hcaptcha.getResponse()) {
        status.innerHTML = "Please complete the verification challenge.";
        status.className = "form-status form-status-error";
        return;
      }
      fetch(event.target.action, {
        method: form.method,
        body: data,
        // Avoid custom Accept (non–safelisted value triggers CORS preflight; FormGrid only allows some request headers).
        // FormGrid responds with 3xx → success HTML; following it hits a page without CORS → browser blocks.
        redirect: "manual"
      })
        .then(function (response) {
          var redirectOk =
            (response.status >= 300 && response.status < 400) ||
            response.type === "opaqueredirect";
          if (response.ok || redirectOk) {
            form.style.display = "none";
            status.innerHTML = "Thanks for reaching out! We'll be in touch with you soon.";
            status.className = "form-status form-status-success";
            return;
          }
          return response
            .json()
            .then(function (body) {
              if (Object.hasOwn(body, "errors")) {
                status.innerHTML = body.errors.map(function (err) { return err.message; }).join(", ");
              } else {
                status.innerHTML = "Oops! There was a problem submitting your form.";
              }
              status.className = "form-status form-status-error";
              resetCaptcha();
            })
            .catch(function () {
              status.innerHTML = "Oops! There was a problem submitting your form.";
              status.className = "form-status form-status-error";
              resetCaptcha();
            });
        })
        .catch(function () {
          status.innerHTML = "Oops! There was a problem submitting your form.";
          status.className = "form-status form-status-error";
          resetCaptcha();
        });
    }

    form.addEventListener("submit", handleSubmit);
  });
</script>