briank

Kartra Horizontal Form - Kartra Page

May 22nd, 2021 (edited)
2,291
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.47 KB | None | 0 0
  1. <style>
  2. /* Add these styles (excluding the style tags themselves) into the page custom styles section */
  3. .gdpr_terms { position: relative; padding-right: 35px; }
  4. .gdpr_terms > i { position: absolute; top: 0; right: 0; margin-top: 0; font-size: 22px; font-weight: bold; display: inline-block; vertical-align: middle; z-index: 1; }
  5. .kartra_page_optin_form .kartra_optin_cg .kartra_optin_gdpr_wrapper { margin-top: 0; }
  6. .kartra_page_optin_form .kartra_optin_gdpr_terms_popover { top: -160px; }
  7. .kartra_page_optin_form .kartra_optin_well-inner { max-height: 150px !important; }
  8. /*
  9.  * To mix horizontal and non-horizontal forms, retain the .land-form prefix
  10.  * and follow the procedure at https://youtu.be/Swz4xWkhCdI.
  11.  * I'm currently recommending "land-form" (as in "landscape form") as the class
  12.  * because it's more specific, but you can use "horizontal" as shown in the video
  13.  * (as long as you use the same thing here, with "." in front).
  14.  * To make all forms on the page horizontal, you can simply remove the .land-form prefix.
  15.  */
  16. .land-form .kartra_optin_c1 { display: flex; flex-wrap: wrap; }
  17. .land-form .kartra_optin_cg { flex: 100 0; margin-right: 10px; min-width: 250px; }
  18. .land-form .kartra_optin_gdpr_wrapper { width: 100%; display: flex; flex-wrap: wrap; }
  19. .land-form .kartra_optin_cg:nth-last-of-type(1):not(.gdpr_terms) { flex: 1 1 auto; min-width: 0; }
  20. .land-form .kartra_optin_c1 .kartra_optin_cg button.kartra_optin_submit_btn { margin-top: 0; }
  21. </style>
  22. <script>
  23. /*
  24.  * Include this script (including the script tags themselves) in the page FOOTER tracking
  25.  * section to allow the GDPR checkboxes to display properly in horizontal (landscape) forms.
  26.  */
  27. /* Implement jQuery event "after_kartra_prefill_optin" */
  28. (function (init) {
  29.     var kpo;
  30.     Object.defineProperty(window, 'kartra_prefill_optin', {
  31.     configurable: true, enumerable: true, get () { return kpo; },
  32.     set (f) {
  33.         kpo = function (fh) {
  34.         var r = f(fh);
  35.         jQuery(window).trigger('after_kartra_prefill_optin', [ fh ]);
  36.         return r;
  37.         };
  38.     }
  39.     });
  40.     if (init) window.kartra_prefill_optin = init;
  41. })(window.kartra_prefill_optin);
  42. (function ($) {
  43.   var r = function () {
  44.     $('.kartra_optin_cg .kartra_optin_gdpr_wrapper').each(function () {
  45.       $(this).insertBefore($(this).parent());
  46.     });
  47.   };
  48.   $(window).on('after_kartra_prefill_optin', r);
  49.   $(r);
  50. })(jQuery); 
  51. </script>
Add Comment
Please, Sign In to add comment