Untitled

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>title</title>

    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700&subset=latin,cyrillic);
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
          display: block;
        }

        body {
          line-height: 1;
        }

        ol, ul {
          list-style: none;
        }

        blockquote, q {
          quotes: none;
        }

        blockquote:before, blockquote:after {
          content: "";
          content: none;
        }

        q:before, q:after {
          content: "";
          content: none;
        }

        table {
          border-collapse: collapse;
          border-spacing: 0;
        }

        /*Mixins*/
        .ad-section:after {
          content: "";
          display: table;
          clear: both;
        }

        @font-face {
          font-family: 'futurabookc';
          src: url("../fonts/futurabookc.eot");
          src: url("../fonts/futurabookc.eot?#iefix") format("embedded-opentype"), url("../fonts/futurabookc.woff") format("woff"), url("../fonts/futurabookc.ttf") format("truetype"), url("../fonts/futurabookc.svg#futurabookc") format("svg");
          font-weight: normal;
          font-style: normal;
        }

        body {
          font-family: 'Roboto', sans-serif;
        }

        .media {
          display: table;
          width: 100%;
        }

        .media-middle {
          display: table-cell;
          vertical-align: middle;
        }

        .media-top {
          display: table-cell;
          vertical-align: top;
        }

        .ad-input__wrap {
          background-color: #fff;
          border: 1px solid #a7a7a7;
          margin: 12px 0;
        }

        .ad-input__wrap.error {
          border-color: #AC1616;
        }

        .ad-textarea, .ad-input {
          display: block;
          width: 100%;
          color: #9b9b9b;
          font-size: 14px;
          padding: 5px 12px 5px;
          border: none;
          outline: none;
          box-sizing: border-box;
        }

        .ad-textarea {
          resize: none;
          height: 126px;
        }

        .ad-btn {
          display: inline-block;
          background: none;
          border: none;
          font-size: 22px;
          text-align: center;
          padding: 7px 15px 6px;
          text-decoration: none;
          color: #fff;
          -webkit-transition: .2s linear;
          transition: .2s linear;
          cursor: pointer;
          text-transform: uppercase;
          font-family: 'futurabookc';
        }

        .ad-btn__green {
          background-color: #009e71;
        }

        .ad-btn__green:hover {
          background-color: #00855f;
        }

        .ad-section {
          background-color: #005436;
          color: #fff;
          border-radius: 8px;
          border: 3px solid #e3e3e3;
        }

        .ad-form {
          width: 380px;
          padding: 18px 25px 20px;
          box-sizing: border-box;
          float: left;
          background-color: #006846;
          border-radius: 7px 0 0 7px;
        }

        .ad-form__text {
          font-size: 15px;
          color: #fff;
          font-weight: 300;
          line-height: 1.15;
        }

        .ad-form__send {
          width: 230px;
          margin-top: 14px;
        }

        .ad-code__text {
          font-size: 14px;
          margin-bottom: 6px;
        }

        .ad-code__l {
          width: 120px;
        }

        .ad-code__captcha {
          height: 50px;
        }

        .ad-code__captcha img {
          width: 100%;
          height: 100%;
          display: block;
        }

        .ad-code__input {
          margin: 0;
        }

        .ad-code__reload {
          color: #79d8b9;
          font-size: 12px;
          display: inline-block;
          margin-top: 11px;
        }

        .ad-code__reload:hover {
          text-decoration: none;
        }

        .ad-code__r {
          padding-left: 10px;
        }

        .ad-right {
          text-align: center;
          padding-bottom: 25px;
        }

        .ad-logo {
          display: inline-block;
          text-decoration: none;
          margin: 30px 0;
        }

        .ad-skype {
          font-size: 21px;
          display: inline-block;
          color: #fff;
          text-decoration: none;
          margin: 7px 0;
        }

        .ad-skype:hover {
          text-decoration: underline;
        }

        .ad-skype img {
          vertical-align: middle;
          margin-right: 8px;
        }

        .ad-thanks {
          display: none;
          font-size: 22px;
          text-align: center;
          margin: 40px 20px 0;
          color: #fff;
          line-height: 1.4;
        }
    </style>

</head>
<body>
    <section class="ad-section">
        <form action="http://adbetnet.com/advertise" class="ad-form">
            <p class="ad-form__text">По вопросам размещения рекламы на сайте обращайтесь по указным контактам или заполните форму обратной связи:</p>

            <div class="ad-input__wrap">
                <input type="text" class="ad-input" placeholder="Введите ваше имя*" name="name">
            </div>

            <div class="ad-input__wrap">
                <input type="text" class="ad-input" placeholder="Укажите ваш мейл*" name="email">
            </div>

            <div class="ad-input__wrap error">
                <input type="text" class="ad-input" placeholder="Тема*" name="subject">
            </div>

            <div class="ad-input__wrap">
                <textarea class="ad-textarea" name="textarea"></textarea>
            </div>
            <button class="ad-btn ad-btn__green ad-form__send">Отправить</button>

        </form>

        <div class="ad-right">
            <div class="ad-right__item">
                <a href="https://adbetnet.com/" class="ad-logo"><img src="https://cdn.advertserve.com/images/adbetnet.advertserve.com/servlet/files/38539#feedback/logo.png" alt=""></a>
            </div>
            <div class="ad-right__item">
                <a href="skype:adbetnet?call" class="ad-skype"><img src="https://cdn.advertserve.com/images/adbetnet.advertserve.com/servlet/files/38540#feedback/skype.png" alt=""> adbetnet</a>
            </div>

            <div class="ad-thanks">Ваше сообщение отправлено. <br>Спасибо!</div>
        </div>


    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script>
    var $thanks = $('.ad-thanks');
      $('.ad-form').on('submit', function (e) {
        e.preventDefault();
        var $this = $(this),
            formValues = getValues($this),
            action = $this.attr('action'),
            $inputs = $this.find('.ad-input__wrap');

        $inputs.removeClass('error');

        $.post(action, formValues, function (obj) {
          var parseObj = obj;

          if (!parseObj.result) {
            var errors = parseObj.errors;
            for (var key in errors) {
              $this.find('.ad-input[name=' + key + ']').parent().addClass('error');
            }
          } else {
            $thanks.fadeIn();
            $this.hide();
          }
        }, "json").error(function (jqXHR, textStatus, errorThrown) {
          console.log(textStatus + " | " + errorThrown);
        });

      });

      function getValues(form) {
        return form.serialize();
      };
  </script>
</body>
</html>