<div class="modal" data-widget="contacts">

  <div class="container">
    <div class="modal__content">
      <div class="modal__close" data-role="contacts-close">
        <svg width="18px" height="18px" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.888889 1L15.1111 15" transform="translate(1 1)" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" stroke-linecap="square"></path>
          <path d="M0.888889 1L15.1111 15" transform="matrix(-1 0 0 1 17 1)" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" stroke-linecap="square"></path>
        </svg>
      </div>
      <div class="form-message form-success" style="display: none;">
        <div class="form-message__icon">
          <img src="../assets/static/green-accept_icon.png" alt="">
        </div>
        <div class="form-message__inner">
          <div class="form-message__title">
            Your request was successfully sent!
          </div>
          <div class="form-message__text">
            Thank you for your interest for Quadcode.<br>Our team will contact you shortly
          </div>
          <div class="form-message__actions">
            <a href="/saas" class="button CTABase">OK</a>
          </div>
        </div>
      </div>
      <div class="form-message form-error" style="display: none;">
        <div class="form-message__icon">
          <img src="../assets/static/red-cross_icon.png" alt="">
        </div>
        <div class="form-message__inner">
          <div class="form-message__title">
            Oops...<br>Something went wrong
          </div>
          <div class="form-message__actions">
            <p class="button CTABase" data-role="contacts-request-reset">Try again</p>
          </div>
        </div>
      </div>

      <form class="form" action="<!-- @secret API_URL -->/saas" data-role="contacts-request" data-name="contacts-request" data-widget="form">
        <input type="hidden" name="referrer" value="/saas" />
        <div class="form__title">Enhance your business with industry proven software</div>
        <div class="form__row">
          <div class="form__wrapper">
            <div class="form-field">
              <div class="form-field__title required">First name</div>
              <div class="form-field__error">Required</div>
              <label for="contacts-request-first_name" class="form-field__label">
                <input name="first_name" id="contacts-request-first_name" class="form-field__input t-description-1" placeholder="First name">
              </label>
            </div>
          </div>
          <div class="form__wrapper">
            <div class="form-field">
              <div class="form-field__title required">Last name</div>
              <div class="form-field__error">Required</div>
              <label for="contacts-request-last_name" class="form-field__label">
                <input name="last_name" id="contacts-request-last_name" class="form-field__input t-description-1" placeholder="Last name">
              </label>
            </div>
          </div>
        </div>
        <div class="form__row">
          <div class="form__wrapper">
            <div class="form-field">
              <div class="form-field__title required">Phone</div>
              <div class="form-field__error">Required</div>
              <label for=contacts-request-phone class="form-field__label form-field__label--required">
                <input name="phone" id="contacts-request-phone" class="form-field__input t-description-1" inputmode="tel" placeholder="Phone">
              </label>
            </div>
          </div>
          <div class="form__wrapper">
            <div class="form-field">
              <div class="form-field__title required">Email</div>
              <div class="form-field__error">Required</div>
              <label for="contacts-request-email" class="form-field__label">
                <input type="text" name="email" id="contacts-request-email" class="form-field__input t-description-1" inputmode="email" placeholder="name@email.com">
              </label>
            </div>
          </div>
        </div>
        <div class="form__wrapper">
          <div class="form-field">
            <div class="form-field__title required">Message</div>
            <div class="form-field__error">Required</div>
            <label for="contacts-request-message" class="form-field__label">
              <textarea name="message" id="contacts-request-message" class="form-field__input t-description-1" cols="30" rows="6"></textarea>
            </label>
          </div>
        </div>
        <div class="form__wrapper">
          <div class="checkbox">
            <input type="checkbox" name="terms_agree" id="contacts-request-terms_agree" class="checkbox__input">
            <label for="contacts-request-terms_agree" class="checkbox__label">
              <span class="checkbox__icon"></span>
              <span class="checkbox__text">I read and agree with
                <a href="/terms-and-conditions" class="checkbox__link">terms and conditions</a>
                and
                <a href="/privacy-policy" class="checkbox__link">privacy policy</a>
                of this website
              </span>
              <span class="checkbox__error">Required</span>
            </label>
          </div>
        </div>
        <div class="form__wrapper recaptcha">
          <div class="form-field">
            <div id="contacts-request-g-recaptcha-response" class="captchaWrapper"></div>
            <div class="form-field__error">Required</div>
          </div>
        </div>
        <script>
          function recaptchaCallback() {
            const reCaptchaOptions = {sitekey: '6LceR2gjAAAAAIY2W8wlNB221ijjeTmLVfuFDma_'};
            if (document.querySelector('#contacts-request-g-recaptcha-response') !== null) {
              window.dataRequestFormCaptcha = grecaptcha.render('contacts-request-g-recaptcha-response', reCaptchaOptions);
            }
          }
        </script>
        <script src="https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=en" async defer></script>
        <button class="button t-button-1 CTABase">Make a request</button>
      </form>
    </div>
  </div>

</div>