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

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

ОБСУЖДЕНИЕ

Обратная связь на PHP и JQuery

Обратная связь на PHP и JQuery
Просмотров: 1333  Скачан: 182 раз  Комментариев в теме: 0

Стильная обратная связь ( LightForm) для сайта на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и полей текстового ввода, Ajax для отправки без перезагрузки страницы. Если вы ищите для своего проекта, что-то простое и в же время практичное, то эта форма вам подойдёт, в ней есть все что надо. Проверка полей, капча, сообщение о допустимых ошибках. Вам на почту помимо сообщения пользователя, приходит и краткая информация о нем ( IP пользователя, используемый браузер и его версия, платформа и адрес страницы с которой отправлялось сообщение).

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

 

HTML и PHP

<?php
$headers = 'Content-type: text; charset=utf-8';
$to = 'mail@mail.ru'; //ТУТ УКАЗЫВАЕМ СВОЙ EMAIL
$name = stripslashes($_POST['name']);
$email = stripslashes($_POST['email']);
$website = stripslashes($_POST['website']);
$subject .= stripslashes($_POST['subject']);
$msg  = "Имя : $name \r\n";
$msg .= "Email : $email \r\n";
$msg .= "Сайт : $website \r\n";
$msg .= "Тема : $subject \r\n\n";
$msg .= "Сообщение \r\n".stripslashes($_POST['message'])."\r\n\n";
$msg .= "Информация \r\n";
$msg .= "IP пользователя : ".$_SERVER["REMOTE_ADDR"]."\r\n";
$msg .= "Браузер : ".$_SERVER["HTTP_USER_AGENT"]."\r\n";
$msg .= "Страница отправки : ".$_SERVER["HTTP_REFERER"];
    if ($_SERVER['REQUEST_METHOD'] != 'POST'){
        $self = $_SERVER['PHP_SELF'];
?>
<form name="form" method="post" id="third" action="<?php echo $self;?>"  class="niceform">
    <h1>Форма обратной связи</h1>
    <label for="name"><strong><span class="blue">*</span> Имя : </strong></label>
        <input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" />
    <label for="email"><strong><span class="blue">*</span> Email : </strong></label>
        <input id="email" name="email" type="text" class="validate['required','length[5,-1]','email']" size="20" />
    <label for="site">Ваш сайт : </label>
        <input id="website" name="website" type="text" class="validate['url']" size="20" />
    <label for="subject"><strong><span class="blue">*</span> Тема письма: </strong></label>
        <input id="subject" name="subject" type="text" class="validate['required']" size="20" />
    <label for="msg"><strong><span class="blue">*</span> Ваше сообщение : </strong></label><br />
        <textarea id="message" name="message" type="text" class="validate['required']" rows="10" cols="30"></textarea>
    <label for="spamcheck"><span class="blue">*</span> <acronym  title="[ Spam prevention ]"><strong>Докажи что ты человек</acronym> : <span class="blue">2 + 3 = ???</span></strong></label>
        <input id="spamcheck" name="spamcheck" type="text" size="5" class="validate['required','number','spamcheck']" />
        <br /><br />
    <input type="submit" class="buttonSubmit" value="Send it!" />
    <div id="stylesheetTest"></div>
</form>    
<?php
} else
    {
        error_reporting(0);
        if  (mail($to, $subject, $msg, $headers, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n"))
        echo nl2br("
            <div class=\"MsgSent\">
                <h1>Поздравляем!</h1>
                <p>Спасибо <b><?=$name;?></b>, ваше сообщение отправлено!<br /> Как только оно будет обработано вы получите ответ.</p>
            </div>
        ");
        else
        echo "
        <div class=\"MsgError\">
            <h1>Ошибка!!</h1>
            <p>Извините <b><?=$name;?></b>, ваше сообщение не отправлено. Попробуйте отправить его позже!</p>
        </div>";
    }
?>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

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

 

JS

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/formcheck.js"></script>
<script type="text/javascript" src="js/niceforms.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){check = new FormCheck('third', {
    display : {
        fadeDuration : 500,
        errorsLocation : 1,
        indicateErrors : 1,
        showErrors : 1
    }
})});
</script>
Материалы по теме:

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

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

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

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

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

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

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «Lig...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

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

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

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

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

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

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

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

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

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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