bewrMB

bewrMB.markdown

bewrMB

A Pen by Mindgames on CodePen.

License.

index.html

<!-- STYLING -->
<div class="container">
  <!-- Modal -->
  <div id="modalForm" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Wypełnij formularz aby otrzymać tańszą ofertę sprzedaży prądu:</h4>
        </div>
        <div class="modal-body">


          <!-- Form   -->
          <form id='form' data-toggle="validator" role="form">


            <!--  NAME 
   ------------>
            <div class="form-group">
              <input type="text" class="form-control" id="inputName" placeholder="Imię i Nazwisko / Nazwa firmy" data-error="Pole wymagane" required>
              <div class="help-block with-errors"></div>
            </div>

            <!--  Phone 
   ------------>
            <div class="form-group has-feedback">
              <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputPhone" placeholder="Telefon" data-error="Pole wymagane" required>
              <div class="help-block with-errors"></div>
            </div>
            <!--  Email ------------>
            <div class="form-group">
              <input type="email" class="form-control" id="inputEmail" placeholder="E-mail" data-error="Pole wymagane" required>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
              <div class="checkbox">
                <label>
        <input type="checkbox" value="Option 1" name="group[2605][1]" id="termsOne" data-error="your error message" data-error="Proszę">
        Chcę również otrzymać ofertę od tańszego dostawcy internetu.
      </label>
                <div class="help-block with-errors"></div>
              </div>
            </div>
            <div class="form-group">
              <div class="checkbox">
                <label>
        <input type="checkbox" value="Option 1" name="group[2441][2]" id="termsTwo" data-error="Pole wymagane" required>
        Wyrażam zgodę na przetwarzanie moich danych osobowych i na kontakt telefoniczny w celu przedstawienia oferty.
      </label>
                <div class="help-block with-errors"></div>
              </div>
            </div>

            <!--    Modal      -->

        </div>
        <div class="modal-footer">
          <div class="form-group">
            <button type="submit" class="btn btn-block btn-dobre">Wyślij</button>
          </div>
          </form>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->

  <!-- STYLING -->
</div>
<!-- STYLING ENDS-->

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.10.2/validator.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.min.js"></script>

style.css

.container {
  max-width: 400px;
  margin-top: 100px;
}

#form .form-group {
  margin-bottom: 5px;
}
#form .help-block {
  display: block;
  margin: 0 0 0 2px !important;
  font-size: 12px;
  color: #a94442;
}
#form .modal-footer {
  padding: 10px;
  text-align: center;
}

.btn-dobre {
  color: #fff;
  background-color: #4da6bb;
  border-color: #2e6da4;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />

super.js

'use strict';
$('#form').validator().on('submit', function (e) {
    if (e.isDefaultPrevented()) {
    } else {
        postToGoogle();
    }
});
function popUp() {
    var cookieValue = Cookies.get('form');
    if (cookieValue === 'true') {
    } else {
        $('#modalForm').modal({ 'backdrop': 'static' });
        Cookies.set('form', 'true', { expires: 1 });
        console.log('nix');
    }
}
function postToGoogle() {
    var gName = $('#inputName').val();
    var gTel = $('#inputPhone').val();
    var gEmail = $('#inputEmail').val();
    var gCheck1 = $('input[type=\'checkbox\'][name=\'group[2605][1]\']:checked').val();
    var gCheck2 = $('input[type=\'checkbox\'][name=\'group[2441][2]\']:checked').val();
    $.ajax({
        url: 'https://docs.google.com/forms/d/1gPIx3wVkuYf8C3xrYSuPKLO8O2P1J0wblVLqXlaV0Bs/formResponse',
        data: {
            'entry.1208562149': gName,
            'entry.426134400': gTel,
            'entry.344314280': gEmail,
            'entry.303751615': gCheck1,
            'entry.494137982': gCheck2
        },
        type: 'POST',
        dataType: 'xml',
        statusCode: {
            0: function _() {
                console.log('code 0');
            },
            200: function _() {
                console.log('code 200');
            }
        }
    });
}
$(document).ready(function () {
    setTimeout(function () {
        popUp();
    }, 90000);
});
$('.modal').on('shown.bs.modal', function () {
    $(this).find('form').validator('destroy').validator();
});