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

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

ОБСУЖДЕНИЕ

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

Красивая форма обратной связи на PHP, CSS, JQuery
Просмотров: 11303  Скачан: 538 раз  Комментариев в теме: 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 в тёмном стиле. В форме реализована проверка полей......

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

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

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

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

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

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

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

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

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

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

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

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

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

Отличное горизонтальное меню с большое количество пунктов....

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

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

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

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...
  • Текущий 1.64/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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