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

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

ОБСУЖДЕНИЕ

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

Обратная связь на PHP и JQuery
Просмотров: 1367  Скачан: 186 раз  Комментариев в теме: 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>
Материалы по теме:

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

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

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

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

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

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Max Mag v1.0.9Max Mag v1.0.9

Max Mag - это адаптивный широкоформатный шаблон для WordPress....

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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