Всплывающая контактная форма WordPress

05.04.2013 | WordPress |
Buzz
16253 Просмотров
Устанавливаем плагины Contact Form 7 и Easy FancyBox
В меню Контакты (CF7) добавляем новую форму с обязательными полями Имя* и Телефон*, текстовый блок с удобным временем звонка и комментарии - по желанию.

Создаем страницу, с которой открывается форма, ссылку на форму можно вставить в виджеты, header или footer.

shortcode формы выглядит так:
Код HTML:
[contact-form 1 "Contact form 1"]
В том месте где будет ссылка на форму вставляем следующий код:

Код HTML:
<a href="#contact_form_pop" class="fancybox">Открыть контактную форму</a> <div style="display:none" class="fancybox-hidden"> <div id="contact_form_pop">
        [contact-form 1 "Contact form 1"]
    </div> </div>
Проверяем работу.

Обновлено 12.04.2013 в 13:25 gloomya

    14 Комментарии
    1. Аватар для 008
      Что может быть в такой форме? Примеры использования ?
      008
      • Аватар для gloomya
        На сайте vashiprava.com кнопки на главной - Заказать звонок и Задать вопрос.
        gloomya
        • Аватар для WMmagnat
          Ооо спасибо нужная штучка)))) А я плагины всякие искал)
          WMmagnat
          • Аватар для edison_m8
            Спасибо!))
            edison_m8
            • Аватар для Ernesto
              Цитата Сообщение от gloomya
              На сайте vashiprava.com кнопки на главной - Заказать звонок и Задать вопрос.
              Сам не проверил еще, но если работать будет, как на указанном сайте - еще один плюсик автору.
              Ernesto
              • Аватар для blitz-coder
                Работает отлично, но не совсем так, как мне надо. А возможно ли сделать так, чтобы окошко появлялось только при нажатии на ссылку, а на обычные картинки Fancybox не реагировал бы? Дело в том, что в моей теме встроено собственное слайдшоу, и при клике по картинке происходит наложение его и Fancybox, а мне надо всего лишь окно с формой.
                blitz-coder
                • Аватар для gloomya
                  Цитата Сообщение от blitz-coder
                  Работает отлично, но не совсем так, как мне надо. А возможно ли сделать так, чтобы окошко появлялось только при нажатии на ссылку, а на обычные картинки Fancybox не реагировал бы? Дело в том, что в моей теме встроено собственное слайдшоу, и при клике по картинке происходит наложение его и Fancybox, а мне надо всего лишь окно с формой.
                  Нужно в настройках плагина FancyBox (Параметры-Медиафайлы) убрать галочки у графических форматов.
                  gloomya
                  • Аватар для blitz-coder
                    Цитата Сообщение от gloomya
                    Нужно в настройках плагина FancyBox (Параметры-Медиафайлы) убрать галочки у графических форматов.
                    В том-то и проблема, что если отключить в настройках картинки, то тогда и ссылка перестает работать.
                    blitz-coder
                    • Аватар для Denis Creative
                      Неплохо! На днях испробую. Спасибо)
                      Denis Creative
                      • Аватар для blitz-coder
                        Решил этот вопрос. Если установить плагин "FancyBox for WP" вместо "Easy FancyBox", то встроенное в тему собственное слайдшоу отключается и на картинки и формы срабатывает только FancyBox. В остальном разницы нету, приведенный код тот же самый, зато имеется больше настроек. На WP 3.5 проверял. Если тема простая, не премиум, то оба плагина FancyBox прекрасно выводят форму.
                        blitz-coder
                        • Аватар для Denis Creative
                          Если вставляете форму в шаблон, тогда используйте такой код для отработки шорткода:
                          PHP код:
                          <a href="#contact_form_pop" class="fancybox">заказать звонок</a> 
                          <div style="display:none" class="fancybox-hidden"> 
                              <div id="contact_form_pop">
                                  <?php echo do_shortcode('[contact-form-7 id="420" title="Заказать звонок"]'); ?>
                              </div> 
                          </div>
                          Denis Creative
                          • Аватар для Denis Creative
                            Подскажите, может кто сталкивался, такая проблема - на странице записи форма вставлена в шаблон, первый раз открывается нормально, потом закрываем и второй раз открывается в fancybox'е полностью вся страница, а не форма

                            например, тестовый домен - http://10.sigma.in.ua/lekciya-1/
                            При том что на странице категорий работает нормально http://10.sigma.in.ua/
                            Код вставлен одинаково только одно условие отличается, не могу понять в чем проблема...

                            PHP код:
                                                <?php
                                                
                            if (in_category('6'$cat))
                                                { 
                            ?>
                                                <a href="#contact_form_pop" class="fancybox funcy_button">Записаться на лекции</a> 
                                                <div style="display:none" class="fancybox-hidden"> 
                                                    <div id="contact_form_pop">
                                                        <?php echo do_shortcode('[contact-form-7 id="38" title="Записаться на лекции"]'); ?>
                                                    </div> 
                                                </div>
                                                <?php ?>
                            Denis Creative
                            • Аватар для codeby
                              Не работает штука эта.
                              codeby
                              • Аватар для gloomya
                                Цитата Сообщение от codeby
                                Не работает штука эта.
                                Смотрите обновленную версию здесь - Всплывающая контактная форма на WordPress ver. 2.0 - lightbox
                                gloomya