Скрипты на сайт

Как вставить яндекс карту на сайт + настройка

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

Вставить яндекс карту на сайт очень просто, но главный здесь момент - её настройка. Ведь необходимо добавить в нужные места метки, заменить их своими иконками, которые заказчик обязательно попросит. Убрать и добавить какие то кнопки. Изменить поведение (например, что бы карта не масштабировалась колёсиком мыши, или не перематывалась при касании пальцем по сенсорному экрану смартфона).

Далее...

Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация

Рубрика: Скрипты на сайт;
Метки: email | php

Привет ребята. На связи Серёга. Знаю, что давно не писал - дела, дела... Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого - Кротова Романа.

Создавать форму обратной связи для сайта мы будем последовательно. Поэтому эта статья будет разбита на 3 урока.

В первом видео - мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

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

Ну и в третьей (урок готовится - позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.

Видео 1. Создание формы обратной связи для сайта.

Обращаю внимание! Что бы форма заработала - необходимо, что бы ваш хостинг поддерживал 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-документа и всего одна строчка текста.

Видео 2. Ajax - отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

Ребята, решил что не буду публиковать код формы обратной связи. Какой смысл в этом, если есть ссылка на оригинал автора??

Скачать архив со скриптом

Видео 3. Валидация - проверка формы на правильность заполнения.

Скачать архив со скриптом

Отличный адаптивый слайдер для сайта.

Слайдеры всякие нужны, слайдеры всякие важны. Особенно, если применять их с умом.

Привет друзья! Сегодня я хочу подарить вам 3 видео урока, в которых мы познакомимся с замечательным скриптом Slick.js

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

Далее...

WOW.js + Animate.css – скрипт анимации для сайта

Рубрика: Скрипты на сайт -> Секреты верстки;

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

WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.

Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.

Далее...

PHP для начинающих - видеокурс

Рубрика: Скрипты на сайт;

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

И так - встречайте... Видеокурс "PHP для начинающих". Как обычно, если вам "влом" читать мою скучную писанину - мотайте страницу сразу в низ и приступайте к обучению, мы подготовили лучшие видео уроки php для начинающих.

Далее...