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

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

ОБСУЖДЕНИЕ

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

форма обратной связи на PHP
Просмотров: 1443  Скачан: 201 раз  Комментариев в теме: 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 на свой.

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

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

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

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

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

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

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

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на c...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

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

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

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

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

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MyS...

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...
Интересные публикации:

TanyaCMS 1.0TanyaCMS 1.0

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

EbuyEbuy

Ebuy - это шаблон интернет магазина, который полюбился многим за свою простоту в использовании и надёжность....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

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

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

KroftKroft

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

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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