RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

Фиксированная форма обратной связи на PHP

форма обратной связи на PHP
Просмотров: 1398  Скачан: 194 раз  Комментариев в теме: 0

Довольно простая форма обратной связи на php без капчи, проверки полей, сообщений об ошибке и всего прочего, но если вы ищите для себя именно это, в таком случае представленная форма будит вам интересна. Форма обратной связи фиксируется в нижней части страницы, при клике, форма раскрывается, за тем уже можно писать сообщение.

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

 

HTML

<div id="feedback">
    <span class="color color-1"></span>
    <span class="color color-2"></span>
    <span class="color color-3"></span>
    <span class="color color-4"></span>
    <span class="color color-5"></span>    
    <div class="section">    
        <h6><span class="arrow up"></span>Feedback</h6>       
        <p class="message">Пожалуйста введите текст сообщения</p>        
        <textarea></textarea>       
        <a class="submit" href="">Отправить</a>
    </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.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var submitURL = 'submit.php';
    var feedback = $('#feedback');
    $('#feedback h6').click(function(){
        var anim= {
            mb : 0,// Margin Bottom
            pt : 25// Padding Top
        };
        var el = $(this).find('.arrow');
        if(el.hasClass('down')){
            anim = {
                mb : -270,
                pt : 10
            };
        }
        feedback.stop().animate({marginBottom: anim.mb});
        feedback.find('.section').stop().animate({paddingTop:anim.pt},function(){
            el.toggleClass('down up');
        });
    });
    $('#feedback a.submit').live('click',function(){
        var button = $(this);
        var textarea = feedback.find('textarea');
        if(button.hasClass('working') || textarea.val().length < 5){
            return false;
        }
        button.addClass('working');
        $.ajax({
            url: submitURL,
            type: 'post',
            data: { message : textarea.val()},
            complete: function(xhr){
                var text = xhr.responseText;
                if(xhr.status == 404){
                    text = 'Your path to submit.php is incorrect.';
                }
                button.fadeOut();
                textarea.fadeOut(function(){
                    var span = $('<span>',{
                        className: 'response',
                        html: text
                    })
                    .hide()
                    .appendTo(feedback.find('.section'))
                    .show();
                }).val('');
            }
        });
        return false;
    });
});
</script>

Что-бы форма полноценно заработала, нужно прописать свой email, для этого заходим в submit.php и в строке $emailAddress = 'mail@mail.ru', меняем email на свой.

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PH...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat F...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «Lig...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прог...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

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

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

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

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Шаблон Desire Night ClubШаблон Desire Night Club

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

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

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

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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