Виджет форма обратной связи wordpress. Семь хороших способов как поставить на WordPress форму обратной связи
Приветствую вас дорогой читатель, в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress. Часто при разработке собственного сайта или блога необходимо установить возможность оперативной связи с посетителями интернет-ресурса. В этом случае как раз и пригодится всплывающая форма обратной связи для wordpress, которая поможет наладить быстрый контакт с пользователями.
Для чего нужна всплывающая форма обратной связи для wordpress
Причины использования
Рассмотрим, для чего нужна такая форма
- Экономия свободного места на сайте. Контактная форма может быть размещена где угодно: в подвале или шапке, в основном контенте страницы, в виде плавающей кнопки и т.д.
- Эффективное появление. Анимация возникновения нового окна выглядит интересно и необычно
- Доступность. Оставить записи в этой форме можно с любого места сайта, пользователям не нужно возвращаться на главную страницу.
Дополнительный бонус: форму легко видоизменить и настроить под нужды вашего сайта. Всплывающая форма обратной связи для wordpress может быть представлена в виде открывающегося окна для заказа звонка, услуги или товара, оформления подписки. При желании можно добавить визуальные эффекты, различные изображения и пр.
Плагины для установки всплывающей формы
Рассмотрим инструменты, необходимые для разработки всплывающих окон в wordpress – специального приложения для разработки и создания сайтов.
Contact Form 7
Данный плагин используется непосредственно для конструирования формы. Для его установки выполните следующие действия:
Easy FancyBox
Данный плагин пригоден для разработки эффекта всплывающего окна. Последовательность установки Easy FancyBox аналогична установке предыдущего плагина.
Настройка плагинов
Настроить параметры дополнения Easy FancyBox можно через медиафайлы. Воспользуйтесь опциями меню «Настройки» -> «Медиафайлы».
В открывшемся блоке чуть ниже стандартных настроек будут расположены параметры самого плагина. Здесь обычно стоит галочка напротив пункта «Images», которая указывает на активирование выплывающего окна при клике по изображению. Желательно ее снять, так как при наличии других дополнительных инструментов создания всплывающей анимации будет происходить двойное открытие изображений.
Но это еще не все. Поставьте галочку напротив пункта «Inline content»
Все желающие могут дополнительно покопаться в настройках плагина и выставить их на свое усмотрение.
Совет: если вы хотите, чтобы форма всегда была открыта, тогда снимите в настройках Easy FancyBox галочку напротив опции «Close FancyBox when overlay is clicked», выполняющей функцию закрытия окна при клике мышкой за его пределами.
Пошаговая инструкция
Ну вот, со «скучной» предварительной подготовкой покончено, теперь перейдем к самой «вкусной» части – как, собственно, разрабатывается всплывающая форма обратной связи wordpress.
Обработка окна формы
С чего начнем? Конечно же, с предварительной настройки самой формы. Выберите в правом меню пункт «Contact Form 7», а потом опцию «Добавить новую».
Придумайте новое имя формы, например, «Эксперимент», вбейте его в поле ввода открывшегося окна, где расположен текст «Заголовок», и нажмите на кнопку «Сохранить». Можно изменять и другие параметры, в том числе и сам шаблон формы, но мы его трогать не будем. Сейчас наша главная цель – просто научиться созданию всплывающих форм.
Взгляните на полученный результат. Как можно видеть, плагином был сгенерирован специальный шорткод, используемый для последующего вывода формы. Необходимо скопировать его.
Выведение формы
Теперь займемся программированием. Новый программный код можно вставить в любом месте сайта, например, в «Контакты», и других. В нашем примере новая форма будет выведена в виджете. Выберите в меню последовательно «Внешний вид», потом кликните на «Виджеты», затем в открывшемся окне нажмите на опцию «Текст».
Теперь щелкните по кнопке «Добавить виджет»
Вставьте в поле ввода «Содержимое» следующий программный код:
Вот так будет выглядеть получившийся результат:
Учитывайте, что вместо указанного в примере шорткода вам надо будет указать тот, который образовался у вас в результате создания новой формы.
Дополнительно форму можно отредактировать: добавить или убрать поля ввода, ввести начальный и/или конечный текст до и после формы, преобразовать текст в заголовок или вывести его отдельным блоком, использовать различные стили, плэйсхолдеры и т.д. Были бы время и желание!
Стилизация ссылки
Рассмотрим также два способа преобразования ссылки в кнопку для улучшения ее визуального отображения.
1 способ – использование дополнительных стилей темы.
Приведенный ниже программный код можно вставить следующим образом:
Сам программный код выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } |
/***Отображение ссылки в кнопочном виде****/ .contact-us a{ margin:auto; /*выстраивание блока в центре*/ display:block; width:199px; /*размер кнопки*/ padding:11px 22px; /*внутренние отступы*/ border:1px solid black; /*оттенок рамки*/ background:#3399ff; /*фоновый узор*/ text-decoration:none; /*преобразование надписи в неподчеркнутую*/ text-align:center; /*центрирование надписи*/ color:#ffffff; /*оттенок надписи*/ -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } /**Изменение цвета ссылки при подведении курсора**/ .contact-us a:hover{ -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111; -moz-transition: all 0.6s ease; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; }
Получилась такая кнопка:
В коде уже написано, какой его параметр за что отвечает. Теперь каждый может отредактировать код на свое усмотрение, экспериментируя с различными стилями и цветами и создавая наиболее подходящую ссылку для всплывающего окна.
2 способ – использование изображения в виде кнопки. Сначала загрузите на сайт необходимую картинку (любую по вкусу, не обязательно в виде кнопки, — это не имеет особого значения). Для этого щелкните на «Медиафайлы» -> «Добавить новый» и выберите нужный рисунок. Справа от изображения появится постоянная ссылка на файл (в данном примере http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), скопируйте ее и добавьте в код (кавычки не удалять):
Полученный код добавьте в основной код вывода формы вместо текста «Написать письмо».
1 |
На моем сайте отобразилась кнопка, приведенная на скриншоте ниже:
А вот так будет выглядеть кнопка, если оставить дополнительный стиль, описанный в первом способе:
Добавление в меню
Чтобы всплывающая форма обратной связи для wordpress могла вызываться прямиком из меню, необходимо воспользоваться следующим кодом
1 2 3 | Написать письмо |
Сначала нужно разобраться, куда именно необходимо вставить этот код. Зайдите в «Редактор» через «Внешний вид» и среди шаблонов выберите «Заголовок (header.php)»
Теперь отыщите то место, где расположен код меню. Найдите следующую информацию:
1 2 |
Здесь самое важное указать правильный путь к тому файлу php, который вы создали (в нашем случае, это contact.php). В данном коде по своему желанию и вкусу можете менять названия полей, и их ширину.
Если вы захотите придать форме без плагина особый вид, можете использовать разные стили оформления с помощью файла style.css.
Красивая форма обратной связи wordpress
Большой популярностью на моем блоге пользуются статьи, в которых я рассказываю, как сделать оформление элементов блога с помощью css-кода:
Сейчас я покажу, как оформить красиво форму обратной связи для WordPress.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .wpcf7-form input[ type= "submit" ] { background : #63c6ae ; /* цвет фона кнопки Отправить*/ border : 0 ; width : 120px ; /* ширина кнопки Отправить*/ color : #fff ; /* цвет текста кнопки Отправить*/ height : 30px ; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display : block ; margin-top : 5px ; /* верхний отступ от поля Текст сообщения*/ background : #fff ; border : 1px solid #63c6ae ; /* граница поля Текст сообщения*/ width : 400px ; color : #222 ; padding : 10px 10px ; } .wpcf7-form input[ type= "email" ] , .wpcf7-form input[ type= "text" ] { background : #fff ; border : 1px solid #63c6ae ; /* граница текстовых полей*/ width : 400px ; color : #222 ; height : 30px ; /* высота текстовых полей*/ padding : 0 10px ; /* внутренние границы текстовых полей*/ } |
Wpcf7-form input { background: #63c6ae; /* цвет фона кнопки Отправить*/ border: 0; width: 120px; /* ширина кнопки Отправить*/ color: #fff; /* цвет текста кнопки Отправить*/ height:30px; /* высота кнопки Отправить*/ } .wpcf7-form textarea { display: block; margin-top: 5px; /* верхний отступ от поля Текст сообщения*/ background: #fff; border: 1px solid #63c6ae; /* граница поля Текст сообщения*/ width: 400px; color: #222; padding: 10px 10px; } .wpcf7-form input, .wpcf7-form input { background:#fff ; border: 1px solid #63c6ae; /* граница текстовых полей*/ width: 400px; color: #222; height:30px; /* высота текстовых полей*/ padding: 0 10px; /* внутренние границы текстовых полей*/ }
В результате у меня получилось вот так:
Рассмотрим вариант с использованием плагина Contact Form 7. После того, как плагин установлен и настроен, вам потребуется открыть файл style.css вашей активной темы и вставить в конце следующий код:
Как видите, в создании обратной связи на WordPress как с плагином, так и без него, нет ничего сложного.
Если вам нужен более расширенный функционал, и вы не хотите вникать в хитрости кода, используйте для WordPress плагин формы обратной связи. Выберите тот вариант, который вам наиболее подходит для контакта с вашими пользователями.
1 голосДоброго времени суток, читатели моего блога. С вами Андрей Зенков. WordPress форма обратной связи - важная часть любого сайта, о ней мы сегодня и поговорим. Рассмотрим конкретные примеры на самой популярной CMS - WordPress. Устраивайтесь поудобнее, налейте чай, ведь вас ждёт длинная, увлекательная и познавательная статья.
Свой сегодняшний рассказ хочу начать со слов Ричарда Баха: «Для нас не должно существовать никаких пределов». Призываю всех своих читателей никогда не останавливаться на достигнутом. Каждый раз, когда вы наблюдаете стагнацию в своём развитии, приложите максимум усилий, чтобы пробить очередной потолок. За его пределами вас ждёт ещё больший успех.
Что такое форма обратной связи и для чего нужна?
Форма обратной связи - модуль на сайте, который необходим для оперативного контакта между владельцем ресурса и посетителями. Для чего она нужна? Я выделил для вас три основные причины:
- Защита от спам-ботов. Парсеры адресов электронных почт добавят ваc в свою базу, если вы просто разместите его на сайте. Это приведёт к постоянному получению не несущих никакой ценности сообщений. При создании формы рекомендую скрывать свой адрес;
- Получение всей информации. Чтобы пользователь с первого раза донёс до вас всё, что хочет, добавьте в форму необходимые поля (номер телефона, комментарий, тема сообщения и т.д.);
- Экономия времени посетителей. Больше им не придётся искать адрес вашей , заходить в почтовый клиент и набирать сообщение. Это можно сделать прямо с вашего ресурса.
Преимуществ больше, я выделил для вас основные. Рекомендую устанавливать плагин с капчей. Такая мера защитит от спам-ботов, вы будете получать письма только от заинтересованных, реальных гостей своего проекта.
Если вы хотите научиться защищаться не только от спам-ботов, но и от других, более серьёзных угроз, рекомендую пройти курс «Тотальная защита WordPress », который подготовил опытный вебмастер.
Готовые решения для вашего проекта
Если вы не знаете, как самостоятельно разработать удобную форму обратной связи для сайта, я подготовил несколько интересных плагинов, которые легко устанавливаются собственными силами. Вам даже не понадобятся особые знания в .
Contact Form 7
После указания всех настроек, на руки вы получаете код готовой контактной формы с отправкой писем при нажатии на кнопку. Его можно разместить в любом месте на своём сайте.
Какой можно сделать вывод?
Форма обратной связи с отправкой на почту - отличное решение для общения со своими подписчиками. Не упускайте возможность, если люди хотят общаться с вами. Кто-то научит вас чему-то новому, кто-то даст полезный совет. Сегодня я рассказал вам о тех вариантах, которыми пользуюсь сам при создании проектов. Выберите для себя лучшее и начинайте действовать! А на этом статья подходит к концу.
Следите за обновлениями в блоге, чтобы регулярно узнавать что-то новое и интересное.