Обработка формы в модальном окне. Простая форма связи на Ajax. Отправить нам сообщение

Я посвятил тому, как можно создать всплывающее окошко, которое показывается на сайте один раз и через определенный интервал времени. Так вот, в данное окно, как вариант, можно вставить форму. Она может быть формой подписки или формой связи, в общем, чем угодно. Во всплывающих окнах лучше выводить ajax-формы, чтобы данные отсылались без перезагрузки страницы.

Структура статьи

Если вы делаете сайт на движке, например, Joomla или WordPress, то можно конечно использовать различные готовые решения для форм, в том числе и конструкторы. Но что, если вы верстаете просто на чистом HTML и заказчик попросил «оживить» формы, чтобы они работали. Вот здесь как раз и пригодится данная форма.

UPD. 02.08.2018
Статья переписана с учетом того, что форма была выложена на GitHub

И так, давайте приступим. Первым делом скачайте исходники формы с моего репозитория на Гитхаб.

Данную сборку я собирал с помощью таск-менеджера Gulp. Про то, как с ним работать я писал , обязательно прочитайте.

Подключаем форму к сайту

Распаковываем архив с формой. Далее скопируйте из папки dist все содержимое в папку формы (например, ajax-form) в вашем шаблоне сайта. Далее подключаем ресурсы — стили и скрипты. В папках css и js имеются две версии — сжатая и обычная. Если вы планируете в дальнейшем вносить правки в код, то лучше подключать несжатые версии.

Если на вашем сайте уже подключена библиотека jQuery, то можете ее не подключать. Обратите внимание на .

Инициализация формы

Сразу отмечу, что валидация полей организовано средствами HTML5.

Форма вызывается методом.simpleSendForm() , например:

$("#idForm").simpleSendForm();

Вместо #idForm указываем индификатор формы. Вообще код инициализации формы вы можете найти в файле scripts.js . Код вызова плагина можно вырезать оттуда и прописать прямо перед . Не забываем про jQuery.(document).ready() .

Форма может принимать некоторые опции.

Опции

successTitle (строка) — Заголовок сообщения благодарности при отправленной форме. По умолчанию — «Спасибо, что выбрали нас!»
successText (строка) — текст под заголовком сообщения благодарности. По умолчанию — «Мы свяжемся с Вами в ближайшее время».
errorTitle (строка) — заголовок сообщения об ошибке отправки формы. По умолчанию — «Сообщение не отправлено!».
errorSubmit (строка) — текст сообщения об ошибке отправки формы. По умолчанию — «Ошибка отправки формы!».
errorNocaptcha (строка) — текст ошибки, если не заполнили каптчу.
errorCaptcha (строка) — текст ошибки, если проверка прошла с ошибкой.
mailUrl (строка) — путь до файла обработчика. По умолчанию — «../form-submit/submit.php «. Следует изменить и указать полный путь, если у вас папка «form-submit » лежит не в корне сайта.
autoClose (булево) — автоматически закрывает окно после успешной отправки формы (для форм в модальном окне). Окно формы закрывается, показав сообщение благодарности по истечению 5 сек. Данное время можно переопределить.
autoCloseDelay (число) — продолжительность (в миллисекундах) показа сообщения благодарности после которого оно закроется. По умолчанию — 5000 (5 сек.).
debug (булево) — по умолчанию false. Включение отладки, если есть проблемы с работой формы. Сообщения ошибок смотрите в консоли.
captcha (булево) — по умолчанию false. Включение или отключение каптчи Recaptcha 2.0.
captchaPublicKey (строка) — публичный ключ рекаптчи.

Форма в модальном окне

Нашу форму можно показать и в модальном окне. Модалку будет выводить библиотека .

HTML код

Код кнопки

Заказать звонок

Код формы

Инициализируем модальное окно и форму. Давайте сделаем автоматическое закрытие окошка через 3 сек. после успешной отправки формы. Код вызова Magnific Popup вы также найдете в файле scripts.js .

Вызов формы с модальным окном // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup({ type: "inline", fixedContentPos: false, fixedBgPos: true, overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removalDelay: 300, mainClass: "mfp-top-up" }); // ===== Init modal form ==== $("#idForm").simpleSendForm ({ successTitle: "Ваша заявка принята!", successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.", autoClose: true, autoCloseDelay: 3000 }); Как включить Recaptcha?

Если вы хотите включить рекаптчу в форме, то вам необходимо добавить пустой блок с классом recaptcha в html-коде формы в том месте, где вы хотите ее вывести. Далее в коде вызова плагина формы передаем опцию captcha со значением true, а опцииcaptchaPublicKey передаем ваш публичный ключ recaptcha. Публичный и приватный ключи можете получить .

