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

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

ОБСУЖДЕНИЕ

Красивая форма обратной связи

Красивая форма обратной связи на PHP, CSS, JQuery
Просмотров: 9605  Скачан: 468 раз  Комментариев в теме: 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, то делайте это осторожней.

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

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

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

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

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

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

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

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

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

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

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

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

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

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....
  • Текущий 1.70/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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