background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Форма обратной связи (php, html)

Фиксированная форма обратной связи
Просмотров: 6482  Скачан: 351 раз  Комментариев в теме: 0

Фиксированная форма обратной связи на php, html, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на валидность, в скрипте есть возможность отправлять сообщение по теме (техподдержка, жалоба и т.д). Форма фиксируется с левой стороны страницы, при клике по кнопке, форма раскрывается, далее можно вводить и отправлять сообщение, это очень удобно, таким образом пользователь без каких либо усилий может обратиться к вам на прямую с любой страницы вашего сайта.

Шаг 1 - создание разметки

 

HTML

<div id="my-contact-div"></div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.contactable.js"></script>
<script type="text/javascript">
jQuery(function(){
    jQuery('#my-contact-div').contactable(
    {
        subject: 'feedback URL:'+location.href,
        url: 'mail.php',
        name: 'Имя',
        email: 'Ваш Email',
        dropdownTitle: 'Тема',
        dropdownOptions: ['Техподдержка', 'Жалоба', 'Разное'],
        message : 'Ваше сообщение',
        subject : 'Сообщение с вашего сайта',
        submit : 'Отправить',
        recievedMsg : 'Спасибо за ваше сообщение',
        notRecievedMsg : 'Извините, но ваше сообщение не может быть послано, попробуйте ещё раз',
        disclaimer: 'Пожалуйста, не стесняйтесь обращаться к нам, мы оцениваем Ваше сообщение',
        hideOnSubmit: true
    });
});
</script>

Что-бы форма полноценно заработала, вам нужно указать свой Email, это делается в файле mail.php. Открываем файл, находим строку (mail@mail.ru) и заменяем её на свой Email, вот собственно и все, форма обратной связи готова к работе. Если же вы хотите изменить надписи и т.д, то полноценная настройка производится в файлах mail.php и jquery.contactable.js.

Материалы по теме:

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Контактная форма (дизайн)Контактная форма (дизайн)

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

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Оригинальная анимационная контактная формаОригинальная анимационная контактна...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи ...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...
Интересные публикации:

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить