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, AJAX, JS

Форма обратной связи на PHP, AJAX, JS
Просмотров: 9546  Скачан: 568 раз  Комментариев в теме: 3

На этой странице представлена красивая форма обратной связи для вашего сайта реализованная на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об ошибках, также скрипт позволяет выполнять аутентификацию SMTP. Вы можете, например, воспользоваться сервисом Gmail от Google. Собственно форма обратной связи это неотъемлемая часть любого сайта, через неё происходит общение между пользователем и администратором, разумеется дизайн обратной связи должен быть красивым и быть приятен для пользователя, дизайн данной формы вполне достойный вариант.

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

 

HTML

<div id="contact">
    <div id="top">
        <h1>Напишите нам</h1>
    </div>
    <div id="center">
        <div id="contact_form">
            <form method="post" action="php/send.php" id="contactForm">
                <div class="error" id="error">Произошла ошибка, сообщение не может быть отправлено!</div>
                <div class="success" id="success">Сообщение успешно отправлено!<br />Спасибо.</div>
                <span class="input">
                    <label for="name"><b>Ваше имя:</b> </label>
                    <input  type="text" id="name" name="name" />
                    <div class="warning" id="nameError">Это поле обязательно для заполнения</div>
                </span>
                <span class="input">
                    <label for="email"><b>Ваш Email:</b> </label>
                    <input  type="text" id="email" name="email" />
                    <div class="warning" id="emailError">Введите правильный email!</div>
                </span>
                <span class="input">
                    <label for="sales"><b>Тема:</b> </label>
                    <select id="sales" name="sales">
                        <option value="Техподдержка">Техподдержка</option>
                        <option value="Продажи">Продажи</option>
                        <option value="Другое">Другое</option>
                    </select>
                </span>
                <span class="input">
                    <label for="message"><b>Ваше сообщение:</b> </label>
                    <textarea id="message" name="message">Здравствуйте,</textarea>
                    <div class="warning" id="messageError">Это поле обязательно для заполнения</div>
                </span>
                <span class="input">
                    <label for="security_code"><b>Цифры:</b> </label>
                    <input class="noicon" type="text" id="security_code" name="security_code" style="width:100px" />
                    <img src="php/security/1/sec.php" style="vertical-align:middle;" />
                    <div class="warning" id="security_codeError">Цифры введены неверно!</div>
                </span>
                <span id="submit" class="input">
                    <label for="submit"></label>
                    <p id="ajax_loader" style="text-align:center;"><img src="images/contact/ajax-loader.gif" /></p>
                    <input id="send" type="submit" value="Отправить письмо!" />
                </span>
            </form>
        </div>
    </div>
    <div id="bot"></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">
jQuery(document).ready(function(){
    var Form = {
        name: 'contactForm',
        cssClass: {'warning' : 'warning','error' : 'error', 'success' : 'success'},
        id: {'error' : 'error', 'success': 'success'},
        errorPrefix: 'Error',
        action: function(){return $('#' + this.name).attr('action')},
        data: function(){
            return $('#' + this.name).serialize();
        },
        hideBox: function(el){
            $(el).slideUp('slow');
        },
        showBox: function(el){
            $(el).slideDown('slow');
        },
        invalids: null,
        setInvalids: function(invalid){
            this.invalids = invalid
        }
    }
    var cssBoxes = '.' + Form.cssClass['warning'] + ',.' + Form.cssClass['error'] + ',.' + Form.cssClass['success'];
    $('#ajax_loader').ajaxStart(function(){
        $('#send').hide();$(this).show()
    })
    $('#ajax_loader').ajaxComplete(function(){
        $('#send').show();$(this).hide()
    })
    $('#' + Form.name).submit(function(){
        Form.hideBox(cssBoxes);
        // Ajax request
        $.post(Form.action(), Form.data(), function(data){
            var $return = eval('(' + data + ')');
            if($return === true){
                Form.showBox('#' + Form.id['success']);
                $('#contact_form form input[type="text"]').attr('value', '');
                $('#contact_form form textarea[name="message"]').attr('value', '');
                $('#contact_form img').attr('src', 'images/contact/ajax-loader.gif');
                $('#contact_form img').attr('src', 'php/security/1/sec.php?'+Math.random());
            }else if($return === false){
                Form.showBox('#' + Form.id['error']);
            }
            else{
                for(var i in $return){
                    Form.showBox('#' + $return[i] + Form.errorPrefix);
                }
            }
        });
        return false;
    })
})
</script>

С установкой думаю все понятно, теперь нужно задать ваш Email, на который посетители будут отправлять вам письма. И так, открываем файл xml/config.php, находим вот эту строку:

<address>mail@mail.ru</address>

и заменяем данный Email ( mail@mail.ru ) на свой.

Если вы хотите, что-бы посетители отправляли вам письма на разную почту, в зависимости от выбранной темы (к примеру Техподдержка, Продажи, Другое), то вам нужно заменить пару строк. Заходим в файл xml/config.php и находим вот эти строки:

<address>mail@mail.ru</address>
<address on="subject" value="Техподдержка"></address>
<address on="subject" value="Продажи"></address>
<address on="subject" value="Другое"></address>

и заменяем их на вот эти:

<address on="subject" value="Техподдержка">mail1@mail.ru</address>
<address on="subject" value="Продажи">mail2@mail.ru</address>
<address on="subject" value="Другое">mail3@mail.ru</address>

Email адреса (mail1@mail.ru, mail2@mail.ru, mail1@mail.ru) заменяем на свои, в последствии письма будут отправлять на разные адреса, в зависимости какая тема выбрана ( Техподдержка, Продажи, Другое).

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

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

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

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Respo...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

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

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

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

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

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

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

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

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

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

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

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

Облако теговОблако тегов на css

В данном примере представлен довольно приятный дизайн облака тегов, который реализован с помощью CSS...

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

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

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Sooshal v2.4Sooshal v2.4

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

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

Комментариев в теме: (3)
↑ 0 ↓
serge
SyntaxError: expected expression, got '<'
Ответить Ответ с цитатой
↑ +2 ↓
ADMIN
Прокомментировано пользователя: serge
SyntaxError: expected expression, got '<'

Посмотрел, ошибки нет, все работает нормально. Вам нужно почистить кеш в браузере и все будет ок!

Ответить Ответ с цитатой
↑ +3 ↓
Alex
Довольно компактная форма, немного подправим стили и для моего сайта самое то..
Ответить Ответ с цитатой

Страницы: 1

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


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