// ===== Init captcha in the form ==== $("#idForm").simpleSendForm({ successTitle: "Ваша заявка принята!", successText: "Наш сотрудник свяжется с Вами в самое ближайшее время.", autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" });

Далее открываем файл обработчика формы submit.php из директории form-submit . Ищем переменную recaptchaOn (примерно 7-я строка) и выставляем ей значение true . Далее ищем переменную $secret (примерно 89-я строка) и меняем приватный ключ на свой.

В принципе все. После этих манипуляций каптча у вас должна появиться.

Обратите внимание на демо-сайте каптча работает в тестовом режиме, так как указаны тестовые ключи от Гугл.

Теперь давайте заглянем в файл обработчика (submit.php) формы и пройдемся по основным кускам кода. Обработчик работает на языке php, поэтому если хотите протестировать форму вам необходимо будет использовать .

Возможные ошибки Не отправляется сообщение из формы, прелодер просто бегает и все. В чем проблема?

Посмотрите, правильно ли указан путь до файла обработчика в инициализации формы:

mailUrl: — путь до файла обработчика

Также проверьте корректность включения рекаптчи. То есть если отключено, то опции recaptcha в коде инициализации и $recptchaOn в файле обработчика должны быть выставлены в false или в true , если рекаптча включена.

Не показывается Google Recaptcha в форме

Проверьте переданы ли recaptcha (вызов рекаптчи) и $recaptchaOn (файл обработчика) значения — true . Также проверьте правильно ли вы указали ключи — публичный и приватный.

Все сделал по инструкции, но форма не работает, где искать ошибку?

В первую очередь советую заглянуть в консоль браузера и проверить наличие ошибок. Также проверьте подключена ли у вас библиотека jQuery. Проверьте правильность подключения файла scripts.js . Если все хорошо, то попробуйте включить отладку опцией debug: true . После включения смотрите консоль на наличие ошибок.

Вот такая вот форма. Используйте на своем сайте, надеюсь она будет вам полезна. Что еще сказать? Давайте теперь говорить будете вы — в комментариях. Спрашивайте, если что непонятно. Также, если найдете ошибку, то прошу сообщить незамедлительно, исправим…

На этом все. Спасибо за внимание. До встречи в следующих постах!

Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript"ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:

Шаг 1. Общее описание и работа формы обратной связи:

Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:

images - папка, где хранятся все изображения нашей формы;
index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
send.php - файл-обработчик, занимающийся отправкой письма;
jquery.js - основной фреймворк jQuery;
style.css - файл с каскадными таблицами стилей для нашей формы.

Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...

Шаг 2. Кнопка для вызова формы.

Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:

Написать сообщение администратору

Шаг 3. Сама форма + настройки к ней

Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html , который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:

Отправка Сообщения Администрации:

*Имя: *E-mail: Тема: *Сообщение:

Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.

Шаг 4. Обработчик, отвечающий за отправку писем

Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше...

Шаг 5. "Прикрутка" основного фреймворка jQuery

Теперь, как и в любом уроке по jQuery мы должны "прикрутить" основной фреймворк jQuery. Для этого вернемся немного назад, туда, где располагается наша кнопка, и между тегами и вставим следующий код:

Шаг 6. Стилизация формы

Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css , поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:

Шаг 7. jQuery-доработки

Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:

$(function() { $("a").overlay(function() { var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) { wrap.load(this.getTrigger().attr("href")); } }); });

Заключение.

Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!

С искренним уважением Ваш jQuery - проводник - М. К.

Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, работающее на jQuery. Сегодня же, хочу познакомить вас, с интересным решением создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта.

На мой взгляд, замечательный образец средств взаимодействия с пользователями.

Пример посмотрели. Теперь, давайте разложим эту форму на составляющие, от создания общей структуры в Html, до формирования внешнего вида макета с помощью CSS.

HTML-код формы

Ничего сверхъестественного, максимально простой каркас обычной контактной формы, помещенный в блочный элемент div с определенным идентификатором и классом, для дальнейшего формирования внешнего вида формы в css и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.

Закрыть Отправить нам сообщение

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

Так же, нам необходимо создать слой затемнения общего фона, при активации всплывающей формы. Выполнить эту задачу можно по разному, но мы мудрить особо не будем и добавим еще один div , присвоив ему идентификатор: id="fade" и класс: class="black-overlay" . Поместить его можете рядом с формой, чтобы долго не искать при необходимости.

Обратная связь

Вы наверное заметили, что кнопка закрытия, вписана в блок контактной формы, непосредственно перед заголовком и это логично, а где же ей еще быть, кнопка должна появляться и исчезать вместе с формой. Внешний вид и позицию кнопки закрытия мы в дальнейшем сформируем в CSS

Вот и все, давайте теперь, посмотрим на полный Html-код страницы содержащей всплывающую форму обратной связи:

