API tools faq
paste
Advertisement
mustyumr

facebookads page

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