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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на c...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Скроллер картинокСкроллер картинок

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

JourneyJourney

Шаблон Journey построенный на HTML5, в шаблоне имеется слайдер, стрелка вверх, табы, галерея, контактная форма с Google Maps....

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

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

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

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

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


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