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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

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

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

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......
Интересные публикации:

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

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

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

Pack кнопок #2 на CSS3Pack кнопок #2 на CSS3

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

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

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

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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