webdonsk.ruКак сделать чтобы по нажатию кнопки открывалась форма php
Добавил пользователь Дмитрий К. Обновлено: 10.09.2024
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript'ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1. Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
- images - папка, где хранятся все изображения нашей формы;
- index.html - главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
- contact.html - файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
- send.php - файл-обработчик, занимающийся отправкой письма;
- jquery.js - основной фреймворк jQuery;
- style.css - файл с каскадными таблицами стилей для нашей формы.
Шаг 2. Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
HTML:
Шаг 3. Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 4. Обработчик, отвечающий за отправку писем
Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше.
Шаг 5. "Прикрутка" основного фреймворка jQuery
Теперь, как и в любом уроке по jQuery мы должны "прикрутить" основной фреймворк jQuery. Для этого вернемся немного назад, туда , где располагается наша кнопка, и между тегами и вставим следующий код:
Шаг 6. Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Шаг 7. jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
jQuery
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
С искренним уважением Ваш jQuery - проводник - М. К.
5 последних уроков рубрики "Для сайта"
Эффекты блочного раскрытия
Сегодня мы хотели бы поделиться несколькими идеями касающегося эффекта блочного раскрытия, которую вы можете использовать для своих проектов.
15 полезных .htaccess сниппета для сайта на WordPress
Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.
20 бесплатных тем для WordPress в стиле Material Design
Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.
20 сайтов с креативным MouseOver эффектом
Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.
45+ бесплатных материалов для веб дизайнеров за август 2016
Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.
Прежде чем кто-то пойдет на меня или отметит это, я просмотрел по всему Интернету, чтобы узнать, как это сделать (включая тот же вопрос о stackoverflow). Я новичок, и мне очень сложно изучать новые концепции, поэтому, пожалуйста, будьте спокойны.
То, что я хочу сделать, это вызвать скрипт / функцию php при нажатии кнопки. У меня это работает в WAMP, если это помогает. Вот мой код:
the_script.php имеет это в нем:
Почему это не работает? Я слышал, что кнопка является клиентской стороной и т. Д., А PHP – серверной, что означает, что вы не можете связать эти два. Я знаю, что вы должны использовать AJAX для выполнения этой работы, однако я совершенно не знаю, как это сделать. Я пробовал использовать его в Google и т. Д., Но ничего не могу найти. Я знаю, как использовать AJAX и вызывать события с ним, однако я до сих пор не знаю, как заставить его вызывать скрипт PHP.
Можете ли вы, пожалуйста, сделать свои ответы максимально ясными и простыми, я новичок в этом
Спасибо за помощь ?
По какой-то причине, где бы я ни пошел, каждый код отличается. То, как меня учили, AJAX выглядит совершенно по-другому. Можете ли вы написать это так, чтобы я мог понять? Спасибо, вот пример:
Сегодня вы узнаете, как сделать всплывающую форму на CSS+JS, чтобы она появлялась и исчезала при клике на кнопку. По такому же принципу вместо всплывающей формы, можно сделать всплывающее окно с любым кодом, поскольку сначала мы прописываем тег div, который может служить контейнером и для любых других элементов, а не только формы.
Не знаю как у вас, но у меня такая навязчивость, вызывает протест, если не сказать хуже. В большинстве случаем, я просто закрываю сайт.
Не унижайте ваших посетителей, позвольте им самим решать, заполнять форму или нет.
Демонстрация всплывающей формы
HTML структура
Ниже код кнопки, кликнув по которой, откроется форма подписки, за это отвечает атрибут onclick и событие openForm.
CSS код
Код ниже, фиксирует кнопку, открывающую форму в определенном месте – в правом и нижнем углу браузера.
.open-button position: fixed;
bottom: 22px;
right: 26px;
width: 290px;
.. >
По умолчанию, всплывающая форма спрятана.
.form-popup display: none;
position: fixed;
bottom: 0;
right: 14px;
>
Стили для контейнера формы, тот самый div, куда можно помещать любые веб-элементы.
Оба текстовых поля должны по ширине занимать 100% относительно контейнера.
.form-container input[type=text], .form-container input[type=password] width: 100%;
..
>
Когда поля формы в фокусе, то пусть меняют свой цвет. В фокусе – это значит в этот момент пользователь начинает взаимодействовать с формой.
Меняем цвет для кнопки Закрыть.
Делаем для всех кнопок эффект при наведении – полная непрозрачность.
.form-container .btn:hover, .open-button:hover opacity: 1;
>
JS код
Оба значения display, скрипт берет их стилей, а события openForm / closeForm, прописаны в тегах button.
Данная статья, только отвечает на вопрос, как сделать всплывающую форму, без отправки данных на сервер.
На CodePen вы можете увидеть весь код всплывающей формы, который можно скачать и использовать в своих проекта.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 1 ):
Форма отправит данные в файл обработки. Как это будет выглядеть визуально? Что станет с вплывшим окном?
Формы используют для отправки какой-либо информации на сервер, которую необходимо как-то обработать.
Места использования форм:
- Создание регистрации и авторизации
- Создание блока комментариев
- Создание обращения в техническую поддержку (тикеты)
Создаём форму на HTML
Код формы необходимо помещать в HTML документа.
Я пропущу скелет документа дальше, чтобы было более понятно.
В атрибут action нужно указать обработчик формы (PHP-скрипт). Если поле пусто, значит, обработку формы выполнил тот скрипт, в котором расположена сама форма. В атрибут method нужно указать метод отправки формы (post или get). У каждого свои плюсы и минусы. Вкратце: post отправляет данные так, что пользователь не может их увидеть, а get — так, что они видны в URL-строке браузера.
Наглядный пример get:
Наглядный пример post:
Немного по PHP:
При отправке формы методом POST данные записываются в суперглобальный массив $_POST.
При отправке формы методом GET данные записываются в суперглобальный массив $_GET.
К суперглобальным массивам $_POST и $_GET нужно обращаться обычным способом (как вы делаете это и с обычными ассоциативными массивами) $массив['ключ'].
В форме мы сделали 3 . Первые два — поле ввода логина и пароля. Третий — кнопка отправки формы.
Тег имеет атрибут type="". Для каждого случая указывают свой тип ввода. Допустим, text устанавливают для текста, submit — для отправки формы по атрибуту (action), а password — для пароля (чтобы он отображался звёздочками *).
Кроме того, тег имеет атрибут name="" и атрибут value="". Value — стандартное значение элемента, name — предназначено для того, чтобы обработчик формы мог его идентифицировать.
Создаём обработчика формы
Мы перешли к самому интересному моменту статьи. Если мы обрабатываем форму на другой странице (action="example.php"), то после нажатия кнопки подтверждения вас перекинет на указанную страницу.
Если action пуст, то страница с формой перезагрузится.
В самом верху скелета документа (перед ) открываем теги PHP и обрабатываем форму:
В самом верху PHP-тега заводим 2 новые переменные, которые по стандарту пусты:
В проверке на пароль:
В проверке на логин:
В форме HTML:
Добавляем после тега вставку PHP (в данном случае ), так как мы только выводим переменную. Суть проста: если ошибки в логине нет, тогда $error_login пуст, а следственно, ничего не выводится, иначе выводим там ошибку.
Теперь доработаем форму, чтобы она сохраняла значения полей.
В самом начале добавляем 2 переменные:
То есть мы заносим в переменные значения из суперглобального массива $_POST.
И немного изменяем нашу HTML-форму:
Заключение
Как видите, создать хорошую форму на PHP не так уж и сложно. Проверки, которые я показал в этой статье, не обязательно должны быть. Вы можете придумывать свои (любые) проверки на поля ввода, используя PHP. Надеюсь, что вам понравилась моя статья, и вы выучили что-то новое.
Читайте также: