formspree

<div class="fs-form">

  <div class="fs-success" id="fsSuccess">
    <div class="fs-success-icon">
      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
    </div>
    <h2>Thank you!</h2>
    <p>We've received your message and will get back to you shortly.</p>
  </div>

  <div id="fsFormWrap">
    <form id="fsContactForm" action="https://formspree.io/f/xnjbrvnr" method="POST">
      <div class="fs-grid">

        <div class="fs-group">
          <label class="fs-label" for="fs-name">Name <span class="fs-req">*</span></label>
          <input class="fs-input" type="text" id="fs-name" name="name" placeholder="Your full name" required>
        </div>

        <div class="fs-group">
          <label class="fs-label" for="fs-email">Email <span class="fs-req">*</span></label>
          <input class="fs-input" type="email" id="fs-email" name="email" placeholder="you@company.com" required>
        </div>

        <div class="fs-group">
          <label class="fs-label" for="fs-company">Company <span class="fs-req">*</span></label>
          <input class="fs-input" type="text" id="fs-company" name="company" placeholder="Your company name" required>
        </div>

        <div class="fs-group">
          <label class="fs-label" for="fs-size">Company Size <span class="fs-req">*</span></label>
          <select class="fs-select" id="fs-size" name="company_size" required>
            <option value="" disabled selected>Select size</option>
            <option value="1-100 Employees">1–100 Employees</option>
            <option value="100-1000 Employees">100–1,000 Employees</option>
            <option value="1000-10000 Employees">1,000–10,000 Employees</option>
            <option value="10000+ Employees">10,000+ Employees</option>
          </select>
        </div>

        <div class="fs-divider"></div>

        <div class="fs-group fs-full">
          <label class="fs-label">Interested In <span class="fs-req">*</span></label>
          <div class="fs-cb-grid">
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="AEM Checkup">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">AEM Checkup</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="AEM Upgrade">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">AEM Upgrade</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Component Development">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Component Dev</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="CI/CD">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">CI/CD</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Strategic Guidance">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Strategic Guidance</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Emergency Repair">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Emergency Repair</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Proof of Concept">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Proof of Concept</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Document Authoring">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Doc Authoring</span>
            </label>
            <label class="fs-cb-item">
              <input type="checkbox" name="interested_in" value="Other">
              <span class="fs-cb-box"><svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              <span class="fs-cb-label">Other</span>
            </label>
          </div>
          <span class="fs-error" id="fsInterestErr">Please select at least one service.</span>
        </div>

        <div class="fs-divider"></div>

        <div class="fs-group fs-full">
          <label class="fs-label" for="fs-referral">How did you hear about us?</label>
          <input class="fs-input" type="text" id="fs-referral" name="referral" placeholder="Arbory Website, LinkedIn, Podcast, Word of Mouth, Event, etc.">
        </div>

        <div class="fs-group fs-full">
          <label class="fs-label" for="fs-message">Message</label>
          <textarea class="fs-textarea" id="fs-message" name="message" placeholder="Anything else we should know?"></textarea>
        </div>

        <div class="fs-group fs-full">
          <label class="fs-consent">
            <input type="checkbox" id="fs-consent" name="consent" required>
            <span class="fs-consent-box">
              <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </span>
            <span class="fs-consent-text">
              By checking this box you agree that we will process your information in accordance with our <a href="/privacy-policy" target="_blank">Privacy Policy</a>. We use Google reCAPTCHA v3 to help prevent spam. Google's use is subject to the <a href="https://policies.google.com/privacy" target="_blank">Google Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank">Terms of Service</a>.
            </span>
          </label>
          <span class="fs-error" id="fsConsentErr">You must agree to continue.</span>
        </div>

        <div class="fs-group fs-full">
          <button class="fs-submit" type="submit" id="fsSubmitBtn">Send Message</button>
        </div>

      </div>
    </form>
  </div>
</div>