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

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

ОБСУЖДЕНИЕ

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

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

Красивая обратная связь на 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.

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

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

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

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

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

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

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

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

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

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PH...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

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

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

Good Inc v1.2.1Good Inc v1.2.1

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PHP, CS...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

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

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

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...
  • Текущий 1.83/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (2)
↑ 0 ↓
serg
Ого ребята, как вы вообще в этом понимаете, я попробовал ничерта не получилось, в итоге помогли сделать форму.
Ответить Ответ с цитатой
↑ 0 ↓
Павел
Как-то не работает проверка полей. Просто крутится колесико и все.
Ответить Ответ с цитатой

Страницы: 1

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


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