Viewing File: /home/ubuntu/fansforx-upgrade-landing/contact.html

<!DOCTYPE html>
<html lang="en">

<body>
  <!-- Contact Sec -->
  <section class="contact-sec bg-skyblue-light sm-padding" id="contact-us">
    <div class="container">
      <div class="row justify-content-center align-items-center">
        <div class="col-md-8 col-lg-9">
          <div class="section-title">
            <h2>Contact Us</h2>
            <p class="text-center">In case of any questions, reach out to us today! Our support team is always ready to help.</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-lg-12 col-xl-4">
          <div class="book-appointment-card">
            <div class="book-appointment-card-head">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
                width="20" height="20" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512"
                xml:space="preserve" class="">
                <g>
                  <g data-name="01 align center">
                    <path
                      d="M21 2h-3V0h-2v2H8V0H6v2H3a3 3 0 0 0-3 3v19h24V5a3 3 0 0 0-3-3ZM2 5a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v3H2Zm0 17V10h20v12Z"
                      fill="#ffffff" opacity="1" data-original="#000000"></path>
                    <path d="M15 13h2v2h-2zM11 13h2v2h-2zM7 13h2v2H7zM15 17h2v2h-2zM11 17h2v2h-2zM7 17h2v2H7z"
                      fill="#ffffff" opacity="1" data-original="#000000"></path>
                  </g>
                </g>
              </svg>
              <h4>Book An Appointment</h4>
            </div>
            <div class="book-appointment-info">
              <p class="text-center"> Do you wish to know more about FansForX? Talk to our experts over a call and we’ll
                help you with all
                the information you’ll need. Book an appointment with us now at your convenience and we’ll schedule the
                call.</p>
              <div class="book-appointmen-btn">
                <a href="https://calendly.com/fansforx/sales-meeting" class="smooth btn banner-theme-outline-btn"><span
                    class="get-btn">Request</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-12 col-lg-12 col-xl-8">
          <div class="contact-us-sec">
            <form action="src/index.php" method="post">
              <div class="validation-message"></div>
              <input type="text" name="csrf_token" id="csrf_token" hidden>
              <div class="row">
                <div class="col-md-6">
                  <label class="form-label">Name</label>
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1"> <svg xmlns="http://www.w3.org/2000/svg"
                        version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" x="0" y="0"
                        viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                        <g>
                          <circle cx="256" cy="128" r="128" fill="#6730e3" opacity="1" data-original="#000000" class="">
                          </circle>
                          <path
                            d="M256 298.667c-105.99.118-191.882 86.01-192 192C64 502.449 73.551 512 85.333 512h341.333c11.782 0 21.333-9.551 21.333-21.333-.117-105.99-86.009-191.883-191.999-192z"
                            fill="#6730e3" opacity="1" data-original="#000000" class="">
                          </path>
                        </g>
                      </svg></span>
                    <input type="text" class="form-control" name="name" data-validation="length"
                      data-validation-length="3-200" placeholder="Enter your name" required />
                  </div>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Email</label>
                  <div class="input-group mb-3">
                    <span class="input-group-text" id="basic-addon1"> <svg xmlns="http://www.w3.org/2000/svg"
                        version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" x="0" y="0"
                        viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve">
                        <g>
                          <path
                            d="m23.954 5.542-8.418 8.418a5.007 5.007 0 0 1-7.072 0L.046 5.542C.032 5.7 0 5.843 0 6v12a5.006 5.006 0 0 0 5 5h14a5.006 5.006 0 0 0 5-5V6c0-.157-.032-.3-.046-.458Z"
                            fill="#6730e3" opacity="1" data-original="#000000"></path>
                          <path
                            d="m14.122 12.546 9.134-9.135A4.986 4.986 0 0 0 19 1H5A4.986 4.986 0 0 0 .744 3.411l9.134 9.135a3.007 3.007 0 0 0 4.244 0Z"
                            fill="#6730e3" opacity="1" data-original="#000000"></path>
                        </g>
                      </svg></span>
                    <input type="text" class="form-control" name="email" data-validation="email"
                      placeholder="Enter your email" required />
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <label class="form-label">Phone Number</label>
                <div class="input-group mb-3">
                  <span class="input-group-text" id="basic-addon1"> <svg xmlns="http://www.w3.org/2000/svg"
                      version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" x="0" y="0"
                      viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class="">
                      <g>
                        <path d="M4 0v21a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V0Zm9.005 22.015h-2.012V20h2.012ZM7 18V3h10v15Z"
                          fill="#6730e3" opacity="1" data-original="#000000" class=""></path>
                      </g>
                    </svg></span>
                  <input type="number" class="form-control" name="phone"  id="phone-number" data-validation="custom"
                    data-validation-regexp="^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-.]*(\d{4})(?: *x(\d+))?\s*$"
                    placeholder="Phone" onkeyup="checkNumber()" required  />
                </div>
                <div id="error-info"></div>
              </div>
              <div class="col-md-12">
                <div class="form-group">
                  <label for="phoneNumber" class="form-label">Message</label>
                  <div class="contact-form-textarea">
                    <textarea type="text" class="form-control height-auto" name="message" placeholder="Message" rows="5"
                      style="height: auto;" required></textarea>
                  </div>
                </div>
              </div>
              <div class="col-md-12">
                <div class="col-md-12">
                  <div
                    class="g-recaptcha mt-3 "
                    id="rcaptcha"
                    data-sitekey="6LehcuInAAAAABH1NXUp7wzrrD1WLAqykq4tXCWc"
                    data-callback="recaptcha_callback"
                  ></div>
                  <span id="captcha" style="color: red"></span>
                </div>
              </div>
              <div class="contact-form-btn">
                <button type="submit" class="btn-primary"  id="download_button" disabled> Send </button>
              </div>
            </form>
          </div>
          <style>
            #error-info p{
  margin-bottom: 0;
  color: red;
  font-size: 0.8em;
  font-weight: 500;
}
          </style>
        </div>
      </div>
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script> 
  $(document).ready(function() {
    var isRecaptchaVerified = false;
    var numberInput = $('#phone-number');
    var errorInfo = $('#error-info');
    var submitButton = $('#download_button');

          function checkNumber() {
                var numberLength = numberInput.val().length;
                if (numberLength >= 10) {
                      errorInfo.hide();
                    if (isRecaptchaVerified) {
                        submitButton.prop('disabled', false);
                    } else {
                        submitButton.prop('disabled', true);
                    }
                } else {
                    errorInfo.show().html("<p>The Phone Number Must be At least 10 Digits</p>");
                    submitButton.prop('disabled', true);
                }
            }

            window.checkNumber = checkNumber;

            function recaptcha_callback() {
                isRecaptchaVerified = true;
                checkNumber(); // Call checkNumber to re-validate on recaptcha completion
            }

            window.recaptcha_callback = recaptcha_callback;
        });
          </script>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            <script
              src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
              async
              defer
            ></script>
</body>
</html>
Back to Directory File Manager