как сделать форму заказа на сайте

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

Одной из самых востребованных функций на сайте является форма заявки или заказа, данные из которой отправляются на почту владельцу сайта. Как правило такие формы являются простыми и состоят из двух трех полей для ввода данных. Как же создать такую форму заказа? Здесь потребуется использование языка разметки HTML и языка программирования PHP.

Язык разметки HTML сам по себе несложен, нужно всего лишь разобраться в том как и где ставить те или иные теги. С языком программирования PHP все немного сложнее.

Для программиста создать такую форму не составит труда, а вот HTML верстальщику может показаться сложным некоторые действия.

Создаем форму отправки данных в html

На этом этапе нужно создать файл form.php, в него добавить html код формы. Подробности о каждом элементе формы читайте в статье Как сделать форму в HTML для сайта.

Первая строка будет следующей

Теперь соберем все вместе.

Теперь сделаем так, чтобы поля в форме стали обязательными для заполнения. Имеем следующий код:

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

$fio = $_POST[‘fio’];
$email = $_POST[’email’];

Перед названиями переменных в php ставиться знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.

Первая функция преобразует все символы, которые пользователь попытается добавить в форму:

$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);

При этом новые переменные в php не создаются, а используются уже имеющиеся. Что сделает фильтр, он преобразует символ » $fio = urldecode($fio);
$email = urldecode($email);

Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:

$fio = trim($fio);
$email = trim($email);

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

Проверка данных, передаваемых от HTML формы в файл PHP

Для того, чотбы проверить, работает ли этот код, передаются ли данные можно просто их вывести на экран при помощи функции echo:

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

Отправляем полученные данные из формы HTML на почту при помощи PHP

Для отправки данных на почту нужно воспользоваться функцией mail в PHP.

mail(«на какой адрес отправить», «тема письма», «Сообщение (тело письма)»,»From: с какого email отправляется письмо \r\n»);

Например, нужно отправить данные на email владельца сайта или менеджера example@mail.ru.

Тема письма должна быть понятной, а сообщение пьсма должно содержать то, что указал пользователь в HTML форме.

mail(«example@mail.ru», «Заявка с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»);

Необходимо добавить условие, которе проверит отправилась ли форма при помощи PHP на указанные адрес электронной почты.

if (mail(«example@mail.ru», «Заказ с сайта», «ФИО:».$fio.». E-mail: «.$email ,»From: example2@mail.ru \r\n»))
<
echo «сообщение успешно отправлено»;
> else <
echo «при отправке сообщения возникли ошибки»;
>

Таким образом программный код файла send.php, который отправит данные HTML формы на почту будет выглядеть следующим образом:

Три строки для проверки, передаются ли данные в файл закомментированы. При необходимости их можно удалить, так как они нужны были только для отладки.

Помещаем HTML и PHP код отправки формы в один файл

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

ЧИТАЙТЕ ТАКЖЕ:  а91 старлайн автозапуск с кнопки как сделать

Источник: http://webriz.ru/st/one/prosteyshaya-forma-otpravki-dannyh-na-pochtu-pri-pomoschi-html-i-php

Несколько лет назад форма заказа (калькулятор) на сайте была доступна не всем. Ее можно было заказать у студии / фрилансера либо создать самостоятельно, но для этого нужно было обладать определенным знаниями в области математики. Сегодня все изменилось. Теперь заполучить инструмент может каждый, причем бесплатно.

Студия, фрилансер или конструктор

Студия может запросить за разработку формы даже 25.000 рублей. В этом случае вы можете рассчитывать, что инструмент будет соединен с CRM и прочими системами автоматизации. Наиболее распространенная на рынке цена – 5.000-10.000 рублей. И в данном случае можно столкнуться с рядом сюрпризов, вроде нехватки функционала.

Фрилансер попросит за простой скрипт 500 рублей, профессиональный разработчик – 2.000-3.000 рублей за качественный калькулятор. Плюс время на реализацию заказа.

Конструктор – универсальная система, которая может работать с любым движком и предполагает минимум затрат на поддержку, изменение формы в перспективе. Такое решение рассчитано на современных бизнесменов, привыкших осваивать системы самостоятельно. Недостаток современных конструкторов состоит в том, что они не обросли достаточным числом интеграций. Поэтому станут оптимальным решением для бизнесменов и рекламщиков с небольшим бюджетом и ограниченными познаниями в области JQuery, JS, HTML5 и CSS3.

