SHARE
TWEET

Untitled

a guest Apr 23rd, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Code Generated by JotForm (do not edit) -->
  2.  
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.min.js"></script>
  4. <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>
  5. <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.10918" type="text/javascript"></script>
  6. <script src="https://js.jotform.com/vendor/postMessage.js?3.3.10918" type="text/javascript"></script>
  7. <script src="https://js.jotform.com/WidgetsServer.js?v=1555534175523" type="text/javascript"></script>
  8. <script type="text/javascript">
  9.   JotForm.init(function(){
  10.       setTimeout(function() {
  11.           $('input_11').hint('From');
  12.        }, 20);
  13.       setTimeout(function() {
  14.           $('input_12').hint('To');
  15.        }, 20);
  16.  
  17.  JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  18.  JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
  19.  JotForm.calendarOther = {"today":"Today"};
  20.  var languageOptions = document.querySelectorAll('#langList li');
  21.  for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) {
  22.    languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar("5", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); }, 0); });
  23.  }
  24.  JotForm.setCalendar("5", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""});
  25.       setTimeout(function() {
  26.           $('input_8').hint('First Name');
  27.        }, 20);
  28.       setTimeout(function() {
  29.           $('input_14').hint('Last Name');
  30.        }, 20);
  31.       setTimeout(function() {
  32.           $('input_9').hint('Email');
  33.        }, 20);
  34.       setTimeout(function() {
  35.           $('input_13').hint('Phone');
  36.        }, 20);
  37.       setTimeout(function() {
  38.           $('input_15').hint('Additional Comments');
  39.        }, 20);
  40.       JotForm.alterTexts(undefined);
  41.   JotForm.clearFieldOnHide="disable";
  42.   JotForm.submitError="jumpToFirstError";
  43.     /*INIT-END*/
  44.   });
  45.  
  46.    JotForm.prepareCalculationsOnTheFly([null,{"name":"requestA","qid":"1","text":"Getting Ready To Move? Request A Free Estimate!","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,null,{"description":"","name":"movingDate","qid":"5","text":"Moving Date","type":"control_datetime"},{"description":"","name":"homeSize","qid":"6","subLabel":"","text":"Home Size","type":"control_dropdown"},null,{"description":"","name":"first_name8","qid":"8","subLabel":"","text":"First Name","type":"control_textbox"},{"description":"","name":"email","qid":"9","subLabel":"example@example.com","text":"Email","type":"control_email"},null,{"description":"","name":"from","qid":"11","subLabel":"","text":"From","type":"control_textbox"},{"description":"","name":"to","qid":"12","subLabel":"","text":"To","type":"control_textbox"},{"description":"","name":"phoneNumber13","qid":"13","subLabel":"","text":"Phone Number","type":"control_textbox"},{"description":"","name":"last_name14","qid":"14","subLabel":"","text":"Last Name","type":"control_textbox"},{"description":"","name":"additionalComments","qid":"15","subLabel":"","text":"Additional Comments","type":"control_textbox"},{"name":"typeA","qid":"16","text":"","type":"control_widget"}]);
  47.    setTimeout(function() {
  48. JotForm.paymentExtrasOnTheFly([null,{"name":"requestA","qid":"1","text":"Getting Ready To Move? Request A Free Estimate!","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,null,{"description":"","name":"movingDate","qid":"5","text":"Moving Date","type":"control_datetime"},{"description":"","name":"homeSize","qid":"6","subLabel":"","text":"Home Size","type":"control_dropdown"},null,{"description":"","name":"first_name8","qid":"8","subLabel":"","text":"First Name","type":"control_textbox"},{"description":"","name":"email","qid":"9","subLabel":"example@example.com","text":"Email","type":"control_email"},null,{"description":"","name":"from","qid":"11","subLabel":"","text":"From","type":"control_textbox"},{"description":"","name":"to","qid":"12","subLabel":"","text":"To","type":"control_textbox"},{"description":"","name":"phoneNumber13","qid":"13","subLabel":"","text":"Phone Number","type":"control_textbox"},{"description":"","name":"last_name14","qid":"14","subLabel":"","text":"Last Name","type":"control_textbox"},{"description":"","name":"additionalComments","qid":"15","subLabel":"","text":"Additional Comments","type":"control_textbox"},{"name":"typeA","qid":"16","text":"","type":"control_widget"}]);}, 20);
  49. </script>
  50. <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.10918" rel="stylesheet" type="text/css" />
  51. <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.10918" />
  52. <link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.10918" />
  53. <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?"/>
  54. <style type="text/css">
  55.  
  56.  
  57.     .form-label-left{
  58.         width:150px;
  59.     }
  60.     .form-line{
  61.         padding-top:12px;
  62.         padding-bottom:12px;
  63.     }
  64.     .form-label-right{
  65.         width:150px;
  66.     }
  67.     .form-all{
  68.         width:690px;
  69.         color:#555 !important;
  70.         font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
  71.         font-size:14px;
  72.     }
  73. </style>
  74.  
  75. <style type="text/css" id="form-designer-style">
  76.     /* Injected CSS Code */
  77. .form-label.form-label-auto { display: block; float: none; text-align: left; width: inherit; } /*__INSPECT_SEPERATOR__*/
  78.     /* Injected CSS Code */
  79. </style>
  80.  
  81. <form class="jotform-form" action="https://submit.jotform.us/submit/90655646535162/" method="post" name="form_90655646535162" id="90655646535162" accept-charset="utf-8">
  82.   <input type="hidden" name="formID" value="90655646535162" />
  83.   <div role="main" class="form-all">
  84.     <ul class="form-section page-section">
  85.       <li id="cid_1" class="form-input-wide" data-type="control_head">
  86.         <div class="form-header-group ">
  87.           <div class="header-text httal htvam">
  88.           </div>
  89.         </div>
  90.       </li>
  91.       <li class="form-line jf-required" data-type="control_textbox" id="id_11">
  92.         <label class="form-label form-label-top form-label-auto" id="label_11" for="input_11">
  93.           From
  94.           <span class="form-required">
  95.             *
  96.           </span>
  97.         </label>
  98.         <div id="cid_11" class="form-input-wide jf-required">
  99.           <input type="text" id="input_11" name="q11_from" data-type="input-textbox" class="form-textbox validate[required]" size="20" value="" placeholder="From" data-component="textbox" required="" />
  100.         </div>
  101.       </li>
  102.       <li class="form-line jf-required" data-type="control_textbox" id="id_12">
  103.         <label class="form-label form-label-top form-label-auto" id="label_12" for="input_12">
  104.           To
  105.           <span class="form-required">
  106.             *
  107.           </span>
  108.         </label>
  109.         <div id="cid_12" class="form-input-wide jf-required">
  110.           <input type="text" id="input_12" name="q12_to" data-type="input-textbox" class="form-textbox validate[required]" size="20" value="" placeholder="To" data-component="textbox" required="" />
  111.         </div>
  112.       </li>
  113.       <li class="form-line jf-required" data-type="control_datetime" id="id_5">
  114.         <label class="form-label form-label-top form-label-auto" id="label_5" for="lite_mode_5">
  115.           Moving Date
  116.           <span class="form-required">
  117.             *
  118.           </span>
  119.         </label>
  120.         <div id="cid_5" class="form-input-wide jf-required">
  121.           <div data-wrapper-react="true">
  122.             <div style="display:none">
  123.               <span class="form-sub-label-container" style="vertical-align:top">
  124.                 <input type="tel" class="form-textbox validate[required, limitDate]" id="month_5" name="q5_movingDate[month]" size="2" data-maxlength="2" value="" required="" />
  125.                 <span class="date-separate">
  126.                    -
  127.                 </span>
  128.                 <label class="form-sub-label" for="month_5" id="sublabel_month" style="min-height:13px"> Month </label>
  129.               </span>
  130.               <span class="form-sub-label-container" style="vertical-align:top">
  131.                 <input type="tel" class="form-textbox validate[required, limitDate]" id="day_5" name="q5_movingDate[day]" size="2" data-maxlength="2" value="" required="" />
  132.                 <span class="date-separate">
  133.                    -
  134.                 </span>
  135.                 <label class="form-sub-label" for="day_5" id="sublabel_day" style="min-height:13px"> Day </label>
  136.               </span>
  137.               <span class="form-sub-label-container" style="vertical-align:top">
  138.                 <input type="tel" class="form-textbox validate[required, limitDate]" id="year_5" name="q5_movingDate[year]" size="4" data-maxlength="4" value="" required="" />
  139.                 <label class="form-sub-label" for="year_5" id="sublabel_year" style="min-height:13px"> Year </label>
  140.               </span>
  141.             </div>
  142.             <span class="form-sub-label-container" style="vertical-align:top">
  143.               <input type="text" class="form-textbox validate[required, limitDate, validateLiteDate]" id="lite_mode_5" size="12" data-maxlength="12" data-age="" value="" required="" data-format="mmddyyyy" data-seperator="-" placeholder="mm-dd-yyyy" />
  144.               <img alt="Pick a Date" id="input_5_pick" src="https://cdn.jotfor.ms/images/calendar.png" style="vertical-align:middle;margin-left:5px" data-component="datetime" />
  145.               <label class="form-sub-label" for="lite_mode_5" id="sublabel_litemode" style="min-height:13px"> Date </label>
  146.             </span>
  147.             <span class="form-sub-label-container" style="vertical-align:top">
  148.               <label class="form-sub-label" for="input_5_pick" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"> Date Picker Icon </label>
  149.             </span>
  150.           </div>
  151.         </div>
  152.       </li>
  153.       <li class="form-line jf-required" data-type="control_dropdown" id="id_6">
  154.         <label class="form-label form-label-top form-label-auto" id="label_6" for="input_6">
  155.           Home Size
  156.           <span class="form-required">
  157.             *
  158.           </span>
  159.         </label>
  160.         <div id="cid_6" class="form-input-wide jf-required">
  161.           <select class="form-dropdown validate[required]" id="input_6" name="q6_homeSize" style="width:150px" data-component="dropdown" required="">
  162.             <option value=""> Home Size </option>
  163.             <option value="Studio "> Studio </option>
  164.             <option value="1 Bedroom"> 1 Bedroom </option>
  165.             <option value="2 Bedroom"> 2 Bedroom </option>
  166.             <option value="3 Bedroom"> 3 Bedroom </option>
  167.             <option value="4 Bedroom"> 4 Bedroom </option>
  168.             <option value="5+ Bedroom"> 5+ Bedroom </option>
  169.           </select>
  170.         </div>
  171.       </li>
  172.       <li class="form-line jf-required" data-type="control_textbox" id="id_8">
  173.         <label class="form-label form-label-top form-label-auto" id="label_8" for="input_8">
  174.           First Name
  175.           <span class="form-required">
  176.             *
  177.           </span>
  178.         </label>
  179.         <div id="cid_8" class="form-input-wide jf-required">
  180.           <input type="text" id="input_8" name="q8_first_name8" data-type="input-textbox" class="form-textbox validate[required]" size="20" value="" placeholder="First Name" data-component="textbox" required="" />
  181.         </div>
  182.       </li>
  183.       <li class="form-line jf-required" data-type="control_textbox" id="id_14">
  184.         <label class="form-label form-label-top form-label-auto" id="label_14" for="input_14">
  185.           Last Name
  186.           <span class="form-required">
  187.             *
  188.           </span>
  189.         </label>
  190.         <div id="cid_14" class="form-input-wide jf-required">
  191.           <input type="text" id="input_14" name="q14_last_name14" data-type="input-textbox" class="form-textbox validate[required]" size="20" value="" placeholder="Last Name" data-component="textbox" required="" />
  192.         </div>
  193.       </li>
  194.       <li class="form-line jf-required" data-type="control_email" id="id_9">
  195.         <label class="form-label form-label-top form-label-auto" id="label_9" for="input_9">
  196.           Email
  197.           <span class="form-required">
  198.             *
  199.           </span>
  200.         </label>
  201.         <div id="cid_9" class="form-input-wide jf-required">
  202.           <span class="form-sub-label-container" style="vertical-align:top">
  203.             <input type="email" id="input_9" name="q9_email" class="form-textbox validate[required, Email]" size="30" value="" placeholder="Email" data-component="email" required="" />
  204.             <label class="form-sub-label" for="input_9" style="min-height:13px"> example@example.com </label>
  205.           </span>
  206.         </div>
  207.       </li>
  208.       <li class="form-line jf-required" data-type="control_textbox" id="id_13">
  209.         <label class="form-label form-label-top form-label-auto" id="label_13" for="input_13">
  210.           Phone Number
  211.           <span class="form-required">
  212.             *
  213.           </span>
  214.         </label>
  215.         <div id="cid_13" class="form-input-wide jf-required">
  216.           <input type="text" id="input_13" name="q13_phoneNumber13" data-type="input-textbox" class="form-textbox validate[required]" size="20" value="" placeholder="Phone" data-component="textbox" required="" />
  217.         </div>
  218.       </li>
  219.       <li class="form-line" data-type="control_textbox" id="id_15">
  220.         <label class="form-label form-label-top form-label-auto" id="label_15" for="input_15"> Additional Comments </label>
  221.         <div id="cid_15" class="form-input-wide">
  222.           <input type="text" id="input_15" name="q15_additionalComments" data-type="input-textbox" class="form-textbox" size="20" value="" placeholder="Additional Comments" data-component="textbox" />
  223.         </div>
  224.       </li>
  225.       <li class="form-line" data-type="control_widget" id="id_16">
  226.         <div id="cid_16" class="">
  227.           <div style="width:100%;text-align:Left" data-component="widget-directEmbed">
  228.             <div class="direct-embed-widgets " data-type="direct-embed" style="width:50px;height:50px">
  229.               <div class="google_analytics_widget">
  230.                 <script>
  231.                 var analyticsFormId = '{analyticsFormId}';
  232. var analyticsAutoLink = 'www.menonthemove.com\nsubmit.jotform.us';
  233. (function(i, s, o, g, r, a, m)
  234. {
  235.   i['GoogleAnalyticsObject'] = r;
  236.   i[r] = i[r] ||
  237.   function()
  238.   {
  239.     (i[r].q = i[r].q || []).push(arguments)
  240.   }, i[r].l = 1 * new Date();
  241.   a = s.createElement(o), m = s.getElementsByTagName(o)[0];
  242.   a.async = 1;
  243.   a.src = g;
  244.   m.parentNode.insertBefore(a, m)
  245. })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  246.  
  247. ga('create', 'UA-65358234-4', 'auto', {
  248.   'allowLinker': true
  249. });
  250. ga('send', 'pageview');
  251. if (window.analyticsAutoLink && analyticsAutoLink != '<empty>')
  252. {
  253.   analyticsAutoLink = analyticsAutoLink.replace(/ /g, '').split(/[,\n]/g);
  254.   ga('require', 'linker');
  255.   ga('linker:autoLink', analyticsAutoLink);
  256. }
  257.                 </script>
  258.                 <script src="//widgets.jotform.io/googleanalytics/scripts.js" type="text/javascript"></script>
  259.               </div>
  260.             </div>
  261.           </div>
  262.         </div>
  263.       </li>
  264.       <li class="form-line" data-type="control_button" id="id_2">
  265.         <div id="cid_2" class="form-input-wide">
  266.           <div style="margin-left:156px" class="form-buttons-wrapper">
  267.             <button id="input_2" type="submit" class="form-submit-button" data-component="button">
  268.               Submit
  269.             </button>
  270.           </div>
  271.         </div>
  272.       </li>
  273.       <li style="display:none">
  274.         Should be Empty:
  275.         <input type="text" name="website" value="" />
  276.       </li>
  277.     </ul>
  278.   </div>
  279.   <script>
  280.   JotForm.showJotFormPowered = "old_footer";
  281.   </script>
  282.   <input type="hidden" id="simple_spc" name="simple_spc" value="90655646535162" />
  283.   <script type="text/javascript">
  284.   document.getElementById("si" + "mple" + "_spc").value = "90655646535162-90655646535162";
  285.   </script>
  286.   <script src="https://cdn.jotfor.ms/js/widgetResizer.js?REV=3.3.10918" type="text/javascript"></script>
  287. </form>
  288. <script type="text/javascript">JotForm.ownerView=true;</script>
  289.  
  290. <!-- Custom Code written by Mission Disrupt -->
  291. <!-- Feel free to edit style and script tags -->
  292.  
  293. <style>
  294. .jotform-form {
  295.   padding: 0 !important;
  296.   transition: opacity .33s ease;
  297. }
  298. .jotform-form.ready-to-show {
  299.   opacity: 1 !important;
  300. }
  301. h2.form-header {
  302.     color: white !important;
  303.     text-transform: uppercase;
  304. }
  305. h2.form-header span {
  306.   color: #f1c904 !important;
  307.   font-style: italic;
  308. }
  309. .form-header-group {
  310.   margin-left: 10px;
  311.   margin-right: 10px;
  312.   margin-top: 0;
  313.   padding-top: 4px;
  314. }
  315. .form-all {
  316.   width: auto;
  317. }
  318. .form-section {
  319.   display: flex;
  320.   flex-wrap: wrap;
  321.   align-items: flex-start;
  322. }
  323. .form-input-wide {
  324.   width: 100% !important;
  325. }
  326. #cid_5 {
  327.   position: relative;
  328.   height: 39px;
  329. }
  330. #cid_11:before,
  331. #cid_12:before,
  332. #cid_5 .form-sub-label-container:before,
  333. .select-wrap:before,
  334. #cid_8:before,
  335. #cid_9:before,
  336. #cid_13:before,
  337. #cid_14:before,
  338. #cid_15:before {
  339.     content: '\f3c5';
  340.     display: inline-block;
  341.     font-family: 'Font Awesome 5 Free';
  342.     font-weight: 900;
  343.     position: absolute;
  344.     font-size: 15px;
  345.     top: 18px;
  346.     left: 25px;
  347.     /*transform: translateY(-50%);*/
  348. }
  349. #cid_5 .form-sub-label-container:before {
  350.   content: '\f073';
  351.   left: 12px;
  352.   top: 6px;
  353. }
  354. .select-wrap:before {
  355.   content: '\f337';
  356.   left: 12px;
  357.   top: 6px;
  358. }
  359. #cid_8:before,
  360. #cid_14:before {
  361.   content: '\f007';
  362. }
  363. #cid_9:before {
  364.   content: '\f0e0';
  365. }
  366. #cid_13:before {
  367.   content: '\f095';
  368. }
  369. #cid_15:before {
  370.   content: '\f086';
  371. }
  372. #cid_5 #input_5_pick {
  373.     position: absolute;
  374.     top: 50%;
  375.     left: 5px;
  376.     transform: translateY(-50%);
  377.     opacity: 0;
  378. }
  379. #cid_5 #sublabel_litemode,
  380. label[for="input_5_pick"] {
  381.   display: none;
  382. }
  383. .form-section > li {
  384.   width: 100%;
  385.   max-width: 25%;
  386. }
  387. .form-section > li#id_15 {
  388.   max-width: 75%;
  389. }
  390. @media (max-width: 970px) {
  391.   .form-section > li,
  392.   .form-section > li#id_15 {
  393.     max-width: 50%;
  394.   }
  395. }
  396. @media (max-width: 550px) {
  397.   .form-section > li,
  398.   .form-section > li#id_15 {
  399.     max-width: 100%;
  400.   }
  401. }
  402. .form-section > li[data-type="control_head"] {
  403.   max-width: none;
  404. }
  405. .form-section > li .form-label-top {
  406.   display: none;
  407. }
  408. .form-all {
  409.   background: transparent;
  410. }
  411. .form-textbox, .form-textarea,
  412. .form-radio-other-input,
  413. .form-checkbox-other-input,
  414. .form-captcha input {
  415.   border: 2px solid black;
  416.   padding: 8px 16px;
  417.   padding-left: 30px;
  418.   border-radius: 55px;
  419.   width: 100%;
  420.   box-sizing: border-box;
  421. }
  422. #input_10_phone {
  423.   padding-left: 16px;
  424. }
  425. .form-textbox, .form-textarea::-webkit-input-placeholder,
  426. .form-radio-other-input::-webkit-input-placeholder,
  427. .form-checkbox-other-input::-webkit-input-placeholder,
  428. .form-captcha input::-webkit-input-placeholder {
  429.   text-align: center;
  430.   font-weight: bold;
  431. }
  432. .form-textbox, .form-textarea::-moz-placeholder,
  433. .form-radio-other-input::-moz-placeholder,
  434. .form-checkbox-other-input::-moz-placeholder,
  435. .form-captcha input::-moz-placeholder {
  436.   text-align: center;
  437.   font-weight: bold;
  438. }
  439. .form-textbox, .form-textarea:-ms-input-placeholder,
  440. .form-radio-other-input:-ms-input-placeholder,
  441. .form-checkbox-other-input:-ms-input-placeholder,
  442. .form-captcha input:-ms-input-placeholder {
  443.   text-align: center;
  444.   font-weight: bold;
  445. }
  446. .form-textbox, .form-textarea:-moz-placeholder,
  447. .form-radio-other-input:-moz-placeholder,
  448. .form-checkbox-other-input:-moz-placeholder,
  449. .form-captcha input:-moz-placeholder {
  450.   text-align: center;
  451.   font-weight: bold;
  452. }
  453. .form-dropdown {
  454.   float: right;
  455.   width: calc(100% - 50px) !important;
  456.   border: none;
  457.   text-align-last:center;
  458.   margin-right: 15px;
  459.   color: #757575;
  460.   font-weight: bold;
  461.   font-size: 1em;
  462.   line-height: 1.071em;
  463. }
  464. .form-dropdown {
  465.     height: 35px;
  466. }
  467. .form-sub-label-container {
  468.   width: 100%;
  469. }
  470. .form-sub-label {
  471.   display: none;
  472. }
  473. .form-line {
  474.     padding: 12px 10px;
  475.     overflow: hidden;
  476. }
  477. .form-buttons-wrapper {
  478.   margin: 0 !important;
  479. }
  480. .form-all .form-submit-button {
  481.   margin: 0;
  482.   width: 100%;
  483.   border-radius: 55px;
  484.   border: 2px solid #f1c904;
  485.   background: #f1c904;
  486.   color: #0943a1;
  487.   text-transform: uppercase;
  488.   text-shadow: none;
  489.   box-shadow: none;
  490.   font-weight: bold !important;
  491.   padding-top: 3px;
  492.   padding-bottom: 3px;
  493. }
  494. .form-submit-button:hover {
  495.   background: #d8b300;
  496.   border-color: #d8b300;
  497. }
  498. .jf-branding {
  499.   display: none !important;
  500. }
  501. .form-line.form-line-active,
  502. .form-line.form-line-error {
  503.   background: transparent;
  504. }
  505. .select-wrap {
  506.   border-radius: 55px;
  507.   border: 1px solid black;
  508.   overflow: hidden;
  509.   position: relative;
  510.   margin-top: 2px;
  511.   background: white;
  512. }
  513. .select-wrap:after {
  514.   content: '';
  515.   display: block;
  516.   position: absolute;
  517.   top: 0;
  518.   left: 0;
  519.   right: 0;
  520.   bottom: 0;
  521.   border-radius: 55px;
  522.   border: 1px solid black;
  523.   pointer-events: none;
  524. }
  525. .select-wrap select {
  526.   background: white;
  527.   border-radius: 55px;
  528.   background: white;
  529. }
  530. .address-error {
  531.   background: #ff3200;
  532.   color: white;
  533.   border-radius: 4px;
  534.   font-size: 12px;
  535.   margin: 3px auto 0;
  536.   padding: 4px;
  537.   font-style: italic;
  538.   width: calc(100% - 36px);
  539. }
  540. </style>
  541.  
  542. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  543. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  544.  
  545. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAenBiOD-fEz5z8xwONEoQbsck5pQMZNAQ&libraries=places"></script>
  546.  
  547. <script>
  548. // It is important that jQuery is in noconflict mode as
  549. // it inteferes with JotForm calendar dropdown
  550. jQuery.noConflict();
  551. jQuery(document).ready(function(){
  552.   initialize();
  553. });
  554.  
  555. function initialize(){
  556.  
  557.   var options = {
  558.     types: ['address'],
  559.     componentRestrictions: {
  560.       country: 'us'
  561.     }
  562.   };
  563.  
  564.   autocomplete_textarea_1 = new google.maps.places.Autocomplete((document.getElementById('input_11')),
  565.     { types: ['geocode'] }
  566.   );
  567.   google.maps.event.addListener(autocomplete_textarea_1, 'place_changed', function() {
  568.     fillInAddress_textarea_1();
  569.   });
  570.   autocomplete_textarea_2 = new google.maps.places.Autocomplete((document.getElementById('input_12')),
  571.     { types: ['geocode'] }
  572.   );
  573.   google.maps.event.addListener(autocomplete_textarea_2, 'place_changed', function() {
  574.     fillInAddress_textarea_2();
  575.   });
  576.  
  577. }
  578.  
  579. function fillInAddress(){
  580.   var place = autocomplete.getPlace();
  581.   console.log( JSON.stringify(place) );
  582.   for (var component in componentForm) {
  583.     document.getElementById(component).value = '';
  584.     document.getElementById(component).disabled = false;
  585.   }
  586.   for (var i = 0; i < place.address_components.length; i++) {
  587.     var addressType = place.address_components[i].types[0];
  588.     if (componentForm[addressType]) {
  589.       var val = place.address_components[i][componentForm[addressType]];
  590.       document.getElementById(addressType).value = val;
  591.     }
  592.   }
  593. }
  594.  
  595. function fillInAddress_textarea_1(){
  596.   var place1 = autocomplete_textarea_1.getPlace();
  597.   jQuery('#autocomplete_textarea').val(place1.formatted_address);
  598.   jQuery('#input_11').val(place1.formatted_address);
  599. }
  600. function fillInAddress_textarea_2(){
  601.   var place2 = autocomplete_textarea_2.getPlace();
  602.   jQuery('#autocomplete_textarea').val(place2.formatted_address);
  603.   jQuery('#input_12').val(place2.formatted_address);
  604. }
  605.  
  606. // Generate a random string
  607. function makeid(length) {
  608.   var text = '';
  609.   var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  610.   for (var i = 0; i < length; i++)
  611.     text += possible.charAt(Math.floor(Math.random() * possible.length));
  612.   return text;
  613. }
  614.  
  615. // Check if address is valid based on the ', USA' at the end
  616. function checkAddressValid(el){
  617.   jQuery('.jotform-form').on('focusout', el,function(){
  618.     setTimeout(function(){
  619.       var address_from = jQuery(el).val();
  620.       if(address_from.includes(', USA')){
  621.         jQuery(el).siblings('.address-error').remove();
  622.       } else {
  623.         jQuery(el).val('');
  624.         showAddressError(el);
  625.       }      
  626.     }, 200);
  627.   });
  628. }
  629. // Apply function to To and From
  630. checkAddressValid('#input_11');
  631. checkAddressValid('#input_12');
  632.  
  633. // Show error if ', USA' is not present in address
  634. function showAddressError(el){
  635.   jQuery(el).siblings('.address-error').remove();
  636.   var uniqueId = makeid(9);
  637.   jQuery(el).after('<p id="' + uniqueId + '" class="address-error">Please select an address from the dropdown menu.</p>');
  638.   setTimeout(function(){
  639.     jQuery('#' + uniqueId).fadeOut('slow', function(){
  640.       jQuery(this).remove();
  641.     });
  642.   }, 5000);
  643. }
  644.  
  645. // The code below inserts placeholder
  646. // text into fields
  647. jQuery.noConflict();
  648. jQuery(document).ready(function(){
  649.   jQuery('.form-dropdown').wrap('<div class="select-wrap"></div>');
  650.   jQuery('#cid_5 .form-textbox').attr('placeholder', 'Date');
  651.   jQuery('#cid_5 .form-textbox').click(function(){
  652.     jQuery('#input_5_pick').trigger('click');
  653.   });
  654.   jQuery('.jotform-form').css('opacity', '1');
  655.   jQuery('.jotform-form').addClass('ready-to-show');
  656. });
  657. </script>
RAW Paste Data
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!
 
Top