Вставить яндекс карту на сайт очень просто, но главный здесь момент - её настройка. Ведь необходимо добавить в нужные места метки, заменить их своими иконками, которые заказчик обязательно попросит. Убрать и добавить какие то кнопки. Изменить поведение (например, что бы карта не масштабировалась колёсиком мыши, или не перематывалась при касании пальцем по сенсорному экрану смартфона).
Обсудить]]>Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.
В первом видео - мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.
Во второй части Рома, покажет Вам как сделать Ajax-загрузку. То есть отправлять данные с формы без перезагрузки странички. Что, согласитесь, весьма удобно и современно.
Ну и в третьей (урок готовится - позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.
Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал PHP.
Если у вас возникнут вопросы касательно непонятных моментов в написании обработчика формы для отправки писем - не стесняйтесь, задавайте их в комментариях.
Вот что получилось в итоге в файле index.php
Напоминаю, что в нём содержится простенькая форма обратной связи. Без оформления и прочих прибамбасов. Что бы не нагружать Вас лишней информацией.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form action="/testform/submit.php" method="POST">
<input name="email" placeholder="Email">
<input name="name" placeholder="Имя">
<input name="phone" placeholder="Телефон">
<textarea name="message" placeholder="Сообщение"></textarea>
<input type="submit" value="Отправить сообщение">
</form>
</body>
</html>
Содержимое файла submit.php:
Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё "гуд" - письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.
if (!empty($_POST['name']) AND !empty($_POST['email']) AND !empty($_POST['message']))
{
$headers = 'From: Кротов Роман
' .
'Reply-To: [email protected]
' .
'X-Mailer: PHP/' . phpversion();
$theme = "Новое сообщение с сайта";
$letter = "Данные сообщения:";
$letter .="
";
$letter .="Имя: ".$_POST['name'];
$letter .="
Email: ".$_POST['email'];
$letter .="
Телефон: ".$_POST['phone'];
$letter .="
Сообщение: ".$_POST['message'];
if (mail("[email protected]", $theme, $letter, $headers)){
header("Location: /testform/thankyou.php");
} else {
header("Location: /testform");
}
} else {
header("Location: /testform");
}
Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.
Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).
Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??
Привет друзья! Сегодня я хочу подарить вам 3 видео урока, в которых мы познакомимся с замечательным скриптом Slick.js
Этот скрипт поможет создать на вашем сайте продвинутый адаптивный слайдер. Прямо из коробки на борту идёт множество полезных настроек, которые помогут вам подкрутить этот скрипт практически под любые нужды.
Обсудить]]>WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.
Обсудить]]>И так - встречайте... Видеокурс "PHP для начинающих". Как обычно, если вам "влом" читать мою скучную писанину - мотайте страницу сразу в низ и приступайте к обучению, мы подготовили лучшие видео уроки php для начинающих.
Обсудить]]>Как Вам такая идея?
В прошлой статье мы поговорили о сервисах сокращения ссылок, выяснили все плюсы и минусы этих сервисов - ну а теперь наступила очередь прокачать по полной Ваш сайт!
Ну что же? Тянуть не будем!
Сайт как сайт… Но он привлек мое внимание одним интересным элементом. В его шапке болталась красивая табличка. При наведении на нее – она раскачивалась еще больше
В общем – мне стало интересно. И я решил выдрать ее с сайта. Разложить все по полочкам. А затем уже – поделиться своими открытиями с вами, мои дорогие друзья.
Что у меня получилось – можете посмотреть нажав на кнопку ниже:
Обсудить]]>