html код контакты для сайта
Оформление блока контактов для сайта
Также пропишем время работы офиса и склада, где закрепим к этому электронную почту, для того чтоб можно было как можно быстро связаться. Вообще все те гаджеты, где как можно быстрее можно связаться, ведь есть еще и обратная связь, но там все работает через электронную почту, где для этого как раз создается этот небольшой блок с официальной информацией.
Но и безусловно остается телефон, и здесь он может идти не один, что для всего места хватит. Но теперь нужно решить, где все это установить. Ведь если все по умолчанию оставить, то такой стиль дизайна на низ сайта просто не поместится, что просто делаем меньше знаки, а кому-то вообще нужно только телефон оставить.
Так изначально будет после установки выглядеть:
Можно самостоятельно все перестроить, как пример здесь идет так:
Приступаем к установке:
Здесь присутствуют шрифтовые иконки, если кто не подключил, то в CSS в самый вверх прописываем стиль под них, это для того, чтоб все знаки выводило.
Код простой формы обратной связи для сайта на HTML и PHP
Рассмотрим пример легкой и быстрой формы обратной связи для сайта написанной на html и php.
Почему используется HTML и PHP?
Форма связи на HTML просто вставляется в админке Joomla, WordPress, OpenCart, ModX, а если ваш сайт самонаписный или вы используете любой фреймворк на PHP, то использовать представленный код не составит труда и сайт будет загружаться так же быстро как и раньше.
Структура кода реализации обратной связи для сайта
Далее приведен алгоритм работы обратной связи:
В коде HTML содержится содержится информация, какие поля для ввода нужно заполнять, какие из них обязательны для заполнения, и подписи к ним. Стили CSS отвечает за визуальное оформление формы и отображение данных. При нажатии на кнопку «Отправить» выполняется PHP скрипт на сервере через POST запрос, который отправляет письмо или выполняет иное действие. Скачать исходники можно в конце статьи, а подробнее исходный код формы обратной связи разберем далее.
Код формы обратной связи на HTML
Вначале приведем исходный код простой формы обратной связи для сайта на HTML:
Рассмотрим атрибуты формы
Далее внутри тега находится контейнер
Обратите внимание, что имена полей формы должны быть уникальны на странице, так как через них передаются параметры формы. Различные трюки и фишки, связанные полями формы будут раскрыты в другой статье, которая сейчас готовится к выходу.
Отправка письма PHP скриптом
Приведем код простого скрипта для отправки письма
Простой скрипт обработки данных формы HTML в PHP скрипте
Приведем сначала исходный код:
проверяем или используется метод POST
Далее проверяем или были высланы данные с полей ввода
Функция strip_tags() удаляет HTML и PHP теги из строки. Делается для котого что бы злоумышленники не могли запустить свой код через форму связи.
Оформление формы обратного звонка для сайта CSS
Приведем код CSS оформления для формы обратной связи сайта.
Разберем подробнее код.
Подпись и поле ввода обернуты в контейнер div :
Для этого дива присвоим отступы сверху и снизу:
Кнопке «Отправить» делаем ширину равной ширине родительского блока и box-sizing присваиваем border-box — расчет ширины по границе, что бы она не выходила за пределы родительского блока:
Аналогично для подписей и полей ввода:
Настраиваем красивый внешний вид подписей и полей ввода:
Звездочку делаем красной:
Оформляем кнопку «Отправить» :
При наведении на кнопку настраиваем изменение цвета:
Скачать исходный код формы обратной связи
Для обучения вы можете скачать здесь исходные файлы примеров приведенные выше. Этот пример скорее для изучения и понимания как работает форма обратной связи на HTML в связке с PHP, а полноценный, рабочий пример будет выложен позже в другой статье.
Создание контактной формы для сайта
Дата публикации: 2010-11-24
От автора: Мы часто сталкиваемся с контактными формами, будь то обычный сайт или, скажем, WordPress. Формы могут быть совершенно разными, всё зависит от Вас и от пожеланий клиента). В этом посте я наглядно покажу всю «анатомию» создания контактной формы для сайта средствами HTML и PHP.
Перед тем, как мы приступим к создания контактной формы для сайта, я Вам рекомендую просмотреть демо-результат работы.
Первым делом мы должны определить место, где будет наша форма. Помещать всё её содержимое мы будем между тегами:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Атрибут action указывает, в какой файл пойдут данные при нажатии кнопки «Отправить». Значит, второе, что мы создадим mail.php.
Метод передачи выбираем POST — то есть данные передадутся внутри тела запроса, а не через адресную строку.
Рассмотрим этот код и попробуем его модифицировать.
Для того, чтобы наша форма работала, необходимо добавить php-функции. Используем функцию $_POST для перевода значений из полей input в переменные:
К примеру, у нас есть:
Дальше функцией $_POST захватываем значение атрибута name — email и преобразуем в переменную $email:
Переменная $recipient задаёт тот адрес, на который отправятся данные. Ну а функция mail отправляет данные на почту.
Теперь перед нами стоит задача продвинуться вперёд, я покажу, как можно добавить выпадающий список, и как добавить радио — кнопки.
Выпадающий список
Для создания выпадающего меню, нам потребуется вставить код в HTML, и подкрепить его PHP.
HTML:
Атрибут size указывает, сколько вариантов ответа будет показываться за раз. Чаще всего это 1.
А вот и модифицированный код PHP, с учётом нашего выпадающего бокса:
Мы видим, что добавилась $dropdown.
Флажки и Радио-кнопки
Рассмотрим HTML-код флажков.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Обратите внимание на квадратные скобки в параметре name — они обеспечивают возможность выбора нескольких значений. Иногда используются просто разные имена.
Что касается кнопок — переключателей (radio), то мы можем добавить такой пример:
Необходим ли телефонный звонок?:
Здесь имя одинаковое, но разные значение value.
И опять, полный HTML:
Дополняем наш обработчик переменными, которые потребуются для отправки письма:
Любую из этих переменных можно дополнить различной полезной информацией. Я добавил имя пользователя в $subject, которая отвечает за тему письма.
Вы, например, можете в $mailheader добавить адрес Вашей организации, телефоны и т.п.
И напоследок — поработаем с почтой.
3 способа. Как сделать форму обратной связи на html?
Существует несколько способов реализовать данную фичу у себя. Их можно поделить по уровню сложности, а так же по требованиям от хостинга.
Способ №1. Форма обратной связи html + php.
Данный способ подойдет вам, если необходимо максимально расширяемое решение. Данную форму можно сделать какую угодно. Запрашивать любые данные у пользователей, которые вам необходимы. Можно сделать отправку файлов, капчу, отправку фото, адресов страниц от куда была совершена отправка и многое, многое другое.
Для данной формы вам потребуется:
Начнем с создания PHP файла который будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение.
Далее давай те напишем HTML код формы
Ну и конечно же файл CSS, что-бы все облагородить)
Вот, что получилось в итоге.
Способ №2. Сервис для формы обратной связи.
Сервисов форм достаточно много, мы разберем форму от яндекса. Сервис позволяет составить свою форму практически с любыми полями. Настроить тему, почту, уведомления. А так-же, все это, можно сделать без знаний программирования так как у таких сервисов есть конструктор, с помощью которого можно собрать все визуально, перетаскивая блоки и настраивая параметры.
Для данного способа вам понадобиться:
У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.
Я собрал вот такую форму на сервисе Яндекса.
Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту
После составления формы, нужно лишь скопировать полученный по кнопке «поделиться» код и вставить в нужное место на странице вашего сайта.
Способ №3. Ссылка для отправки email.
Самый простой способ реализовать связь разработчика и пользователя. Оставить свою почту на сайте. Но мы ведь любим упрощать жизнь пользователям. Поэтому разместим не просто адрес, а ссылку адрес. Выглядит такая ссылка вот так:
Такую ссылку можно усложнить и задать сразу еще и тему к примеру
При клике по такой ссылке, пользователь перейдет в клиент электронной почты и сможет отправить вам сообщение. Также саму ссылку можно украсить с помощью CSS стилей, но это уже совсем другая история.
УЧЕБНЫЕ МАТЕРИАЛЫ
Web-верстка, компьютерная графика,
мультимедиа
Создание сайта на HTML5
Авторы учебного курса:
Боголепов Михаил Михайлович,
студент гр. ЗКТ-617 ФГАОУ ВО «РГППУ.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ
Урок 6. Создание страницы «Контакты»
Цель: ознакомиться с API геолокации.
Задачи:
– Научиться добавлять Google-карту на веб-страницу.
– Научиться изменять координаты.
– Научиться искать местоположение.
В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 6.1):
Создание страницы «Контакты».
В начале шестого урока вы создадите страницу contact.html, которая будет являться страницей «Контакты» сайта.
В этом упражнении вы создадите веб-страницу «Контакты».
– Запустите Visual Studio Code. Автоматически должен открыться ваш проект. Если этого не произошло, то воспользуйтесь первым уроком и откройте проект.
– Кликните на файл design.html правой кнопкой мыши и выберите пункт «Копировать».
– Кликните правой кнопкой мыши в пустой области под файлом design.html и выберите в открывшемся меню пункт «Вставить».
– Кликните на появившийся файл design copy.html правой кнопкой мыши и выберите в открывшемся меню пункт «Переименовать».
– Задайте имя файла contact.html и нажмите кнопку «Enter».
В результате выполнения всех пунктов упражнения у вас должен появиться в списке файлов, файл contact.html, а так же он должен быть открыт в рабочей области Visual Studio Code (рисунок 6.2).
Оформление страницы «Контакты».
В этом упражнении вы укажите, что contact.html это страница «Контакты».
– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Контакты» (рисунок 6.3).
Добавление заголовка страницы.
В этом упражнении вы добавите заголовок страницы.
– Для того, чтобы у контента сайта были отступы по сторонам оберните контентную часть страницы в div «featured» (рисунок 6.4).
– Добавьте заголовок «Контакты» заключив его в теги h3 (рисунок 6.5).
– Результат добавления заголовка виден на рисунке 6.6.
Добавление текста.
В этом упражнении вы добавите текст на страницу
– Удалите абзац «контент».
– Добавьте текст из файла contact.txt который находится в папке work_files.
– Добавьте теги переноса строки br (рисунок 6.1).
Добавление карты.
В данном упражнении вы добавите карту Google Карты.
– Откройте Google Карты в браузере https://www.google.com/maps (рисунок 6.8).
– Нажмите на значок меню «Бутерброд» в левом верхнем углу экрана.
– Выберите пункт Ссылка/код (рисунок 6.10).
– В верхней части появившегося окна откройте вкладку Код.
– Выберите размер карты. Затем скопируйте текст в поле и вставьте его в contact.html, после текста (рисунок 6.12).
Добавление формы обратного звонка.
В этом упражнении вы форму для звонка компании клиенту.
– После тега закрывающего ссылку на увеличенную карту добавьте пустой тег div (рисунок 6.13).
– Между тегами div добавьте тег form с атрибутами «id=»form2″ action=»/» method=»post» role=»form» onsubmit=» return submitForm();»» (рисунок 6.14).
– После тега form добавьте тег label с атрибутом for=»name» и названием «Введите Ваше имя» (рисунок 6.15).
– После тега label вставьте тег input с атрибутами «id=»name» name=»name» size=»15″ type=»text» Placeholder=»Алексей» title=»Имя» required» (рисунок 6.16).
– Добавьте тег label с аттрибутом for=»tel» и названием «Введите номер телефона».
– Добавьте тег input с атрибутами «id=»tel» name=»tel» size=»11″ type=»text» Placeholder=»+71234567890″ required» (рисунок 6.17).
– Ниже добавьте тег button с атрибутом type=»submit» и текстом на кнопке «Заказать звонок» (рисунок 6.18). Формы добавлены. (рисунок 6.19)
В результате выполнения всех упражнений у вас получилась страница «Контакты», на которой есть абзацы текста, карта, формы (рисунок 6.20).
Контрольные вопросы
1. Какой сервис по добавлению карты на сайт был использован в уроке?
2. Какой тег использовался для втсавки карты на сайт?
3. Какой тип формы используется для написания в нем номера телефона?