Если же вы планируете заказать разработку сайта и имеете достаточный бюджет, имеет смысл переложить решение вопроса на плечи специалистов студии-разработчика.

Конструктор uCalc.pro: особенности

Бесплатная версия не имеет срока действия и предлагает в тестовом режиме опробовать некоторые платные опции – отправку СМС клиентам, иллюстрации, прием оплаты, статистику и прочее.

Платная запущена не так давно и стоит 5 у.е / месяц. Если вы перестаете вносить оплату, инструмент продолжит работать и дальше, но уже без платных опций.

Особенности конструктора – оплата принимается через «Яндекс-Кассу», работает в соцсетях и мессенджерах.

Недостаток – конструктор не позволяет корректировать код калькулятора.

Как работать с калькулятором

Первый этап – регистрация на сайте ucalc.pro с помощью авторизации через соцсеть или почту. Второй вариант предпочтительнее, так как позволяет получать сообщения о совершенных покупках.

Второй этап – формирование калькулятора, которое может проводиться либо «с нуля», либо по шаблону.

При самостоятельной разработке вы попадаете в редактор, который напоминает Google Forms. Работа ведется с двумя вкладками – «Дизайн» и «Формула»:

  • во вкладке «Дизайн» определяется структура калькулятора. Параметры каждого элемента конструктор определяет автоматически, изменить их можно на странице «Формула»;
  • каждый блок имеет свои настройки, которые высвечиваются при наведении курсора – величина / размещение надписей, корректировка списка и прочее;
  • над блоками можно установить картинки – это могут быть собственные фото или иллюстрации из поисковика (система позволяет их выровнять);
  • текстовые поля и поля сбора контактов – разрешается отметить род сведений, которые собираются системой (почта / телефон / время), установить подсказки;
  • кнопка заявки – можно выбрать цвет, размер, а также функцию отправки готовой заявки на почту владельца ресурса. Конструктор позволяет настроить процедуру оплаты, написать свой текст сообщения;
  • дизайн – конструктор позволяет выбирать фон, обрамление элементов и шрифты;
  • цены и принцип работы калькулятора – настраиваются в разделе «Формула». Вы можете выбрать блоки, которые будут учитываться при формировании цен и вбить скидки за комбинацию услуг. Формул может применяться несколько, и поэтому в подвале выводится ряд результатов.

Когда все готово, протестируйте форму в самом конструкторе и проверьте ее отображение на разных устройствах в разделе «Превью».

Нажимая кнопку «Сохранить», вы получаете код для использования на сайте. Его нельзя редактировать и украсть.

В заключение

Это далеко не единственный конструктор для создания формы заказа. Существуют также CalcCreator, Formsite, Calculoid и прочие. У каждого из них есть свои преимущества и недостатки. И все они чуть более ограничены в своих возможностях, нежели индивидуальные разработки. Поэтому прежде, чем заказать создание сайта у той или иной компании, продумайте варианты калькулятора и внесите его в бюджет.

ЧИТАЙТЕ ТАКЖЕ:  как сделать вазу из бумаги своими руками

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

Источник: http://planet-today.ru/stati/nauka-i-tekhnika/mobilnye-tekhnologii/item/79026-kak-samostoyatelno-sdelat-formu-zakaza-dlya-sajta

Внешний вид формы заказа
Форма состоит из следующих блоков:

    Состав заказа. Чтобы посетителю Вашего сайта не пришлось в ручном режиме указывать в форме наименование товара или услуги, которую он желает заказать, данные сюда попадают автоматически при нажатии на кнопку добавления товара в форму. Кнопки инициализации заказа вы можете получить в личном кабинете. В составе заказа может одновременно находится насколько торговых позиций, которые посетитель сайта решит заказать.

Если в настройках товара указана цена — форма автоматически рассчитает стоимость всего заказа. А если в настойках у товара установлен признак «возможно заказать несколько товаров», то в форме будет отображаться и количество, а итоговая стоимость заказа при этом будет рассчитана из этого количества.