Всплывающая контактная форма Обратная связь Закрыть Отправить нам сообщение Пожалуйста, введите своё сообщение здесь..

Прежде чем перейдем к самому интересному, к формированию стилей нашей контактной формы с помощью CSS, немного отступлю. Самые внимательные, наверняка заметили, что кнопки открытия и закрытия формы реализованы в виде ссылок с «глушилкой» href="javascript:void(0)" . Плохо этот или хорошо, точного ответа для себя я так и не нашел, использую этот способ по привычке. Хотя для элементов, на которых событие onclick обрабатывается скриптом, думается мне, логичнее и правильнее, использовать , или . При желании, вы всегда можете так и поступить с кнопками из данного примера.

Магия CSS

Данная форма обратной связи выполнена в оригинальном стиле, с некоторыми дизайнерскими жудожествами, так что вариант верстки с использованием исключительно современных стандартов CSS3, довольно проблематичен.
Основой всей конструкции, фоном контактной формы, будет служить незамысловатый рисунок конверта, не оставляющий у пользователя, никаких сомнений на счет того, что перед ним открылось)))) В кнопке закрытия, мы так же используем парочку небольших картинок, чтобы она видоизменялась при наведении. Все эти картинки, вы легко сможете поменять на свои, а кнопки вообще, если поймаете кураж, можете забабахать на CSS3.

А вот, непосредственно и сам CSS-код, нашей замечательной формы, с небольшими комментариями, для ясности и дабы избежать лишних вопросов:

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

Все! Только что, мы вместе с вами, создали отличный инструмент взаимодействия с пользователями, всплывающую контактную форму для сайта. Вам остается только посмотреть живой пример, при желании скачать исходники и прикрутить к форме свой php-обработчик.

В архиве с исходниками, вы найдете все необходимое и еще парочку вариантов фоновых изображений для формы.

Обновление от 21.05.2017
В архив с исходниками добавил папку «mail», в которой вы найдёте простейший php-обработчик для формы и файл конфигураций, для настройки. Обработчик привязан к данной форме, небольшая инструкция и комментарии прописанные непосредственно в коде файлов обработчика, надеюсь, помогут разобраться что, куда и зачем.

С Уважением, Андрей

Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .

Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.

UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)

UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится

Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.

Форма обратной связи php — структура

Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)

После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:

image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
index.html — индексный файл нашего одностраничника
index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)

Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php

Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)

Исходный код вызова формы и обработчика

Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Заказать обратный звонок Заказажите обратный звонок

Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

С вами свяжутся

С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

Проверка работоспособности формы

Вызываем окно и вводим данные для тестовой проверки нашей формы

Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи

У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.

Здравствуйте, уважаемые читатели a! В этом уроке я покажу, как мы можем сделать форму e-mail подписки на HTML5 с проверкой введенного адреса на JQuery. Для проверки будем использовать регулярные выражения, а сохранять введенный адрес будем в базе данных MySql. Таким образом при сохранении будет использован AJAX (т.е. вызовем PHP сценарий без перезагрузки страницы). Результат можно посмотреть на демонстрационной странице, а также скачать исходники. Приступаем!

Базовая разметка

Начнем с создания нового файла index.html . И сделаем простую структуру документа придерживаясь HTML5. Также сразу подключим стили CSS и библиотеку , она нам понадобится при проверке введенного e-mail:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Форма e-mail подписки с валидатором на jQuery

Теперь все готово для создания формы!

Форма e-mail подписки

Цель нашей формы, это проверить введенный адрес электронной почты посетителя и как-то сохранить его в список подписчиков. Для этого делаем обычную форму с кнопкой, по нажатию на которую адрес обрабатывается и сохраняется в базе или в файл кому как удобно. В уроке рассмотрим же сохранение в бузу данных. Так будет более наглядней, упор сделаем на проверку правильности введенного адреса. Вот таким образом выглядит форма подписки:

1
2
3
4
5
6
7
8
9

Завернем форму в блок div #completeform , для того чтобы после сохранения адреса можно, форму можно было свернуть.

Также используем пару новых атрибутов в поле ввода. Тип поля установлен «email» , так что мобильные браузеры могут отображать соответствующую клавиатуру. Chrome и некоторые WebKit браузеры будет использовать это, чтобы проверить, ввел ли пользователь адрес. Атрибуты autocorrect и autocapitalize предназначены специально для мобильных браузеров.

Span с id error изначально скрыт, за что отвечает свойство display со значением none , это у нас прописано в файле со стилями, о нем чуть позже. Но как только пользователь ввел неверный адрес почты в span выводится сообщение с предупреждением.

Валидатор jQuery и AJAX запрос

