Вредоносное ПО (malware) - это назойливые или опасные программы,...
По многочисленным просьбам пользователей, мы нашли частное решение для реализации , появляющейся при нажатии на кнопку (например «Заказать звонок»).
Для того, чтобы добавить в свою целевую страницу «всплывающую» форму:
1. Войдите в редактор страницы, в которую должна быть встроена форма.
2. Для устранения конфликта библиотек jQuery, скопируйте код, размещенный , и вставьте его через инструмент «Скрипты», установив положение «После тега :
3. С помощью инструмента «Кнопка» создайте кнопку:
Эта кнопка будет отображаться на целевой странице, поэтому текст на ней должен соответствовать целевому действию, которое последует за ее нажатием (например, «Заказать звонок!»). В строке URL вы можете указать любую ссылку (например, на основной сайт), т. к. она нужна только для создания кнопки.
4. С помощью инструмента «Форма» создайте форму:
Форма будет появляться после нажатия на кнопку, название меток должно соответствовать целевому действию (например, «Имя» и «Телефон» для кнопки «Заказать звонок!»).
7. Найдите в коде строчки:
В них вам потребуется изменить значение ID для каждого элемента соответственно.
8.1 В ID под номером 1 на скриншоте вам нужно вписать ID формы. Для этого кликните 1 раз по полям формы, войдите во вкладку «Расширенные» меню «Свойства» справа и скопируйте «ID якоря»:
8.2 В строке 2 на скриншоте вам нужно вписать ID кнопки, связанной с формой.
8.3 В строке 3 на скриншоте — ID кнопки, которая будет отображаться на странице.
Вот и все. «Всплывающая форма» готова.
По желанию, вы можете изменить внешний вид
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript"ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
- images - папка, где хранятся все изображения нашей формы;
- index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
- contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
- send.php - файл-обработчик, занимающийся отправкой письма;
- jquery.js - основной фреймворк jQuery;
- style.css - файл с каскадными таблицами стилей для нашей формы.
Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
Написать сообщение администратору
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html , который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Отправка Сообщения Администрации:
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 4. Обработчик, отвечающий за отправку писем
Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше...
Шаг 5. "Прикрутка" основного фреймворка jQuery
Теперь, как и в любом уроке по jQuery мы должны "прикрутить" основной фреймворк jQuery. Для этого вернемся немного назад, туда, где располагается наша кнопка, и между тегами и вставим следующий код:
Шаг 6. Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css , поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Шаг 7. jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
$(function() { $("a").overlay(function() { var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) { wrap.load(this.getTrigger().attr("href")); } }); });
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
С искренним уважением Ваш jQuery - проводник - М. К.
Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!
Что нам понадобится?! не так уж и много:
- библиотека jQuery;
- плагин fancybox;
- сценарий PHP для отправки сообщения.
Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.
Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:
Отправить сообщение |
Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:
1 |
Отправить E-mail |
Добавим на форму два поля это текст сообщения и электронный адрес отправителя, а также кнопку оправки. После того как пользователь введет e-mail, текст сообщения и нажмет отправить сначала проведем проверку корректности введенной информации затем с помощью ajax запроса отправим данные в PHP сценарий.
Изначально форма скрыта:
#inline { display : none ; } |
Немного стилей для оформления полей формы и пара классов применяемых к полям при не корректном вводе данных. Когда ошибки исправлены стиль полей становится нормальным.:
1 | Txt
{
Txtarea
{
Txt
:
focus
,
Input.error,
Input.error
:
focus
,
|
Для оформления кнопки «Отправить» будем .:
1 | #send
{
#send
:
hover
{
#send
:
active
{
|
Переходим к самому интересному, к использованию плагина. Вызываем метод .fancybox в качестве селектора выступает класс ссылки:
$(document)
.ready
(function
()
{
|
Также отменяем стандартное действие формы 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 | $(".modalbox"
)
.fancybox
({
|
Перед отправкой мы будем проверять правильность введенных данных, корректность введенного электронного адреса. Поэтому нам понадобится функция проверки. Использовать будем регулярное выражение:
1 | function
validateEmail(email)
{
|
Последний шаг — это отправка сообщения. Отслеживаем событие клик по кнопке «Отправить»:
1 | $("#send"
)
.on
("click"
,
function
()
{
|
Помещаем в первые две переменные данные, которые ввел пользователь. Определяем длину сообщения (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 | $sendto
=
"[email protected]"
;
// Формирование заголовка письма
// Формирование тела письма
От кого: " . $usermail . " \r \n " ;$msg .= " Сообщение: " . $content . " \r \n " ;$msg .= "" ; // отправка сообщения
|
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи 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 (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.