Контакты

Всплывающая форма обратной связи jquery css. Снимаем ограничение на шорткоды в сайдбаре. Блок «Название формы»

  • 10.04.2019

Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.

Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.

Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.

Примечание! Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться:)

Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.

Кнопка, по нажатию на которую будет открываться модальное окно:

Оставить заявку

Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.

Теперь приведу код формы и блока, на котором будет располагаться форма:

Оставьте ваши контактные данные и наш консультант свяжется с вами Хочу такую форму на свой сайт

Добавив стили, выглядеть это стало так:


Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.

Между тегами head подключаем стили:

А перед закрывающимся тегом body — добавляем скрипты:

Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:

$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); $.ajax({ type: "POST", url: "mail.php", data: formNm.serialize(), success: function (data) { // Вывод текста результата отправки $(formNm).html(data); }, error: function (jqXHR, text, error) { // Вывод текста ошибки отправки $(formNm).html(error); } }); return false; }); });

Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):

Пожалуйста , не забывайте менять адреса электронной почты на свои.

Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!

Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.

Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .

Обновленная версия статьи находится

Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!

Что нам понадобится?! не так уж и много:

  • библиотека jQuery;
  • плагин fancybox;
  • сценарий PHP для отправки сообщения.
Разметка

Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.

Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:

Отправить сообщение

Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:

1
2
3
4
5
6
7
8
9
10
11
12
13


Отправка сообщения


Ваш E-mail



Введите сообщение

Отправить E-mail

Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.

Изначально форма скрыта:

#inline { display : none ; }

Стили формы

Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Txt {
display : inline-block ;
color : #676767 ;
width : 420px ;

margin-bottom : 10px ;

padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txtarea {
display : block ;
resize : none ;
color : #676767 ;
font-family : Arial, Tahoma, sans-serif ;
margin-bottom : 10px ;
width : 500px ;
height : 150px ;
border : 1px dotted #ccc ;
padding : 5px 9px ;
font-size : 1.2em ;
line-height : 1.4em ;
}

Txt : focus ,
.txtarea : focus {
border-style : solid ;
border-color : #bababa ;
color : #444 ;
}

Input.error,
textarea.error {
border-color : #973d3d ;
border-style : solid ;
background : #f0bebe ;
color : #a35959 ;
}

Input.error : focus ,
textarea.error : focus {
border-color : #973d3d ;
color : #a35959 ;
}

Для оформления кнопки «Отправить» будем .:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#send {
color : #dee5f0 ;
display : block ;
cursor : pointer ;
padding : 5px 11px ;
font-size : 1.2em ;
border : solid 1px #224983 ;
border-radius : 5px ;
background : #1e4c99 ;
background : -webkit-gradient(linear, left top , left bottom , from(#2f52b7 ) , to(#0e3a7d ) ) ;
background : -moz-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -webkit-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -o-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : -ms-linear-gradient(top , #2f52b7 , #0e3a7d ) ;
background : linear-gradient(top , #2f52b7 , #0e3a7d ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#2f52b7" , endColorstr= "#0e3a7d" ) ;
}

#send : hover {
background : #183d80 ;
background : -webkit-gradient(linear, left top , left bottom , from(#284f9d ) , to(#0c2b6b ) ) ;
background : -moz-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -webkit-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -o-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : -ms-linear-gradient(top , #284f9d , #0c2b6b ) ;
background : linear-gradient(top , #284f9d , #0c2b6b ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#284f9d" , endColorstr= "#0c2b6b" ) ;
}

#send : active {
color : #8c9dc0 ;
background : -webkit-gradient(linear, left top , left bottom , from(#0e387d ) , to(#2f55b7 ) ) ;
background : -moz-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -webkit-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -o-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : -ms-linear-gradient(top , #0e387d , #2f55b7 ) ;
background : linear-gradient(top , #0e387d , #2f55b7 ) ;
filter : progid: DXImageTransform.Microsoft .gradient(startColorstr= "#0e387d" , endColorstr= "#2f55b7" ) ;
}

Fancybox

Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:

$(document) .ready (function () {
$(".modalbox" ) .fancybox () ;
$("#contact" ) .submit (function () { return false ; } ) ;

Также отменяем стандартное действие формы submit (отправить), это позволит нам использовать свой собственный ajax запрос. При вызове метода я не использовал не одного параметра, оставил все значения по умолчанию. Однако о них стоит упомянуть:

Название Описание
padding Отступы до содержимого в окне (По-умолчанию 15px)
margin Расстояние от краев браузера до окна (По-умолчанию 20px)
width Ширина по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 800px)
height Высота по умолчанию для «IFRAME» и «SWF» содержимого. Кроме того, для «inline», «AJAX» и «HTML» объектов если «AutoSize» устанавливается на «false». Может быть числовым или «Auto». (По-умолчанию 600px)
minWidth Минимальная ширина окна (По-умолчанию 100px)
minHeight Минимальная высота окна (По-умолчанию 100px)
maxWidth Максимальная ширина окна (По-умолчанию 9999px)
maxHeight Максимальная высота окна (По-умолчанию 9999px)
autoSize Если «true», то autoHeight и autoWidth также «true» (По-умолчанию true)
autoHeight Если установлен «true», для «inline», «AJAX» и «HTML» содержимого высота определяется автоматически (По-умолчанию false)
autoWidth Если установлен «true», для «inline», «AJAX» и «HTML» содержимого ширина определяется автоматически (По-умолчанию false)
autoResize Если установлено «true», то размер содержимого будет изменяться вместе с изменением окна
autoCenter Если установлено «true», то содержимое будет по центру
fitToView Если установлено «true», то окно будет подстроено под размер браузера перед открытием (По-умолчанию true)
aspectRatio Если установлено «true», то изменение размера ограничено соотношением сторон (По-умолчанию false)
topRatio Вертикальное позиционирование. Если установлено 0.5 то расстояние до верха и низа окна браузера будет одинаково. Если 0 то модальное окно будет сверху (По-умолчанию 0.5)
leftRatio Аналогичный параметр только для горизонтального позиционирования (По-умолчанию 0.5)
scrolling Показывать полосы прокрутки. Может быть установлено ‘auto’, ‘yes’, ‘no’ или ‘visible’ (По-умолчанию auto)
wrapCSS Настраиваемый класс CSS
arrows Если установлено «true», то будут отображаться навигационные кнопки (По-умолчанию true)
closeBtn Если установлено «true», то кнопка закрыть окно будет отображаться (По-умолчанию true)
closeClick Если «true», то при нажатии на содержимое окно закроется (По-умолчанию false)
nextClick Если установлено «true», то в галерее при нажатии на содержимое будет переход к следующей картинке (По-умолчанию false)
mouseWheel Если «true», то галерею можно прокручивать с помощью колесика мыши (По-умолчанию true)
autoPlay Если «true», то при открытии первого элемента галерее начнется слайдшоу (По-умолчанию false)
playSpeed Скорость слайдшоу (По-умолчанию 3000 миллисекунд)
preload Количество картинок миниатюр под основным изображением (По-умолчанию 3)
modal Если «true», навигация и кнопка закрытия будет отключена (По-умолчанию false)
loop Если «true», то в галерее после достижения конца, начнется заново (По-умолчанию true)
ajax Опция для ajax запроса
iframe Опция для управления iframe
swf Опция для управления swf содержимым
keys Можно определить клавиши для навигации по слайдшоу
direction Направление навигации
scrollOutside Если установлено «true», то сценарий будет избегать создания полос прокрутки (По-умолчанию true)
index Переопределяет индекс группы начала (По-умолчанию 0)
type Переопределяет тип содержимого. Поддерживаемые типы «image», «inline», «AJAX», «IFRAME», «SWF» и «HTML» (По-умолчанию null)
href Переопределяет ссылкой источник контента (По-умолчанию null)
content Переопределяет содержимое, которое будет отображаться (По-умолчанию null)
title Переопределяет заголовок, можно установить любой HTML (По-умолчанию null)
tpl Объект, содержащий различные шаблоны
openEffect /
closeEffect /
nextEffect /
prevEffect 		Эффект анимации для действий, возможны значения ‘fade’, ‘fade’, ‘elastic’, ‘elastic’
openSpeed /
closeSpeed /
nextSpeed /
prevSpeed 		Скорость анимации (По-умолчанию 250)
openEasing /
closeEasing /
nextEasing /
prevEasing 		Easing метод для каждого типа перехода (По-умолчанию swing)
openOpacity/
closeOpacity 		Если установлено «true», то меняется прозрачность (По-умолчанию true)
openMethod/
closeMethod/
nextMethod/
prevMethod 		Эффект transition может принимать значения ‘zoomIn’ / ‘zoomOut’ / ‘changeIn’ / ‘changeOut’
parent Родительский элемент в контейнере. Это полезно для ASP.NET, где верхний элемент является «формой» (По-умолчанию body)

Пользоваться данными параметрами очень просто, допустим мы хотим уменьшить отступы до содержимого контента и высоту содержимого:

1
2
3
4

$(".modalbox" ) .fancybox ({
padding : 0 ,
height : 100
} ) ;

Отправка сообщения

Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:

1
2
3
4

function validateEmail(email) {
var reg = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[{1,3}\.{1,3}\.{1,3}\.{1,3}\])|((+\.)+{2,}))$/ ;
return reg.test (email) ;
}

Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$("#send" ) .on ("click" , function () {
var emailval = $("#email" ) .val () ;
var msgval = $("#msg" ) .val () ;
var msglen = msgval.length ;
var mailvalid = validateEmail(emailval) ;
// Проверка правильности электронного адреса
if (mailvalid == false ) {
$("#email" ) .addClass ("error" ) ;
}
else if (mailvalid == true ) {
$("#email" ) .removeClass ("error" ) ;
}
// Проверка длины сообщения
if (msglen < 4 ) {
$("#msg" ) .addClass ("error" ) ;
}
else if (msglen >= 4 ) {
$("#msg" ) .removeClass ("error" ) ;
}

Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (msglen ) и проводим проверку введенного электронного адреса (mailvalid ). Далее проверяем если в переменная mailvalid равна false , значит электронный адрес введен неверно, и данный инпут будет подсвечен красным. Также проверяем количество введенных символов в текст сообщения, если меньше 4 символов значит показываем, что это ошибка (подсвечиваем текстовый инпут красным). $("#contact" ) .serialize () ,
success: function (data) {
if (data == "true" ) {
$("#contact" ) .fadeOut ("fast" , function () {
$(this ) .before ("Успешно! Ваше сообщение отправлено:)" ) ;
setTimeout("$.fancybox.close()" , 1000 ) ;
} ) ;
}
}
} ) ;
}
} ) ;

Если оба поля проверены то вместо кнопки «отправить» показываем текст, что происходит отправка сообщения. Это дает пользователю подтверждение того, что оба поля проверены и идет процесс.

Теперь запрос AJAX. Первый параметр запроса это тип передачи данных (POST или GET). Далее указываем файл обработчик (sendmessage.php ). Следующий параметр data (данные), методом serialize подготавливаем данные в формах для отправки на сервер.

Если мы получим хороший отклик от сервера (эти данные мы формируем в пхп файле), то мы скроем контактную форму и покажем сообщение об успехе отправки. Я использую SetTimeout() , для того чтобы модальное окно закрылось не сразу а через секунду после отправки данных.

PHP сценарий

Мы посылаем данные, введенные пользователем с помощью JQuery в sendmessage.php . В PHP мы формируем получаем эти данные из POST массива, формируем и отправляем сообщение. Если отправка прошла успешно возвращаем обратно в JQuery true иначе false .

В переменной $sendto мы указываем адрес электронной почты на который будут приходить письма.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$sendto = "[email protected]" ;
$usermail = $_POST [ "email" ] ;
$content = nl2br ($_POST [ "msg" ] ) ;

// Формирование заголовка письма
$subject = "Новое сообщение" ;
$headers = "From: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "Reply-To: " . strip_tags ($usermail ) . "\r \n " ;
$headers .= "MIME-Version: 1.0\r \n " ;
$headers .= "Content-Type: text/html;charset=utf-8 \r \n " ;

// Формирование тела письма
$msg = "" ;
$msg .= "Новое сообщение\r \n " ;
$msg .= "

От кого: " . $usermail . "

\r \n " ;
$msg .= "

Сообщение: " . $content . "

\r \n " ;
$msg .= "" ;

// отправка сообщения
if (@ mail ($sendto , $subject , $msg , $headers ) ) {
echo "true" ;
} else {
echo "false" ;
}

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.

Форма обратной связи php — структура

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

  • image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
  • js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
  • index.html — индексный файл нашего одностраничника
  • index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Заказать обратный звонок Заказажите обратный звонок

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи


У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

Приветствую вас дорогой читатель, в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте 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

      Ниже вставьте ваш код как раз перед закрывающим тегом.

      В целом, в добавлении контактной формы на свой сайт нет ничего сложного, главное – иметь в наличии немного свободного времени и желания досконально изучить все аспекты. Теперь вы знаете, что представляет из себя контактная форма, для чего она нужна, как ее использовать на сайте, и как обрабатывать ссылку для вызова окна с всплывающим эффектом. Удачи вам и успехов в этом нелегком, но увлекательном деле сайтостроения.

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

      Практически на любом сайте встречаются формы «захвата», такие как контактные формы или формы обратной связи и формы заказа товаров или услуг. Особенно часто формы используются в одностраничниках (лэндинг) и они нужны для взаимодействия и коммуникации с посетителем. Как правило, эти формы достаточно хорошо работают в плане конверсии, проверено годами. Однако, помимо форм, которые находят в открытом виде, в некоторых случаях используют всплывающие формы. Они очень удобны, занимают не много места, т. к. всплывают по нажатию на кнопку, также они не перенаправляют посетителей на другие страницы. Получается, что сайт, даже в рамках одной страницы, выполняет все необходимые функции по коммуникации с посетителем.

      Именно о создании всплывающих форм пойдет речь. Я расскажу как это сделать на сайтах, где форма на html или сделана с помощью плагина Contact Form 7 на WordPress .

      Создаем всплывающую форму на html .

      Рассмотрим на примере формы обратного звонка. Ниже приведен пример формы, которая будет открываться по нажатию на кнопку «Заказать звонок» или «Вам перезвонить?».

      Перезвонить

      Чтобы форму открыть, её нужно сначала скрыть, мы это делаем указав в диве, который включает в себя форму, style=»display: none;» , таким образом форма скрыта. Также необходимо указать этому диву осмысленный id , т. к. в нашем случае используется форма для обратного звонка, то мы называем ее callback .

      Создаем всплывающую форму в WordPress (Contact Form 7) .

      Сразу нужно отметить, что если вы создавали формы на сайте без помощи плагина Contact Form 7 , то вам подойдет вариант описанный выше.

      Итак, нам понядобятся 2 плагина: Contact Form 7 и Easy FancyBox , первый для создания форм, второй для открытия формы, установите их. Если нужная вам форма еще не создана, то создайте.
      Нам нужен только её шорткод, который выглядит примерно так:

      Теперь, если вы хотите сделать форму сквозной, то добавьте в футер этот код:

      Естественно шорткод установите свой, его можно найти нажав, в левом меню, на Contact Form 7 , откроется страница со списком уже созданных форм.
      А если вам нужна форма для конкретной страницы, то вставьте код через админку на странице (можно разместить код в виджете), только не в визуальном редакторе.

      [Ваш шорт код]

      Также установите свой шорткод.

      Теперь нам нужно настроить плагин Easy FancyBox . Для этого переходим в его настройки. В левом меню открываем «Настройки» и нажимаем «Медиафайлы» (не путайте с вкладкой меню чуть выше, которая тоже называется «Медиафайлы»). Если, у вас на сайте уже установлен плагин для всплывающих фото, то уберите галочку Images , и поставьте Inline content . После чего сохраните изменения.

      Осталось сделать кнопку, по нажатию на которою будет открываться форма. Её можно разместить в любом месте, в хидере, футере, можно прикрепить к одной из сторон браузера, так же можно разместить кнопку в любой статье или странице. Вставьте этот код, где хотели бы видеть кнопку:

      Напишите нам

      Кнопку и форму можете обверстать как вам понравится, придать любой стиль.

      А на этом всё. Если статья вам понравилась, то расскажите о ней своим друзьям и коллегам, ставьте палец «Вверх» и подписывайтесь в группу (в левом сайдбаре), а я, за это, буду писать для вас еще более интересные статьи.




    Статьи по теме

    Последние статьи
    Популярные статьи
    Выбор редакции
    rzdoro.ru