Скрипт формы заказа для html. Идеальная форма заказов для интернет-магазина. Для доставки курьером можно выбрать удобное время

Вся установка и настройка производится буквально в пять шагов:
1. скачать архив;
2. распаковать два файла скрипта и отредактировать их в соответствии с данной инструкцией;
3. добавить в код Вашего сайта строку подключения скрипта и настроить вызов формы;
4. разместить скрипт на Вашем сервере;
5. проверить работу формы на Вашем сайте.

Теперь все это подробнее.

По ссылке на сайте скачиваете архив с последней версией скрипта. В архиве находятся два файла:
- файл takeorder.php (помещаете в корневой папке сайта);
- файл takeorder.js (помещаете в папку, где находятся все ява скрипты вашего сайта. Обычно это папка js).

Настройка скрипта TakeOrder.

Прежде всего нам необходимо, чтобы сообщения приходили на заданные e-mail адреса. Для этого открываем файл takeorder.php в редакторе кода и вносим исправления в следующие строки.

// емайл администратора
define ("EMAIL1 ","[email protected] ");

// емайл аутсорсинга
define ("EMAIL2 ","[email protected] ");

// header - подпись, от кого письмо
define ("HEADER ","Иванов Иван ");

// subject
define ("SUBJECT ","Новый заказ наложенным платежом. Иванов Иван ");

Вместо [email protected] необходимо указать свои адреса. Если оставить значение по умолчанию, [email protected] , то письма не высылаются.
В сообщении, приходящем на адрес администратора, кроме информации от клиента дополнительно указан url, с которого был осуществлен переход на страницу заказа. Это особенно удобно при использовании UTM-меток.

Исправляем тему сообщения. Подпись - от кого пришло письмо.

Заказываемый товар указывается в виде массива. Это может быть разный товар продаваемый с одной страницы сайта или разные варианты одного товара, разные цены, комплектация... Индекс массива используется при привязке кнопки вызова формы товара. Указывается цена, наименование товара.

// список товара в формате массива:
$tovar = array ("1990 ","Часы Clock ");
$tovar = array ("2990 ","Часы Clock 2 ");

Сохраняем изменения.

Открываем файл takeorder.js . Здесь переменные minName , minPhone и minMail устанавливают минимальное количество знаков для полей с именем клиента, его телефоном и адресом соответственно. Значение 0 отменяет проверку. yandexKod и yandexCel - это номер счетчика и название цели для Яндекс.Метрики. Переменные topF и leftF задают отступ формы от верхнего левого угла экрана. Остальные поля - это все надписи на форме. При желании их можно поменять на свои.

Подключение скрипта.

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

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

Если библиотека не подключена, добавьте вышеуказанную строку в код. Я рекомендую подключать скрипт в самом низу html кода.
Сразу после библиотеки jQuery подключаете сам скрипт. Для этого вставьте всего одну строку:

Убедитесь, что путь к скрипту (в примере подчеркнуто) указан верно.

Всё, скрипт подключен. Правда, просто?

Осталось привязать вызов формы заказа к кнопке «ЗАКАЗАТЬ» на Вашем сайте. Для этого находим в коде на сайте кнопку или ссылку, при клике по которой должна вызываться форма заказа. Необходимо присвоить этим элементам класс takeOrder .
Также надо указать какой именно товар будет заказываться при нажатии на эту кнопку. Для этого добавляется атрибут data-to со значением равным индексу ячейки массива с нужным товаром

ЗАКАЗАТЬ

И для кнопки. Если элементу уже присвоен класс, то добавляем новый через пробел.

Поздравляю! Скрипт установлен, и вызов формы привязан. Можно перезагрузить страницу и проверить.

P.S. Маленький секрет.) Если кнопке или ссылке вызывающей форму добавить атрибут data-off="2" , то форма будет выводиться только с одним полем, первым. Чтоб форма принимала два значения надо отключить вывод последнего поля. Для этого установите data-off="1" . То есть при необходимости можно вызывать форму с разным количеством полей настроив по разному ссылки или кнопки вызова.

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

На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.

Создание формы обратной связи – html разметка

Обычно мне хватает трех полей, и в большинстве случаев, я использую такую разметку для создания контактной формы:

Получить прайс

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

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


Создание формы обратной связи — css разметка

Давайте зададим стили нашей форме и приведем ее к читабельному виду:

/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }

Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:

Transition: .6s;

Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:

Создание формы обратной связи — php разметка

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

Структура у него, как у обычного html файла, это может быть страничка, на которой вы напишите «Спасибо, ваша заявка принята. После обработки заявки наши менеджеры свяжутся с вами»

То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.