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

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

ОБСУЖДЕНИЕ

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

Обратная связь на JQuery, PHP и MySQL
Просмотров: 1659  Скачан: 227 раз  Комментариев в теме: 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

The RockThe Rock

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

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

Navigation SlaiderNavigation Slaider

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

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......
  • Текущий 1.63/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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