Данные покупателя. На финальном этапе заказа посетитель при оформлении вводит свои данные. Количество полей и их наименования произвольное и настраивается в личном кабинете сервиса EasyNetShop. При этом у каждого из полей можно установить признак «Обязательное» и форма заказа не будет отправлена до того момента, пока обязательное поле не заполнено.

  • Кнопки управления. Покупатель может завершить оформление заказа или вернуться на сайт для добавления в форму дополнительных товаров или услуг.
  • Преимущество формы заказа EasyNetShop
    Наша форма заказа выполнена по технологии корзины товаров, прежде чем оформить заказ необходимо его собрать. Такая технология имеет ряд преимуществ над традиционной формой, которая выпадает при нажатии на кнопку рядом с товаром и не формирует заказ:

      Доступна с любого места сайта.

    Представьте, пришел к вам на сайт покупатель и попал на страницу с товаром. Достаточно ли ему там информации для заполнения формы заказа и отправки? Нет! Ему бы еще почитать про доставку и оплату, про компанию и про аналоги, про скидки и акции. Он уйдет со страницы, на которой есть форма заказа для конкретного товара и ему придется вспоминать, как назывался тот товар, который ему понравился. Для этого наша форма хранит список добавленных в неё товаров и дает покупателю возможность вернуться к оформлению заказа на любой странице сайта, как только он будет готов.

    Покупка нескольких товаров.

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

    Обычно форма заказа ничего не считает. Она может только передавать статические данные, заполненные покупателем. А реализованная в виде корзины товара форма заказа может автоматически рассчитывать суммарную стоимость и удалять из заказа ненужные пункты. Это весьма удобно для окончательного формирования заказа на сайте

    Ещё несколько позитивных моментов в форме заказа EasyNetShop:

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

    Заполненная и отправленная форма заказа остается формальностью и даже если получен обратный ответ о том, что заявка получена. Это не дает 100%ой уверенности покупателю в том, что именно совершена покупка. Не получив ответа и не понимая стоит ли ему его ждать (какое время) — покупатель продолжит поиск товара на других сайтах. Совсем другое дело, если покупатель оформил заказ через корзину товаров и ему пришел тот же самый автоматический ответ о том, что заказ №… оформлен. Это уже не формальность.

    ЧИТАЙТЕ ТАКЖЕ:  айфон 6 из чего сделан корпус

    Есть определенная ожидаемая модель поведения покупателя на сайте, выработанная типовыми интернет-магазинами и практически любой покупатель будет искать привычную для него кнопку “добавить в корзину”, а затем и саму корзину для завершения заказа. Наличие формы заказа для покупки товара — это уход от типичного поведения покупателя и может вызвать неопределенную реакцию (от сложностей, до ухода с сайта)

    Источник: http://easynetshop.ru/resheniya-dlya-biznesa/forma-zakaza-dlya-sajta.html

    Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по простой форме на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.

    UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу ( Екатерину Карачеву )

    Формат самой формы так же включает файл обработчик на языке php, дополнительно для работы понадобится библиотека jquery и скрипты, но обо всем по порядку, не буду долго грузить — переходим к обзору и разбору нашей обратной связи.

    Форма обратной связи html — структура работы

    Внешний вид нашей формы выглядит следующим образом

    В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на демо как это работает )))

    Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.

    Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю )) Теперь о само насущном, принцип работы:

    Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:

    Исходный код обработчика формы

    Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.

    Источник: http://vpluce.ru/sozdanie-sajtov/forma-obratnoj-svyazi-html.html

    Размещение формы заказа на сайте очень эффективно. С такой формой посетителям не придется ждать наступления рабочего дня, чтобы купить товары или заказать услуги. Кроме того, если данные из формы будут отправляться по электронной почте, не понадобится писать скрипт для обработки данных заказа на сервере. Можно создать форму заказа для сайта, используя язык разметки HTML (HyperText Markup Language). Создать сайт самостоятельно с Wix.com

    Инструкция

    (Оплата кредитной картой)
    Введите другой элемент и установите type равным «checkbox», чтобы предоставить пользователям возможность отметить более одного варианта в форме заказа. Для примера:

    (Свяжитесь со мной, когда заказ будет отправлен)

    (Подписаться на рассылку)
    Создайте кнопку «Отправить», набрав тег и type равным «submit», value присвойте значение «Отправить». Кроме того, в другом теге сделайте кнопку «Сброс», установив type равным «reset», а value соотвественно «Сброс». Например, так:

    Кнопка «Отправить» предназначена для отправки данных, а кнопка «Сброс» — для очистки формы, если потребуется.
    Введите закрывающий тег , чтобы закончить форму. Сохраните страницу.

    Источник: http://imguru.ru/page/kak-sdelat-formu-zakaza-dlja-sajta

    Ссылка на основную публикацию