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

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

ОБСУЖДЕНИЕ

Обратная связь для сайта

Обратная связь на JQuery, PHP и MySQL
Просмотров: 1771  Скачан: 237 раз  Комментариев в теме: 1

Красивая обратная связь на PHP, JQuery и MySQL для вашего сайта. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых вам писем, это очень удобно, если вы вдруг удалите важное для вас сообщение присланное ранее на почту, то вам не составит труда заглянуть в БД и прочесть его снова, да и вообще вести учёт присылаемых писем и хранить их в БД, это отличный выход для информационного портала.

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

 

HTML

<div id="contact">
    <h1>Обратная связь</h1>
    <form id="ContactForm" action="">
        <p>
            <label>Имя</label>
            <input id="name" name="name" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
            <span class="error" style="display:none;"></span>
        </p>
        <p>
            <label>Email</label>
            <input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
            <span class="error" style="display:none;"></span>
        </p>
        <p>
            <label>Сайт<span>(коротко)</span></label>
            <input id="website" name="website" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
        </p>
        <p>
            <label>Сообщение<br /> <span>не больше 1000 символов</span></label>
            <textarea id="message" name="message" class="inplaceError" cols="6" rows="5" autocomplete="off"></textarea>
            <span class="error" style="display:none;"></span>
        </p>
        <p class="submit">
            <input id="send" type="button" value="отправить"/>
            <span id="loader" class="loader" style="display:none;"></span>
            <span id="success_message" class="success"></span>
        </p>
        <input id="newcontact" name="newcontact" type="hidden" value="1"></input>
    </form>
</div>
<div class="envelope">
    <img id="envelope" src="images/envelope.png" alt="envelope" width="246" height="175" style="display:none;"/>
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.contact.js"></script>

Теперь, что касается базы данных и электронной почты, все эти параметры задаются в файле php/config.php, для БД в исходниках прилагается файл contact.sql, это таблица, легче всего установи её через phpMYAdmin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

Free MusicFree Music

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

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....
  • Текущий 1.63/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (1)
↑ 0 ↓
Павел
Как-то не работает проверка полей. Просто крутится колесико и все.
Ответить Ответ с цитатой

Страницы: 1

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


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