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, CSS, JQuery
Просмотров: 10299  Скачан: 481 раз  Комментариев в теме: 0

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилизации текстовых полей и кнопок) и PHPMailer (для отправки на почту введённых данных). Нельзя не отметить тот факт, что форма прекрасно работает с выключенным JavaScript. Если вы ищите для своего персонального сайта или блога красивую форму, в таком случае остановите выбор на этой, в ней есть все что нужно, проверка введённых данных, капча, сообщения об ошибках и отправка сообщения по теме.

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

 

HTML

<div id="main-container">
    <div id="form-container">
        <h1>Форма обратной связи</h1>
        <h2>Напишите нам пару строк и мы свяжемся с вами</h2>  
        <form id="contact-form" name="contact-form" method="post" action="submit.php">
            <table width="100%" border="0" cellspacing="0" cellpadding="5">
                <tr>
                    <td width="15%"><label for="name">Имя</label></td>
                    <td width="70%"><input type="text" class="validate[required,custom[onlyLetter]]" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /></td>
                    <td width="15%" id="errOffset"> </td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="text" class="validate[required,custom[email]]" name="email" id="email" value="<?=$_SESSION['post']['email']?>" /></td>
                    <td> </td>
                </tr>
                <tr>
                    <td><label for="subject">Тема</label></td>
                    <td>
                        <select name="subject" id="subject">
                            <option value="" selected="selected"> - Выберите -</option>
                            <option value="Question">Вопрос</option>
                            <option value="Business proposal">Деловое предложение</option>
                            <option value="Advertisement">Реклама</option>
                            <option value="Complaint">Жалоба</option>
                        </select>
                    </td>
                    <td> </td>
                </tr>
                <tr>
                    <td valign="top"><label for="message">Сообщение</label></td>
                    <td><textarea name="message" id="message" class="validate[required]" cols="35" rows="5"><?=$_SESSION['post']['message']?></textarea></td>
                    <td valign="top"> </td>
                </tr>
                <tr>
                    <td><label for="captcha"><?=$_SESSION['n1']?> + <?=$_SESSION['n2']?> =</label></td>
                    <td><input type="text" class="validate[required,custom[onlyNumber]]" name="captcha" id="captcha" /></td>
                    <td valign="top"> </td>
                </tr>
                <tr>
                    <td valign="top"> </td>
                    <td colspan="2"><input type="submit" name="button" id="button" value="Отправить" />
                    <input type="reset" name="button2" id="button2" value="Сброс" />         
                    <?=$str?><img id="loading" src="img/ajax-load.gif" width="16" height="16" alt="loading" /></td>
                </tr>
            </table>
        </form>
        <?=$success?>
    </div>
    <div class="tutorial-info"></div>
</div>

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

 

CSS

<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" />
<link rel="stylesheet" href="formValidator/validationEngine.jquery.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />

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

 

JS

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>
<script type="text/javascript" src="formValidator/jquery.validationEngine.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#contact-form').jqTransform();
    $("button").click(function(){
        $(".formError").hide();
    });
    var use_ajax=true;
    $.validationEngine.settings={};
    $("#contact-form").validationEngine({
        inlineValidation: false,
        promptPosition: "centerRight",
        success :  function(){use_ajax=true},
        failure : function(){use_ajax=false;}
    })
    $("#contact-form").submit(function(e){
        if(!$('#subject').val().length)
        {
            $.validationEngine.buildPrompt(".jqTransformSelectWrapper","* Это поле обязательное","error")
            return false;
        }
        if(use_ajax)
        {
            $('#loading').css('visibility','visible');
            $.post('submit.php',$(this).serialize()+'&ajax=1',
            function(data){
                if(parseInt(data)==-1)
                $.validationEngine.buildPrompt("#captcha","* Неправильное значение!","error");
                else
                {
                    $("#contact-form").hide('slow').after('<h1>Спасибо!</h1>');
                }
                $('#loading').css('visibility','hidden');
            });
        }
        e.preventDefault();
    })
});
</script>

Вот этот php код нужно вставить в самый-самый верх страницы перед тегом <html>.

<?php
   session_name("fancyform");
   session_start();
   
   $_SESSION['n1'] = rand(1,20);
   $_SESSION['n2'] = rand(1,20);
   $_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];
   
   $str='';
   if($_SESSION['errStr'])
   {
        $str='<div class="error">'.$_SESSION['errStr'].'</div>';
        unset($_SESSION['errStr']);
    }
    $success='';
    if($_SESSION['sent'])
    {
        $success='<h1>Thank you!</h1>';
        $css='<style type="text/css">#contact-form{display:none;}</style>';
        unset($_SESSION['sent']);
    }
?>

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

Вот собственно и все, но хотелось бы отметить один факт, данная форма обратной связи очень привередливая к кодировкам, по умолчанию стоит кодировка UTF-8, если вам нужно перекодировать например в windows-1251, то делайте это осторожней.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....
  • Текущий 1.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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