Давайте начнем с простой функции проверки адреса электронной почты. Используем строку регулярных выражений для проверки, если текстовая строка соответствует стандартному синтаксису электронной почты, то возвращаем булево значение true иначе false.

Разберемся с функцией completeInviteForm() . Чтобы форма ввода адреса не сбивала с толку, свернем эффектом fadeOut в течении 400 миллисекунд. А в качестве обратного вызова, обратимся к функции $.ajax() , с ее помощью вызовем файл save.php и сохраним введенный адрес в базу. Исходный код файла save.php приведу чуть ниже, а пока разберемся с функцией $.ajax() .

$.ajax — загружает удаленную страницу используя HTTP запрос. В качестве аргумента функции $.ajax() передается объект, состоящий из пар ключ/значение, которые используются для инициализации и управления запросом. В нашем случаем будем использовать следующие объекты:

type:’POST’ — выбираем тип запроса к файлу, по умолчанию GET , разница между POST и GET не особо большая, просто при GET-запросе данные передаются в заголовке а при POST в теле запроса, поэтому с помощью POST можно передать больший объем информации;
url:’save.php’ — путь до исполняемого файла;
data:’email=’+$(«#email»).val() — данные которые отсылаются на сервер. С помощью CSS селектора #email обратимся к элементу с id=»email» и получим содержимое атрибута value, то есть введенные пользователем email. И присвоим это содержимое переменной email , которую будем использовать в файле save.php ;
success: function(){ $(‘#completeform’).before(‘Все готово! Вы добавлены в список рассылки. ‘);} — функция success вызывается при удачном выполнении ajax запроса. Функция выполняет следующие действие. Перед дивом #completeform вставляем контент, оповещающий пользователя, что его email был добавлен в список рассылки.

1
2
3
4
5
6
7
8
9
10
11
12

А с помощью метода setTimeout скрытие формы и выполнение ajax-запроса происходит асинхронно с задержкой 1100 миллисекунд.

Обработка формы

Для удобства обращения к элементам страницы, создадим пару переменных, с селекторами #error и #btnwrap .

var erdiv = $("#error" ) ;
var btnwrap = $("#btnwrap" ) ;

С помощью обработчика событий live отслеживаем нажатие на кнопку «Подписаться» ее id=»sendbtn» . Метод e.preventDefault(); отменяет стандартное поведение браузера на действие (нажатие на кнопку), а именно отменяем обновление страницы и изменение URL. Переменной emailval присваиваем введенный email, и можем приступать к обработке этой переменной.

Первое if if(!isEmail(emailval)) проверяет если функция isEmail вернула ложь (false), то это означает, введенный пользователем электронный адрес не совпадают с регулярным выражением то есть не верный, оповестим пользователя об этом в блок error выводим сообщение (Вы не правильно ввели адрес электронной почты).

Теперь второе if выполняется только в том случае, если пользователь ввел верный электронный адрес. Тогда мы можем начать процесс сохранения адреса.

Чтобы процесс был наглядным в блок error вставляем соответствующий текст, а в блок где находилась кнопка «Подписаться» помещаем GIF изображение. И вызываем функцию completeInviteForm() , которую мы рассмотрели выше.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail(emailval) ) {
erdiv.html ("Вы не правильно ввели адрес электронной почты" ) ;
erdiv.css ("display" , "block" ) ;
}
if (isEmail(emailval) ) {
erdiv.css ("color" , "#719dc8" ) ;
erdiv.html ("обработка..." ) ;
(completeInviteForm() , 900 ) ;
}
} ) ;
} ) ;

База данных

Так как я выбрал способ сохранение в базу данных введенного адреса, то коротко расскажу о создании самой базы и таблицы, а также как и обещал код файла save.php , который и работает с базой данных MySql.

Для этого нам понадобится локальный сервер, я использую Denwer . Наверняка многие им пользуются, поэтому вдаваться в подробности не буду. Переходим phpMyAdmin , и создаем базу данных email :

Для сохранения адресов подписчиков нам понадобится одна таблица с двумя полями, назовем ее address :

Поля будут следующие:

id — идентификатор электронного адреса (он же первичный ключ);
address — непосредственно сам электронный адрес.

Файл save.php

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

1
2
3
4
5
6

Сначала проверяем существует ли в глобальном массиве POST переменная email, если да то присваиваем ее значение локальной переменной $email . Далее устанавливаем соединение с сервером mysql_connect() пользователь root, пароля нет. Выбираем базу данных email и выполняем запрос к базе, вставляем новую запись в таблицу address, где в поля address будет вставлено значение переменной $email . Вот и все!

На этом урок заканчиваю. Хочу напомнить, что данная подписка работает только на сервере (так как мы используем базу и ).

Обработка формы в модальном окне. Простая форма связи на Ajax. Отправить нам сообщение

Последние

Это нужно знать