Pardot Form - loading - Layout template html

                  <!DOCTYPE html>
<html><head><meta charset="utf-8"><meta content="" name="description"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
<link rel="shortcut icon" href="https://www.pardot.com/favicon.ico">
<!--[if lt IE 9]>
  <script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<link rel="stylesheet" href="https://www2.pardot.com/landingpage-ie8.css">

<![endif]--><!--[if gte IE 9]><!-->

<link rel="stylesheet" href="https://idio.ai/wp-content/uploads/fonts/bootstrap.min_.css">

<!–– form submission loading animation stuff ––>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(http://www.marcorpsa.com/ee/images/loading2.gif) no-repeat center center;
  z-index: 10000;
}
</style>

<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var spinner = $('#loader');
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    spinner.show();
    $.ajax({
      url: 't2228.php',
      data: $(this).serialize(),
      method: 'post',
      dataType: 'JSON'
    }).done(function(resp) {
      spinner.hide();
      alert(resp.status);
    });
  });
});
</script>



<!–– end ––>


    <style type="text/css">


        .form p {te
            font-family: source_sans_probold, Arial, Helvetica, Tahoma, sans-serif;
        }

        .col-sm-3 {
          min-height: 50px;
            background-color: #ffffff;
            background-repeat: no-repeat;
            background-size: 35px 35px;
            background-position: center center;
            margin-right: 7px;
            margin-left: -7px;
        }

        .col-sm-6 {
              padding-left: 0px !important;
              padding-right: 0px !important;
        }

        .col-sm-3.first_name {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/person-icon.png");
           
        }

        

        .col-sm-3.job_title {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/job-title-icon.png");
           
        }

        .col-sm-3.company {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/company-icon.png");
           
        }


        .col-sm-3.email {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/email-icon.png");
            
        }

        .col-sm-3.phone {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/phone-icon.png");
           
        }
        
        .col-sm-3.Date_for_Demo {
            background-image: url("https://idio.ai/wp-content/uploads/2018/03/calendar-icon.png");
            margin-top: 20px;
            
        }
        _::-webkit-full-page-media, _:future, :root .col-sm-3.Date_for_Demo {
                margin-top: 5px;
        }
        .Date_for_Demo .col-sm-9 {
            background-color: #f5f5f5;
            margin-top: 5px;
        }
        .pd-date {
            background-color: #f5f5f5 !important;
        }
        .pd-date input {
            color: #7c7c7b;
            width: 215px;
        }

        .industry {
            display: none;
        }
        
        .employees {
            display: none;
        }
         
        .MA_Tool{
            display: none;
        }
         

        .col-sm-9 {
            background-color: #f5f5f5;
            min-height: 50px;
            border-radius: 6px;
        }

        .col-sm-9 .form-field {
            background-color: #f5f5f5;
            padding-top: 13px;
            border-radius: 6px;
        }

        .text {
            border: none;
            background-color: #f5f5f5;
            width: 100% !important;
            color: #7c7c7b;
            font-size: 14px;
        }

               
        form.form p span.description {
    margin-left: 0px !important;
    padding-top: 5px;
    color: #aaaaaa;
    font-family: "Open Sans";
    font-size: 10px;
    padding-left: 2px;
}

      form.form p.submit { margin: 1em 0em .2em 0px !important;}

form.form p.submit input {
display: inline-block;
font-size: 12px;
line-height: 18px;
height: auto;
padding: 14px 16px;
margin: 0 10px 20px 0 !important;
font-weight: bold;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;
border: 0;
position: relative;
overflow: hidden;
outline: none;
text-shadow: none;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
vertical-align: middle;
max-width: 99%;
background-color: #42a8f0 !important;
color: #fff!important;
width: 100% !important;
    min-width: 150px !important;
margin-right: 0px;
height: 50px;
font-family: source_sans_probold, Arial, Helvetica, Tahoma, sans-serif;
font-size: 14px;
font-weight: normal;
margin-right: 0px !important;
}

p.submit input:hover{
    background: #111111 !important;
    border-color: #fff !important;
    color: #ffffff !important;
}
    
form.form p.submit input:hover { 
color:#ffffff !important;
background: #111111 !important;
}

p.submit {margin-bottom: 15px;}

#pardot-form .submit input {
    padding: 5px 15px;
    
    font-family: 'ProximaNovaSemiBold', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    font-weight: 400;
font-style: normal;
    color: #fff;
    border-radius: 6px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 5px;
    white-space: normal;
    max-width:99%;
    line-height:130%;
    margin-top: 0px;
}

#pardot-form .submit input:active {
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

        .row{
            margin-right: 0px !important;
            margin-left: 3px;
            padding-left: 7px;
            padding-bottom: 7px;
            padding-right: 5px;
        }
        form.form select {
         font-weight: normal;
         width: 100%;
        }
        .row.phone{
            padding-bottom: 20px;
        }
        input.date{
            border: none;
        }

    </style>
    <link rel="stylesheet" type="text/css" href="https://go.pardot.com/css/form.css?ver=20121030" />
<script type="text/javascript" src="https://go.pardot.com/js/piUtils.js?ver=20130530"></script>
    <script type="text/javascript">
        piAId = '21742';
        piCId = '9326';
        if (!window['pi']) {
            window['pi'] = {};
        }
        pi = window['pi'];
        if (!pi['tracker']) {
            pi['tracker'] = {};
        }
        pi.tracker.pi_form = true;
        (function() {
            function async_load() {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = ('https:' == document.location.protocol ? 'https://pi' : 'http://cdn') + '.pardot.com/pd.js';
                var c = document.getElementsByTagName('script')[0];
                c.parentNode.insertBefore(s, c);
            }
            if (window.attachEvent) {
                window.attachEvent('onload', async_load);
            } else {
                window.addEventListener('load', async_load, false);
            }
        })();
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.first_name input').attr('placeholder', 'First name *');
            $('.last_name input').attr('placeholder', 'Last name *');
            $('.job_title input').attr('placeholder', 'Job title *');
            $('.company input').attr('placeholder', 'Company *');
            $('.email input').attr('placeholder', 'Work email *');
            $('.phone input').attr('placeholder', 'Phone *');
            $('.phone input').attr('placeholder', 'Phone *');
            $('.row.Date_for_Demo').prepend('<span style="color:#7C7C7B; margin-left: 14px;">What day would suit you best? *</span>')
        });
    </script>
    
   <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N9V8MQB');</script>
<!-- End Google Tag Manager -->
</head>
<body>
%%content%%
</body>

</html>