<?php /* Template Name: Contact Page */
get_header(); ?>

<section class="contact-bnr">
      <div class="custom-container container">
        <div class="inner-wrp">
          <div class="title">Crowdfunding, here we come.</div>
        </div>
      </div>
      <a href="tel:+9175247662" class="support-cta">
        <img src="<?php echo get_template_directory_uri(); ?>/images/help-icon.svg" alt="" />
      </a>
    </section>
    <section class="contact-area">
      <div class="custom-container container">
        <div class="title-blk">
          <div class="sub-title">
            <span class="tag-txt para"
              >Reach out the way it works for you:</span
            >
          </div>
        </div>
        <div class="contact-info-wrp">
          <div class="info-blks">
            <div class="icon">
              <img src="<?php echo get_template_directory_uri(); ?>/images/call.svg" alt="" />
            </div>
            <a href="tel:+(917) 524-7662" class="txt">(917) 524-7662</a>
          </div>
          <div class="info-blks">
            <div class="icon">
              <img src="<?php echo get_template_directory_uri(); ?>/images/msg-icon.svg" alt="" />
            </div>
            <a href="sms:+(917) 524-7662" class="txt">(917) 524-7662</a>
          </div>
          <div class="info-blks">
            <div class="icon">
              <img src="<?php echo get_template_directory_uri(); ?>/images/whatsapp.svg" alt="" />
            </div>
            <a href="https://wa.me/19175247662" target="_blank" class="txt">(917) 524-7662</a>
          </div>
                    <div class="info-blks">
            <div class="icon">
              <img src="<?php echo get_template_directory_uri(); ?>/images/mail.svg" alt="" />
            </div>
            <a href="mailto:info@kollect.live" class="txt">info@kollect.live</a>
          </div>
        </div>
        <div class="para form-note">Or fill out the form below and we’ll get back to you as soon as we can.</div>
        <form id="contact-form" data-parsley-validate>
        <div class="contact-form-wrp">
          <div class="row">
            <div class="col-sm-12 col-md-6">
              <div class="form-group">
                <div class="form-label para">Name</div>
                <input type="text" class="form-control" name="name" placeholder="Enter your full name" required data-parsley-required-message="Name is required." minlength="2" maxlength="50" oninput="this.value = this.value.replace(/[^A-Za-z'\s-]/g, '')" data-parsley-length-message="Name must be at least 2 characters long.">
              </div>
            </div>
            <div class="col-sm-12 col-md-6">
              <div class="form-group">
                <div class="form-label para">Email</div>
                <input type="email" class="form-control" name="emailid" placeholder="Enter your email address" required data-parsley-type="email" data-parsley-required-message="Email is required." data-parsley-type-message="Enter a valid email address." minlength="2" maxlength="50" data-parsley-length-message="Email must be between 2 and 50 characters.">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12 col-md-6">
              <div class="form-group">
                <div class="form-label para">Phone</div>
                <div class="input-call">
                    <select name="country_code" class="form-select" required>
                      <option value="+1" selected>+1</option>
                      <option value="+44">+44</option>
                      <option value="+61">+61</option>
                      <option value="+91">+91</option>
                      <option value="+81">+81</option>
                      <option value="+49">+49</option>
                      <option value="+33">+33</option>
                      <option value="+39">+39</option>
                      <option value="+7">+7</option>
                      <option value="+86">+86</option>
                      <option value="+27">+27</option>
                      <option value="+55">+55</option>
                      <option value="+34">+34</option>
                      <option value="+64">+64</option>
                      <option value="+82">+82</option>
                      <option value="+353">+353</option>
                      <option value="+358">+358</option>
                      <option value="+31">+31</option>
                      <option value="+46">+46</option>
                      <option value="+41">+41</option>
                    </select>

                    <span class="seprator"></span>
                    <input type="text" name="phone_number" class="form-control" placeholder="Enter your phone number"
                          required minlength="10" maxlength="10" inputmode="numeric"
                          data-parsley-type="digits"
                          data-parsley-length="[10, 10]"
                          data-parsley-length-message="Phone number must be 10 digits."
                          data-parsley-required-message="Phone number is required."
                          data-parsley-errors-container="#phone-error-container" >
                </div>

                <!-- Error container -->
                <div id="phone-error-container"></div>

              </div>
            </div>
            <div class="col-sm-12 col-md-6">
              <div class="form-group">
                <div class="form-label para">Reason For Contact</div>
                <select name="reason" id="reason" class="form-control form-select" required data-parsley-required-message="Reason for contact is required.">
                    <option value="" selected disabled hidden>Choose your reason for contact</option>
                    <option value="Kollect">Kollect</option>
                    <option value="Kollect Plus">Kollect Plus</option>
                    <option value="Something else">Something else</option>
                </select>

              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="form-group">
                <div class="form-label para">Message</div>
                <textarea name="message" placeholder="Enter your message" class="form-control txtarea" required data-parsley-required-message="Message is required." data-parsley-length-message="Message must be at least 10 characters long." minlength="10" maxlength="250"></textarea>
              </div>
            </div>
          </div>
          <div class="btn-blk-contact">
            <button type="submit" class="btn-common btn-submit"><span>Submit</span></button>
          </div>
          <div id="form-response" style="margin-top:10px;"></div>
        </div>
      </form>
        </div>
      </div>
    </section>
    

    
<?php get_footer(); ?>