59 комментариев

  1. Виктория
    14 ноября 2015

    Форма очень понравилась, еще бы обработчик добавили на php все таки не все такие профи )))

    Ответить

    • driver
      14 ноября 2015

      Виктория, спасибо за отзыв.

      Судя по количеству запросов, видимо всё же придётся, разбодяжить статью и добавить к исходникам стандартный php-обработчик форм. Хотя, поисковая выдача, просто ломится от избытка инфы по этому поводу.

      Ответить

      • Виктория
        15 ноября 2015

        Ломится конечно, но всем же хочется чтобы рааааз и готово 😉 тем более лично мне ваша форма больше всех понравилась )))

        Ответить

      • Владислав
        29 марта 2016

        Полностью согласен с Викторией. Добавьте в исходники php обработчик с возможностью проверки на заполение полей и вашу форму добавлю в избранное, чтобы использовать ее на всех сайтах 🙂

        Ответить

  2. Алекс
    11 декабря 2015

    Воспользовался данным примером и решил свою задачу. Но хочу посоветоваться, как быть, если у меня две формы и цвет затемнения у каждой формы разного цвета. Пробовал через айдишник другой, но видимо важно чтобы именно fade был. Буду признателен за помощь!

    Ответить

    • driver
      11 декабря 2015

      Используйте id с отличным от первой формы значением, ну например, для фона id="fade-2", а для модальной формы id="onvelope-2". Класс для фона обзовите в соответствии с цветом, например, если с зеленым оттенком, то что-то вроде class="green-overlay", и конечно не забудьте прописать стили для этого класса в css. Просто скопируйте правила из .black-overlay и измените значение свойства background-color на своё.

      В ссылках вызова и закрытия, в событии onclick, идентификаторы в соответствии с теми, что указали для формы и фона затемнения.

      Ответить

  3. Алекс
    2 февраля 2016

    Да, если был обработчик, было бы совсем классно! С обработкой полей на валидность и формированием в том же окне сообщения о доставке;) Ждать?

    А вопрос насущный, по тексту — как сделать, чтобы форма закрывалась при щелчке по тени в любом месте?

    Ответить

    • driver
      2 февраля 2016

      Всё очень просто, к <div id="fade" class="black-overlay"> добавьте событие onclick, должно получиться следующее:

      <div id="fade" class="black-overlay" onclick="document.getElementById('envelope').style.display='none';document.getElementById('fade').style.display='none'"></div>

      Ответить

  4. Алекс
    2 февраля 2016

    ЗЫ. С полями имя и мейл вообще круто — нужно с первого раза вводить правильно. Если к ним возвращаться, то когда они попадают в фокус все затирается. Это правильно, неча скакать туда-сюда.

    Ответить

  5. Виктор
    2 апреля 2016

    Вы не могли бы приложить сюда простой обработкчик? Что бы можно было просто добавить туда адрес почты и все. Я просто не такой спец. попробовал скачать какой то, подключить и ничего не вышло((((

    Ответить

  6. Михаил
    14 сентября 2016

    Где взять для этой формы обработчик!! Если можно с инструкцией как этот обработчик связать с этой супер формой!

    Ответить

  7. mr.prometei
    26 сентября 2016

    Спасибо, за полный материал.

    Скачал. Немного изменил, добавил поля , и все работает.

    Ответить

  8. Алексаандр
    28 января 2017

    Добрый

    Плюс

    1. Оформлен красиво

    Минус

    1. Он появляется сразу а не анимация

    2. При уменьшении экрана начинает показывает свои касяки, потому как там 100% браузерного экрана, если страница будет больше то она не будет покрывать весь размер. fixed лучше использовать такой вариант

    Ответить

    • driver
      28 января 2017

      Здравствуйте, Александр.

      1. Думаю, прикрутить любую анимацию не проблема(урок не о том)

      2. Минус при просмотре на разных экранах больше не в позиционировании, а в использовании изображения в качестве фона формы (сейчас можно обойтись чистым CSS)

      Ответить

  9. Александр
    18 июня 2017

    Здравствуйте. Сделал форму, но не могу привязать ее к кнопке. Вставляю url, но кнопка отправляет на главную.

    Вставил в css такой вот код:

    contact-us a {

    border:1px solid #ccc; /*цвет границы*/

    background:#2674C8; /*цвет фона*/

    padding:10px 20px; /*внитринние отступы*/

    display:block;

    text-align:center; /*выравнивание текста по центру*/

    color:#fff; /*цвет текста*/

    text-decoration:none; /*убрать подчёркивание у ссылки*/

    width:200px; /*ширина кнопки*/

    margin:auto; /*выравнивание кнопки по центру*/

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    }

    contact-us a:hover {

    -moz-box-shadow: 0 0 6px #000;

    -webkit-box-shadow: 0 0 6px #000;

    box-shadow:0 0 6px #000;

    -webkit-transition: all 0.5s ease;

    -moz-transition: all 0.5s ease;

    transition: all 0.5s ease;

    }

    но он не стилизует форму.

    Возможно в коде ошибки. Делаю сайт на вордпрессе.

    Спасибо.

    Ответить

    • driver
      18 июня 2017

      Здравствуйте Александр.

      но он не стилизует форму

      Приведённый вами код и не должен стилизовать форму, т.к просто не имеет к ней никакого отношения.

      Это, как я понимаю, фарш css вашей кнопки(ссылки) для вызова мод.окна, который ни о чём мне не говорит, важнее, что у вас прописано в атрибуте href="". Должна присутствовать связь с контейнером формы, id или как в моём примере, прописано событие onclick

      Ответить

      • Александр
        18 июня 2017

        Спасибо за ответ.

        Да, извините, я неправильно выразился — это фарш ссылки для вызова формы.

        <a href="#contact_form_pop_up" rel="nofollow">БЕЗКОШТОВНА КОНСУЛЬТАЦІЯ</a>

        Текст

        [contact-form-7 id="99" title="Без названия"]

        этот код у меня показывает ссылку на всплывающую форму

        по ссылке она работает, я прикрутил капчу

        но хотелось бы вместо ссылки сделать кнопку

        Ответить

      • driver
        18 июня 2017

        Для начала немного подкорректируем div-контейнер где расположена кнопка, добавим внешние отступы сверху и снизу, и если вам нужна, расположим вложенные элементы (в вашем случае это кнопа) по центру:

        .contact-us { margin: 1rem auto; text-align: center; }

        Затем оформите ссылку в виде кнопки примерно так:

        .contact-us a { border: 0; background: #086fb9; border-radius: 2px; display: inline-block; padding: .85rem 2.13rem; font-size: .85rem; font-family: Montserrat, "Helvetica Neue", sans-serif; letter-spacing: 0.046875em; line-height: 1.3125; color: #fff; text-decoration: none; margin: 0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; white-space: normal; word-wrap: break-word; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); }.contact-us a:hover { -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15); box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15); }

        Вы допустили ошибку при вставке своего кода, пропустив точку в названии селектора contact-us a, а нуна так: .contact-us a

        Просто правильно скопируйте мой вариант и добавьте в свою css и посмотрите что получится.

        Ответить

  10. Александр
    18 июня 2017

    Большое спасибо. Скопировал, но пока ничего не изменилось.

    Копировал тщательно, все как у Вас.

    Может, я просто, извините, тупой?

    Решил проблему другим путем. Привязал ориджин-кнопку к ссылке. Ссылку поместил в другую часть сайта, а кнопку — на ее место. Получилось нормально.

    Ответить

    • driver
      18 июня 2017

      Ну и отлично, главное проблема решена так или иначе

      Ответить

  11. Загрузить еще комментарии…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Наверх
мобильн. компьютерная