Advertisement
mustyumr

ventra

Sep 18th, 2015
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.18 KB | None | 0 0
  1.  
  2. <?php
  3.  
  4. /**
  5. * Template Name: New Facebook Application Form
  6. * */
  7.  
  8. get_header();
  9.  
  10. ?>
  11. <!-- Facebook Pixel Code -->
  12. <script>
  13. !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  14. n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  15. n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  16. t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  17. document,'script','//connect.facebook.net/en_US/fbevents.js');
  18.  
  19. fbq('init', '1010965415591183');
  20. fbq('track', 'PageView');
  21. </script>
  22. <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1010965415591183&ev=PageView&noscript=1"/></noscript>
  23. <!-- End Facebook Pixel Code -->
  24.  
  25.  
  26. <!-- -->
  27. <script>
  28. // ViewContent
  29. // Track key page views (ex: product page, landing page or article)
  30. fbq('track', 'ViewContent');
  31. </script>
  32.  
  33. <!-- Add css for the action form -->
  34. <script src="<?php echo get_template_directory_uri(); ?>/js/modernizr.custom.js"></script>
  35. <style type="text/css"></style>
  36. <?php while ( have_posts() ) : the_post(); ?>
  37.  
  38. <style>
  39. @font-face {
  40. font-weight: normal;
  41. font-style: normal;
  42. font-family: 'icomoon';
  43. src:url('<?php echo get_template_directory_uri(); ?>/fonts/icomoon/icomoon.eot?-9heso');
  44. src:url('<?php echo get_template_directory_uri(); ?>/fonts/icomoon/icomoon.eot?#iefix-9heso') format('embedded-opentype'),
  45. url('<?php echo get_template_directory_uri(); ?>/fonts/icomoon/icomoon.woff?-9heso') format('woff'),
  46. url('<?php echo get_template_directory_uri(); ?>/fonts/icomoon/icomoon.ttf?-9heso') format('truetype'),
  47. url('<?php echo get_template_directory_uri(); ?>/fonts/icomoon/icomoon.svg?-9heso#icomoon') format('svg');
  48. }
  49.  
  50. .simform {
  51. position: relative;
  52. margin: 0 auto 20px;
  53. padding: 0 0 0.5em;
  54. max-width: 860px;
  55. width: 100%;
  56. text-align: left;
  57. font-size: 2.5em;
  58. }
  59.  
  60. .simform .submit {
  61. display: none;
  62. }
  63.  
  64. /* Question list style */
  65. .simform ol {
  66. margin: 0;
  67. padding: 0;
  68. list-style: none;
  69. position: relative;
  70. -webkit-transition: height 0.4s;
  71. transition: height 0.4s;
  72. }
  73.  
  74. .simform ol:before {
  75. content: '';
  76. background-color: rgba(0,0,0,0.5);
  77. position: absolute;
  78. left: 0;
  79. bottom: 0;
  80. width: 100%;
  81. height: 1.35em;
  82. min-height: 40px;
  83. border: solid thin #b9062c;
  84. }
  85.  
  86. .questions li {
  87. z-index: 100;
  88. position: relative;
  89. visibility: hidden;
  90. height: 0;
  91. -webkit-transition: visibility 0s 0.4s, height 0s 0.4s;
  92. transition: visibility 0s 0.4s, height 0s 0.4s;
  93. }
  94.  
  95. .questions li.current,
  96. .no-js .questions li {
  97. visibility: visible;
  98. height: auto;
  99. -webkit-transition: none;
  100. transition: none;
  101. }
  102.  
  103. /* Labels */
  104. .questions li > span {
  105. display: block;
  106. overflow: hidden;
  107. }
  108.  
  109. .questions li > span label {
  110. display: block;
  111. -webkit-transition: -webkit-transform 0.4s;
  112. transition: transform 0.4s;
  113. -webkit-transform: translateY(-100%);
  114. transform: translateY(-100%);
  115. }
  116.  
  117. .questions li.current > span label,
  118. .no-js .questions li > span label {
  119. -webkit-transition: none;
  120. transition: none;
  121. -webkit-transform: translateY(0);
  122. transform: translateY(0);
  123. }
  124.  
  125. .show-next .questions li.current > span label {
  126. -webkit-animation: moveUpFromDown 0.4s both;
  127. animation: moveUpFromDown 0.4s both;
  128. }
  129.  
  130. @-webkit-keyframes moveUpFromDown {
  131. from { -webkit-transform: translateY(100%); }
  132. to { -webkit-transform: translateY(0); }
  133. }
  134.  
  135. @keyframes moveUpFromDown {
  136. from { -webkit-transform: translateY(100%); transform: translateY(100%); }
  137. to { -webkit-transform: translateY(0); transform: translateY(0); }
  138. }
  139.  
  140. /* Input field */
  141. .questions input, .questions select {
  142. display: block;
  143. margin: 0.3em 0 0 0;
  144. padding: 0em 1em 0.1em 0.5em;
  145. width: calc(100% - 2em);
  146. border: none;
  147. background: transparent;
  148. color: rgba(255,255,255,1);
  149. font-size: 0.8em;
  150. line-height: 1;
  151. opacity: 0;
  152. -webkit-transition: opacity 0.3s;
  153. transition: opacity 0.3s;
  154. height: 1.5em;
  155. min-height: 40px;
  156. outline-offset: 0px
  157. }
  158.  
  159. .questions .current input,
  160. .no-js .questions input, .questions .current select, .no-js .questions select{
  161. opacity: 1;
  162. }
  163.  
  164. .questions input:focus,
  165. .simform button:focus, .questions select:focus {
  166. outline: none;
  167. }
  168.  
  169. /* Next question button */
  170. .next {
  171. position: absolute;
  172. right: 0;
  173. bottom: 20%; /* padding-bottom of form plus progress bar height */
  174. display: block;
  175. padding: 0;
  176. width: 1.5em;
  177. height: 2em;
  178. border: none;
  179. background: none;
  180. color: rgba(185, 6, 44, 0.5);
  181. text-align: center;
  182. opacity: 0;
  183. z-index: 100;
  184. cursor: pointer;
  185. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  186. transition: transform 0.3s, opacity 0.3s;
  187. -webkit-transform: translateX(-20%);
  188. transform: translateX(-20%);
  189. pointer-events: visible;
  190. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  191. }
  192.  
  193. .next:hover {
  194. color: #b9062c;
  195. display: block !important;
  196. }
  197.  
  198. .next::after {
  199. position: absolute;
  200. top: 0;
  201. left: 0;
  202. width: 100%;
  203. height: 100%;
  204. content: "\e600";
  205. text-transform: none;
  206. font-weight: normal;
  207. font-style: normal;
  208. font-variant: normal;
  209. font-family: 'icomoon';
  210. line-height: 2;
  211. speak: none;
  212. -webkit-font-smoothing: antialiased;
  213. -moz-osx-font-smoothing: grayscale;
  214. }
  215.  
  216. .next.show {
  217. opacity: 1;
  218. -webkit-transform: translateX(0);
  219. transform: translateX(0);
  220. pointer-events: auto;
  221. }
  222.  
  223. /* Progress bar */
  224. .simform .progress {
  225. width: 0%;
  226. height: 0.15em;
  227. background: rgba(0,0,0,0.3);
  228. -webkit-transition: width 0.4s ease-in-out;
  229. transition: width 0.4s ease-in-out;
  230. }
  231.  
  232. .simform .progress::before {
  233. position: absolute;
  234. top: auto;
  235. width: 100%;
  236. height: inherit;
  237. background: rgba(0,0,0,0.05);
  238. content: '';
  239. }
  240.  
  241. /* Number indicator */
  242. .simform .number {
  243. position: absolute;
  244. right: 0;
  245. overflow: hidden;
  246. margin: 0.4em 0;
  247. width: 3em;
  248. font-weight: 700;
  249. font-size: 0.4em;
  250. }
  251.  
  252. .simform .number:after {
  253. position: absolute;
  254. left: 50%;
  255. content: '/';
  256. opacity: 0.4;
  257. -webkit-transform: translateX(-50%);
  258. transform: translateX(-50%);
  259. }
  260.  
  261. .simform .number span {
  262. float: right;
  263. width: 40%;
  264. text-align: center;
  265. }
  266.  
  267. .simform .number .number-current {
  268. float: left;
  269. }
  270.  
  271. .simform .number-next {
  272. position: absolute;
  273. left: 0;
  274. }
  275.  
  276. .simform.show-next .number-current {
  277. -webkit-transition: -webkit-transform 0.4s;
  278. transition: transform 0.4s;
  279. -webkit-transform: translateY(-100%);
  280. transform: translateY(-100%);
  281. }
  282.  
  283. .simform.show-next .number-next {
  284. -webkit-animation: moveUpFromDown 0.4s both;
  285. animation: moveUpFromDown 0.4s both;
  286. }
  287.  
  288. /* Error and final message */
  289. .simform .error-message,
  290. .simform .final-message {
  291. position: absolute;
  292. visibility: hidden;
  293. opacity: 0;
  294. -webkit-transition: opacity 0.4s;
  295. transition: opacity 0.4s;
  296. }
  297.  
  298. .simform .error-message {
  299. padding: 0.4em 3.5em 0 0;
  300. width: 100%;
  301. color: rgba(255, 0, 0, 0.7);
  302. font-style: italic;
  303. font-size: 0.4em;
  304. }
  305.  
  306. .final-message {
  307. top: 50%;
  308. left: 0;
  309. /*padding: 0.5em;*/
  310. width: 100%;
  311. text-align: center;
  312. -webkit-transform: translateY(-50%);
  313. transform: translateY(-50%);
  314. }
  315.  
  316. .error-message.show,
  317. .final-message.show {
  318. visibility: visible;
  319. opacity: 1;
  320. }
  321.  
  322. .final-message.show {
  323. -webkit-transition-delay: 0.5s;
  324. transition-delay: 0.5s;
  325. font-size: 20px;
  326. color: #b9062c;
  327. }
  328.  
  329. /* Final hiding of form / showing message */
  330. .simform-inner.hide {
  331. visibility: hidden;
  332. opacity: 0;
  333. -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
  334. transition: opacity 0.3s, visibility 0s 0.3s;
  335. }
  336.  
  337. /* No JS Fallback */
  338. .no-js .simform {
  339. font-size: 1.75em;
  340. }
  341.  
  342. .no-js .questions li {
  343. padding: 0 0 2em;
  344. }
  345.  
  346. .no-js .simform .submit {
  347. display: block;
  348. float: right;
  349. padding: 10px 20px;
  350. border: none;
  351. background: rgba(0,0,0,0.3);
  352. color: rgba(0,0,0,0.4);
  353. }
  354.  
  355. .no-js .simform .controls {
  356. display: none;
  357. }
  358.  
  359. /* Remove IE clear cross */
  360. input[type=text]::-ms-clear {
  361. display: none;
  362. }
  363.  
  364. /* Adjust form for smaller screens */
  365. @media screen and (max-width: 44.75em) {
  366. .simform {
  367. font-size: 1.8em;
  368. }
  369. }
  370.  
  371. @media screen and (max-width: 33.5625em) {
  372. .simform {
  373. font-size: 1.2em;
  374. }
  375. }
  376. .advert{
  377. position:relative;
  378. min-height: 350px;
  379.  
  380. }
  381. #calc-banner{
  382. /*max-width: 300px;*/
  383. /* float: right;
  384. position: absolute;
  385. top: 10px;
  386. right: 50px;*/
  387. margin: 20px 5px;
  388. padding: 5px 10px;
  389. border-radius: 4px;
  390. background-color: rgba(255,255,255,.6);
  391. }
  392.  
  393. .ad-loanCalculator{
  394. /*color :#fff;*/
  395. }
  396.  
  397. h2.call {
  398. margin-top: 20px;
  399. margin-bottom: 10px;
  400. color: #b9062c;
  401. }
  402.  
  403. .earn{
  404. margin-top: 20px;
  405. margin-bottom: 10px;
  406. /*color: #b9062c;*/
  407. }
  408.  
  409. .ad-loanCalculator .title{
  410.  
  411.  
  412. }
  413.  
  414. .ad-loanCalculator label{
  415.  
  416. /*font-size: 22px;*/
  417. font-weight: normal;
  418. }
  419.  
  420. select#ltenure > option {
  421. color: #000;
  422. }
  423.  
  424. .centit {
  425. text-align: center;
  426. border-top: 3px solid #b9062c;
  427. padding: 20px 0px;
  428. border-bottom: #7e6f73 3px solid;
  429. }
  430. #naira{
  431. font-size: 17px;
  432. }
  433. </style>
  434.  
  435. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  436. <section class="insideBanner apply advert"
  437. <?php
  438. if( has_post_thumbnail() && ! post_password_required() ):
  439. ?>
  440. style=" background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"
  441.  
  442. <?php endif; ?> >
  443.  
  444. <div class="container">
  445.  
  446. <div class="row">
  447. <section class="ad-loanCalculator padtop col-md-offset-7 col-md-5" >
  448. <div id="calc-banner">
  449. <div id="to-latter-hide">
  450. <h2 class="call">No collateral or guarantor?<br />No wahala!</h2>
  451. <b>Fill out the form below and receive a loan quote now!</b>
  452. <br />
  453. <?php echo (is_mobile())? '<br />' : '' ?>
  454. </div>
  455. <div class="final-message">
  456.  
  457.  
  458. </div>
  459. <?php if(!is_mobile()): ?>
  460. <form id="theform">
  461. <div class="row">
  462.  
  463. <div class="form-group col-sm-6">
  464. <label for="firstname" class="earn">What is your net monthly pay?</label>
  465. <input id="income" name="income" required class="form-control" type="number" placeholder="1000000" />
  466. </div>
  467.  
  468. <div class="form-group col-sm-6">
  469. <label for="fullname" class="earn">How much do you want?</label>
  470. <input id="loanamount" name="loanamount" required class="form-control" type="number" step="10000" min="40000" max="1000000" placeholder="1000000" />
  471. </div>
  472. </div>
  473.  
  474.  
  475. <div class="row">
  476.  
  477. <div class="form-group col-sm-6">
  478. <label for="firstname" class="required">How long do you want it for?</label>
  479. <select id="ltenure" name="loantenure" required class="form-control">
  480. <option value="3">3 months</option>
  481. <option value="6">6 months</option>
  482. <option value="9">9 months</option>
  483. <option value="12">12 months</option>
  484. </select>
  485. </div>
  486.  
  487. <div class="form-group col-sm-6">
  488. <label for="fullname" class="required">What is your first name?</label>
  489. <input required style="padding-top:0 !important;margin-top:0px !important;" class="form-control" id="fname" name="fname" type="text" placeholder="John"/>
  490. </div>
  491. </div>
  492.  
  493. <div class="row">
  494.  
  495. <div class="form-group col-sm-6">
  496. <label for="firstname" class="required">What's your last name?</label>
  497. <input id="lname" name="lname" type="text" required class="form-control" placeholder="Doe"/>
  498. </div>
  499.  
  500. <div class="form-group col-sm-6">
  501. <label for="fullname" class="required">What's your email address?</label>
  502. <input id="memail" name="memail" type="email" required class="form-control" placeholder="jdoe@domain.com"/>
  503. </div>
  504. </div>
  505.  
  506. <div class="row">
  507. <div class="form-group col-sm-12">
  508. <button id="send-quote" class="btn btn-warning btn-lg form-control" style="font-size: 19px !important; padding-top : 5px;" type="submit">Get quote</button>
  509. </div>
  510. </div>
  511.  
  512.  
  513. </form>
  514.  
  515.  
  516. <?php else : ?>
  517.  
  518. <form id="theform">
  519. <div class="row">
  520.  
  521. <div class="form-group col-sm-6">
  522.  
  523. <input id="income" name="income" required class="form-control" type="number" placeholder="What is your net monthly pay?" />
  524. </div>
  525.  
  526. <div class="form-group col-sm-6">
  527.  
  528. <input id="loanamount" name="loanamount" required class="form-control" type="number" step="10000" min="40000" max="1000000" placeholder="How much do you want?" />
  529. </div>
  530. </div>
  531.  
  532.  
  533. <div class="row">
  534.  
  535. <div class="form-group col-sm-6">
  536.  
  537. <select id="ltenure" name="loantenure" required class="form-control">
  538. <option value="" selected="selected">How long do you want it for?</option>
  539. <option value="3">3 months</option>
  540. <option value="6">6 months</option>
  541. <option value="9">9 months</option>
  542. <option value="12">12 months</option>
  543. </select>
  544. </div>
  545.  
  546. <div class="form-group col-sm-6">
  547.  
  548. <input required style="padding-top:0 !important;margin-top:0px !important;" class="form-control" id="fname" name="fname" type="text" placeholder="What is your first name?"/>
  549. </div>
  550. </div>
  551.  
  552. <div class="row">
  553.  
  554. <div class="form-group col-sm-6">
  555.  
  556. <input id="lname" name="lname" type="text" required class="form-control" placeholder="What's your last name?"/>
  557. </div>
  558.  
  559. <div class="form-group col-sm-6">
  560.  
  561. <input id="memail" name="memail" type="email" required class="form-control" placeholder="What's your email address?"/>
  562. </div>
  563. </div>
  564.  
  565. <div class="row">
  566. <div class="form-group col-sm-12">
  567. <button id="send-quote" class="btn btn-warning btn-lg form-control" style="font-size: 19px !important; padding-top : 5px;" type="submit">Get quote</button>
  568. </div>
  569. </div>
  570.  
  571.  
  572. </form>
  573.  
  574.  
  575. <?php endif ?>
  576.  
  577.  
  578. </div>
  579. </section>
  580.  
  581. <div>
  582.  
  583.  
  584.  
  585. </div>
  586. </section>
  587. </article>
  588.  
  589.  
  590. <?php endwhile; ?>
  591.  
  592. <script src="<?php echo get_template_directory_uri(); ?>/js/classie.js"></script>
  593.  
  594. <?php get_footer(); ?>
  595.  
  596. <script>
  597.  
  598. $("#theform").submit(function(e){
  599.  
  600.  
  601. $("#theform").validate();
  602.  
  603.  
  604. var ad_source = <?php echo json_encode($_GET['ad_source']); ?>;
  605. var ad_name = <?php echo json_encode($_GET['ad_name']); ?>;
  606. var gclsrc = <?php echo json_encode($_GET['gclsrc']); ?>;
  607.  
  608. ad_source = ad_source? ad_source : 'N/A';
  609. ad_name = ad_name? ad_name : 'N/A';
  610. gclsrc = gclsrc ? gclsrc : 'N/A';
  611.  
  612.  
  613. var loanamount = $('#loanamount').val();
  614. var loantenure = $('#ltenure').val();
  615. var income = $('#income').val();
  616.  
  617. var memail = $('#memail').val();
  618. var fname = $('#fname').val();
  619. var lname = $('#lname').val();
  620.  
  621. if(loanamount == '' || loantenure == '' || repayment == '' || memail == '' || fname == '' || lname == ''){
  622.  
  623. return false;
  624. }
  625.  
  626.  
  627. var mname = fname+" "+lname;
  628.  
  629. var allowed = getMaxLoan(income);
  630.  
  631. var calcs = calculateLoan(loanamount,loantenure);
  632. var ncalcs = calculateLoan(allowed.amount,allowed.tenor);
  633.  
  634. var repayment = calcs.repayment;
  635. var monthlyrepayment = calcs.mrepayment;
  636.  
  637. var ser = 'ad_source='+ad_source+'&ad_name='+ad_name+'&gclsrc='+gclsrc+'&firstname='+fname+'&surname='+lname+'&email='+memail+'&loanamount='+loanamount+'&loantenor='+loantenure;
  638.  
  639.  
  640. var text = "";
  641.  
  642. console.log(allowed)
  643. console.log(loanamount)
  644.  
  645. if(allowed.amount< 40000) {
  646.  
  647. text = "ad-res-less";
  648.  
  649. }else if(allowed.amount > loanamount)
  650. {
  651.  
  652. text = "ad-res-same";
  653.  
  654. }else if(allowed.amount == loanamount){
  655.  
  656. text = "ad-res-more";
  657.  
  658. }
  659.  
  660. if(income < 22900)
  661. text = "ad-inelligible";
  662.  
  663.  
  664.  
  665. sendMail(text);
  666.  
  667. function template(html){
  668.  
  669. var message = {
  670. "key": "-Vv9KY8xtLEJJEgyKnv5Dg",
  671. "template_name": html,
  672. "template_content": [
  673. {
  674. "name": "example name",
  675. "content": "example content"
  676. }
  677. ],
  678. "message": {
  679. "subject": "Welcome to One Credit",
  680. "from_email": "customer@one-cred.com",
  681. "from_name": "One Credit",
  682. "to": [
  683. {
  684. "email": memail,
  685. "name": mname,
  686. "type": "to"
  687. }
  688. ],
  689. "merge": true,
  690. "merge_language": "handlebars",
  691. "global_merge_vars": [
  692. {
  693. "name": "fullname",
  694. "content": mname
  695. },
  696. {
  697. "name": "loantenor",
  698. "content": loantenure
  699. },
  700.  
  701. {
  702. "name": "loanamount",
  703. "content": addCommas(loanamount)
  704. },
  705. {
  706. "name": "salary",
  707. "content": addCommas(income)
  708. },
  709. {
  710. "name": "mrepayment",
  711. "content": addCommas(monthlyrepayment)
  712. },
  713. {
  714. "name": "applylink",
  715. "content": "http://www.one-cred.com/apply/?regid="+memail+"&fname="+fname+"&lname="+lname+"&ad_source="+ad_source+"&ad_name="+ad_name+"&gclsrc="+gclsrc+"&pay="+loanamount+"&duration="+loantenure,
  716. },
  717. {
  718. "name": "aloanamount",
  719. "content": addCommas(allowed.amount)
  720. },
  721.  
  722. {
  723. "name": "aloantenor",
  724. "content": allowed.tenor
  725. },
  726.  
  727. {
  728. "name": "amrepayment",
  729. "content": addCommas(ncalcs.mrepayment)
  730. },
  731.  
  732. ]
  733. }
  734. }
  735.  
  736. return message;
  737. }
  738.  
  739.  
  740. function sendMail(text){
  741.  
  742. var message = template(text);
  743.  
  744. $.ajax({
  745. url: "https://mandrillapp.com/api/1.0/messages/send-template.json",
  746. method: "POST",
  747. dataType : 'json',
  748. data:message,
  749. success : function(res){
  750.  
  751. $('#theform').addClass( 'hide' );
  752.  
  753. if(res[0].status == "sent"){
  754.  
  755.  
  756. // CompleteRegistration
  757. // Track when a registration form is completed (ex. complete subscription, sign up for a service)
  758. fbq('track', 'CompleteRegistration');
  759.  
  760. $('.final-message' ).html('<h1 style="color:#b9062c;">Redirecting....Please wait</h1>');
  761.  
  762.  
  763. $('.final-message' ).addClass( 'show' );
  764.  
  765. $('#to-latter-hide' ).addClass('invisible');
  766.  
  767. $.post('../app/users/updateuserfront/',ser,function(data){
  768.  
  769. //console.log(data);
  770. });
  771.  
  772. window.location.href = "http://www.one-cred.com/apply-for-a-loan-now/confirmation/?"+ser;
  773.  
  774. }
  775. },
  776. error:function(err){
  777.  
  778. console.log(err);
  779.  
  780. $('#theform').removeClass( 'hide' );
  781. $('#to-latter-hide' ).removeClass('invisible');
  782.  
  783. alert('Invalid data, Please refresh the page and try again.');
  784. }
  785. });
  786. }
  787.  
  788. e.preventDefault();
  789.  
  790. return false;
  791. })
  792.  
  793.  
  794.  
  795.  
  796.  
  797. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement