API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 26th, 2019
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.25 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.     <meta charset="utf-8">
  3.     <title>In-store Raffle</title>
  4.     <meta name="viewport" content="width=device-width,initial-scale=1">
  5.     <style>
  6.         @font-face {
  7.             font-family: Helvetica-local;
  8.             src: url(https://jdsports-client-resources.s3.amazonaws.com/third-party/fonts/Helvetica.ttf) format('truetype');
  9.             font-weight: 600;
  10.         }
  11.  
  12.         body {
  13.             background-color: #D3D3D3;
  14.             margin: 0;
  15.             font-family: Helvetica;
  16.             font-weight: 600;
  17.         }
  18.  
  19.         .compDisabled {
  20.             height: 100%;
  21.             width: 100%;
  22.             position: fixed;
  23.             background-color: rgba(255, 255, 255, 0.9);
  24.             display: flex;
  25.             flex-direction: column;
  26.             justify-content: center;
  27.         }
  28.  
  29.         .compDisabled span {
  30.             text-align: center;
  31.             font-size: 40px;
  32.             font-weight: bold;
  33.             padding: 0 36px;
  34.         }
  35.  
  36.         .compWrapper img {
  37.             display: block;
  38.             max-width: 100%;
  39.             margin: 0 auto;
  40.         }
  41.  
  42.         #compForm {
  43.             padding: 20px;
  44.         }
  45.  
  46.         #compForm input[type=text],
  47.         #compForm input[type=email],
  48.         #compForm input[type=tel],
  49.         #compForm input[type=button],
  50.         #compForm select {
  51.             width: 100%;
  52.             height: 43px;
  53.             box-sizing: border-box;
  54.             padding: 7px 3%;
  55.             margin-bottom: 5px;
  56.             font-weight: bold;
  57.             font-size: 14px;
  58.             -webkit-appearance: none !important;
  59.             -webkit-border-radius: 0 !important;
  60.             border-radius: 0 !important;
  61.             background: rgba(255, 255, 255, 0.6);
  62.             border: 0;
  63.         }
  64.  
  65.         #compForm select {
  66.             cursor: pointer;
  67.         }
  68.  
  69.         .termsBox1 {
  70.             margin-top: 20px;
  71.             margin-bottom: 20px;
  72.         }
  73.  
  74.         #compForm input#submit {
  75.             border: 0;
  76.             cursor: pointer;
  77.             background-color: #000;
  78.             width: 60%;
  79.             text-align: center;
  80.             color: #fff;
  81.             font-size: 14px;
  82.             margin: 0 auto;
  83.             display: block;
  84.             margin-top: 30px;
  85.             margin-bottom: 20px;
  86.         }
  87.  
  88.         .compWrapper .formError {
  89.             display: none;
  90.             color: red;
  91.             font-family: arial;
  92.         }
  93.  
  94.         .termsText {
  95.             font-size: 14px;
  96.         }
  97.  
  98.         #sending {
  99.             text-align: center;
  100.             font-weight: bold;
  101.             font-size: 24px;
  102.         }
  103.  
  104.         #other {
  105.             display: none;
  106.         }
  107.  
  108.         ::-webkit-input-placeholder {
  109.             color: #000;
  110.         }
  111.  
  112.         :-moz-placeholder {
  113.             /* Firefox 18- */
  114.             color: #000;
  115.         }
  116.  
  117.         ::-moz-placeholder {
  118.             /* Firefox 19+ */
  119.             color: #000;
  120.         }
  121.  
  122.         :-ms-input-placeholder {
  123.             color: #000;
  124.         }
  125.     </style>
  126. </head>
  127. <body>
  128. <div class="compWrapper">
  129.     <!--<div class="compDisabled">
  130.        <span>Next round - Starts @ 10am</span>
  131.    </div> -->
  132.     <img class="headerImg"
  133.         src="https://i8.amplience.net/i/jpl/su19-sacai-assets-blazer-blue-1x1-2-71e4f77344d11d50bd6ef3955955db6b">
  134.     <form id="compForm">
  135.         <div class="compInfo">
  136.             <p>Entrez vos coordonnées ci-dessous pour avoir la chance d'acheter la paire de <span class="product-name">Nike x Sacai Blazer </span>
  137.                 en magasin</p>
  138.         </div>
  139.         <input required="" type="text" name="fullName" id="fullName" class="js-required"
  140.               placeholder="Prénom &amp; Nom de famille:">
  141.         <input required="" type="email" name="email" id="email" class="js-required" placeholder="E-Mail:">
  142.         <input required="" type="text" name="phoneNumber" id="phoneNumber" class="js-required" placeholder="Téléphone:">
  143.         <input required="" type="text" name="cityOfRes" id="cityOfRes" class="js-required"
  144.               placeholder="Ville de résidence:">
  145.         <input required="" type="text" name="countryOfRes" id="countryOfRes" class="js-required"
  146.               placeholder="Pays de résidence:">
  147.         <select form="compForm" name="shoetype" id="shoetype" class="js-required">
  148.             <option value="" disabled="" selected="">Couleurs Disponibles:</option>
  149.             <option value="BLUE">BLUE</option>
  150.             <option value="YELLOW" id="option1">YELLOW</option>
  151.         </select>
  152.         <select form="compForm" name="shoeSize" id="shoeSize" class="js-required">
  153.             <option value="" disabled="" selected="">Taille (EU):</option>
  154.             <option value="36.5">36.5</option>
  155.             <option value="37">37</option>
  156.             <option value="37.5">37.5</option>
  157.             <option value="38">38</option>
  158.             <option value="38.5">38.5</option>
  159.             <option value="39">39</option>
  160.             <option value="39.5">39.5</option>
  161.             <option value="40">40</option>
  162.             <option value="40.5">40.5</option>
  163.             <option value="41">41</option>
  164.             <option value="42">42</option>
  165.             <option value="42.5">42.5</option>
  166.             <option value="43">43</option>
  167.             <option value="43.5">43.5</option>
  168.             <option value="44">44</option>
  169.             <option value="44.5">44.5</option>
  170.             <option value="45">45</option>
  171.             <option value="45.5">45.5</option>
  172.             <option value="46">46</option>
  173.             <option value="47">47</option>
  174.             <option value="47.5">47.5</option>
  175.         </select>
  176.         <input type="text" name="other" id="other">
  177.         <div class="termsBox1">
  178.             <input type="checkbox" name="termsAgreed" id="termsAgreed">
  179.             <label for="termsAgreed" class="termsText">
  180.                 Je confirme que je participe pour la possibilité d’acheter UNE PAIRE de <span class="product-name">Nike x Sacai Blazer </span>
  181.                 pour la taille choisie, dans la boutique Footpatrol Paris. Je comprends que cette raffle est une
  182.                 participation par personne seulement, et que les participations multiples seront annulées. En cas de
  183.                 succès, vous acceptez de recevoir une communication marketing de notre part vous informant de votre gain
  184.                 et confirmez que vous acceptez nos termes et conditions associés (Section 13, <a
  185.                    href="https://www.footpatrol.fr/customer-service/terms/">https://www.footpatrol.fr/customer-service/terms/</a>)
  186.             </label>
  187.         </div>
  188.  
  189.         <p>Veuillez cocher si vous consentez à recevoir les messages marketing Footpatrol. Nous attirons également votre
  190.             attention sur notre politique de confidentialité et les termes et conditions associés (<a
  191.                href="https://www.footpatrol.fr/customer-service/terms/">https://www.footpatrol.fr/customer-service/terms/</a>).
  192.         </p>
  193.         <div class="termsBox2">
  194.             <input type="checkbox" name="emailpermit" id="emailpermit">
  195.             <label for="emailpermit" class="termsText">
  196.                 Email
  197.             </label>
  198.         </div>
  199.         <div class="termsBox2">
  200.             <input type="checkbox" name="sms_optout" id="sms_optout">
  201.             <label for="sms_optout" class="termsText">
  202.                 SMS
  203.             </label>
  204.         </div>
  205.         <p>En cochant cette case, vous confirmez que vous avez 18 ans ou plus</p>
  206.         <div class="termsBox2">
  207.             <input type="checkbox" name="agepermit" id="agepermit">
  208.             <label for="agepermit" class="termsText">
  209.                 Confirmez
  210.             </label>
  211.             <input type="button" name="submit" id="submit" value="ENTER NOW">
  212.             <p class="formError">* Veuillez remplir tous les champs</p>
  213.             <div id="sending"></div>
  214.  
  215.         </div>
  216.     </form>
  217.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  218.     <script
  219.        src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.serializeObject/2.0.3/jquery.serializeObject.min.js"></script>
  220.     <script>
  221.         var queryParams = function () {
  222.             var params = window.location.search.split('?');
  223.             return {
  224.                 tag: params[1].split('=')[1],
  225.                 shortTag: params[2].split('=')[1],
  226.                 productName: params[3].split('=').pop().split('-'),
  227.                 imgURL: params[4].split('=')[1]
  228.             }
  229.         };
  230.  
  231.         $(document).ready(function () {
  232.             if (queryParams().imgURL) {
  233.                 $('.headerImg').attr('src', queryParams().imgURL);
  234.             }
  235.             var productNameStr = "";
  236.             for (i = 0; i < queryParams().productName.length; i++) {
  237.                productNameStr = productNameStr + queryParams().productName[i] + " ";
  238.            }
  239.            $('.product-name').text(productNameStr);
  240.            $("#compForm input[type=button]").on('click', function (e) {
  241.                var isFormValid = true;
  242.  
  243.  
  244.                $("input.js-required").each(function () {
  245.                    if ($.trim($(this).val()).length == 0) {
  246.                        isFormValid = false;
  247.                    }
  248.                });
  249.  
  250.                $("select.js-required").each(function () {
  251.                    if ($.trim($(this).val()).length == 0) {
  252.                        isFormValid = false;
  253.                    }
  254.                });
  255.  
  256.                $("input[name=termsAgreed]").each(function () {
  257.                    if (!$(this).is(':checked')) {
  258.                        isFormValid = false;
  259.                    }
  260.                });
  261.                if (!isFormValid) {
  262.                    $(".formError").show();
  263.                    event.preventDefault();
  264.                }
  265.                if (isFormValid == true) {
  266.                    sendData();
  267.                }
  268.                return isFormValid;
  269.  
  270.            });
  271.        });
  272.  
  273.        function sendData() {
  274.  
  275.            var name = $('input[name="fullName"]').val();
  276.            var tel = $('input[name="phoneNumber"]').val();
  277.            var email = $('input[name="email"]').val();
  278.            var shoesize = $('select[name="shoeSize"]').val();
  279.            var shoeType = $('select[name="shoetype"]').val();
  280.            var countryOfRes = $('input[name="countryOfRes"]').val();
  281.            var cityOfRes = $('input[name="cityOfRes"]').val();
  282.            var emailpermit = $('input[name="emailpermit"]').val();
  283.            var agePermit = $('input[name="agepermit"]').val();
  284.  
  285.            if (agePermit == 'on') {
  286.                agePermit = 'Y';
  287.            } else {
  288.                agePermit = 'N';
  289.            }
  290.  
  291.            if (emailpermit == "on") {
  292.                emailpermit = "1";
  293.            } else {
  294.                emailpermit = "0";
  295.            }
  296.  
  297.            var sms_optout = $('input[name="sms_optout"]').val();
  298.            if (sms_optout == "on") {
  299.                sms_optout = "0";
  300.            } else {
  301.                sms_optout = "1";
  302.            }
  303.            var tag = queryParams().tag;
  304.            var shortTag = '&' + queryParams().shortTag;
  305.            var posturl = 'https://redeye.footpatrol.com/cgi-bin/rr/blank.gif?nourl=' + tag + '&firstName=' + name + '&email=' + email + '&telephone=' + tel + shortTag + '_shoetype=' + shoeType + shortTag + '_shoesize=' + shoesize + shortTag + '_cityofres=' + cityOfRes + '&yzemail=' + tag + shortTag + '_countryofres=' + countryOfRes + '&emailpermit=' + emailpermit + '&agepermit=' + agePermit + '&sms_optout=' + sms_optout + '&site=FP&currency=GBP';
  306.  
  307.  
  308.            console.log(posturl);
  309.            //var img = '<img src="' + posturl + '">';
  310.             //$('body').append(img);
  311.             //$('input[type="button"]').val('Inscription prise en compte');
  312.             //$('input[type="button"]').attr('disabled', '');
  313.  
  314.         };
  315.         // Strip Numbers
  316.         $(document).on('change', 'input[name="phoneNumber"]', function () {
  317.             var tel = $('input[name="phoneNumber"]');
  318.             if (tel.val().match(/\b[^\d\W]+\b/g)) {
  319.                 var street = tel.val().replace(/\b[^\d\W]+\b/g, '');
  320.                 $(tel).val(street);
  321.             }
  322.         });
  323.  
  324.     </script>
  325.  
  326.  
  327. </div>
  328. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!