Скрипт форма заказать рекламные услуги html код. Простейшая форма отправки данных на почту при помощи HTML и PHP
Сайты, продающие какие-либо товары, зачастую делаются на специализированных системах(cms). Полноценные интернет-магазины обязаны иметь полнофункциональную корзину и возможность оплатить покупку дистанционно. Но что делать, если ассортимент вашей продукции не такой большой, чтобы разворачивать целый магазин. Что если вы продаёте свою книгу, тренинг или какую-нибудь уникальную методику? Даже если у вас интернет-магазин с полной автоматизацией, кнопка "Купить в несколько кликов" или "Заказать за 5 секунд" будет очень кстати.
Проведённые исследования показывают, что при использовании возможности экспресс-заказов, конверсия увеличивается до +56%. Если считать классическое оформление заказа, то число отказов составляет около 7%. При использовании заказа в 1 клик число отказов достигало 20% (каждый 5-й заказ содержал "липовые" данные покупателей). Несмотря на это, экспресс-заказов было большинство. Это значит, что при правильном использовании этой функции, количество продаж может существенно увеличиться.
Вот как менялось значение конверсии на наших подопытных магазинах в течении месяца на каждом этапе. Вначале была только одна кнопка "В корзину". В первом эксперименте была добавлена ссылка для экспресс-покупки. Результаты были потрясающими. Тогда мы решили на втором эксперименте вынести покупку в 1 клик в основную кнопку, а добавление в корзину опустить в ссылку. Конверсия была выше изначальной, но всё же первый эксперимент оказался более продуктивный. Его мы и советуем нашим клиентам.
- WIX
Рассмотрим готовые формы заказа в один клик из примеров в конструкторе.
 |
Стандартная форма для заказа с сайта. Кнопку на неё или ссылку можно поставить рядом с кнопкой "Добавить в корзину", либо использовать отдельно. В скрытом(невидимом) поле формы будет передано название товара. В этом примере поле товара сделали видимым , чтобы вы смогли проследить за изменением поля. В заготовках конструктора скрытое поле для товаров имеет идентификатор product . Чтобы это поле заполнялось автоматически в зависимости от того, на какую кнопку/ссылку нажали, нужно добавить ссылке или кнопке псевдо-атрибут data-product="Название товара" |
 |
Расширенная форма с дополнительными полями позволит более точно указать размер и способ доставки. Вы можете добавить поля или удалить ненужные, изменить их назначение. Например, вместо размера можно указать цвет и т.п. Форма этого типа подойдёт только если свойства(доставка, размер) есть у всех товаров. Либо для каждой группы товаров делать отдельную форму со своими свойствами. Форма расширенного типа будет удобна сайтам, которые продают курсы, методики и прочее. |
Даже если у вас полноценный интернет-магазин, с корзиной покупок и возможностью оплатить покупку прямо на сайте, не стоит отказываться от дополнительной функции - кнопки «купить в один клик».
Пользователю весьма лениво проходить всю процедуру регистрации, авторизации и прочего, чего потребует от него Ваш сайт. К тому же, если это разовая покупка, и в обозримом будущем больше не планируется покупать товары данной категории.
Ему гораздо легче заполнить несколько полей формы и, тем самым, оформить заказ.
Это незначительно дополнение поднимет продажи на Вашем сайте на 20-50%.
Сайтам каталожного типаНа таких сайтах не предусмотрена система заказа или покупки товара/услуги. Продажи осуществляются посредством телефонного разговора. Покупатель объясняет, что он хочет купить и в каком количестве, диктует свои контактные данные, адрес доставки и т.д. Все это ведет к существенным временным затратам менеджеров компании, а как следствие - повышению себестоимости продукции и уменьшению прибыли.
Но, Вы можете установить форму заказа товара. В таком случае, скорость обработки заказов значительно повысится. Более того, у вас увеличатся и продажи! Т.к. покупателю нет необходимости пытаться дозвониться до Вас. Он просто заполнят форму и ожидает звонка от Вашего менеджера.
Для одностраничных сайтов / Landing pageНу, собственно говоря, без формы заказа товара эти сайты вообще теряют смысл.
Но не менее важным моментом является скорость реагирования на заявку. Нужно быстро обработать горячего клиента. Вам в помощь - SMS информирование!
Особенности использования форм для заказаПо сути, формы для заказа не отличаются от других форм, которые Вы создаете в Конструкторе форм .
Что бы не создавать для каждого товара свою форму, одному или нескольким полям можно задать значения непосредственно при вызове формы. Подробно это описано в разделе Установка > Присваивание значений полям , эта же статья ознакомительная, показывает только возможные варианты форм для Вашего сайта.
|
1-й вариант формы заказа товара |
Простая форма заказа товара.
Запрашивается минимум необходимой информации, которой достаточно продавцу. |
|
2-й вариант формы заказа товара |
Расширенная форма заказа товара.
Покупают предоставляется возможность выбрать способ доставки. В случае самовывоза - покупатель может выбрать наиближайший к нему пункт выдачи. Пример вызова всплывающей формы: Купить iPhone Купить Samsung |
Быстрый заказ может значительно облегчить шоппинг в интернет-магазине и, как следствие, повысить конверсию (конверсия сайта — соотношение итоговых реальных заказов от числа всех посетителей).
В статье рассмотрены основные принципы организации быстрого заказа товаров без регистрации , приведены иллюстрации. Это может наглядно продемонстрировать работу данного типа модулей интернет-магазинов и послужить заказчикам веб-услуг и владельцам сайтов в качестве ознакомительного экскурса. Кроме того, материал содержит пошаговую фрагментацию функционального кода, и может оказаться полезным для веб-разработчиков в практическом применении.
Давно известна закономерность: чем меньше в форме регистрации полей, тем охотнее пользователи её заполняют — тем охотнее осуществляет покупки в интернет-магазине. Не удивительно, что всё более популярной становится практика создания формы быстрого заказа на сайте, где посетитель может указать лишь необходимые данные для доставки (имя, адрес, телефон), минуя необходимость заполнения имейлов, паролей, почтовых индексов (где они не нужны) и пр. В то же время, стоит учитывать фактор физического местонахождения магазина / склада. Рационально использовать форму быстрого заказа именно в том городе, где расположен магазин с товаром (например — Москва). При этом, для жителей других городов оставить полную регистрацию, где они смогут указать почтовый индекс, способ доставки и другую необходимую информацию.
Принципы организации быстрого заказа товара без регистрацииИтак, мы определились с целями и задачами, теперь перейдем к средствам реализации. Форму быстрого заказа я писала для интернет-магазина, разработанного на движке osCommerce v.2.3 (чит. также « «), хотя аналогичный скрипт можно написать под любую другую CMS. По сути, всё, что нам нужно для отправки заказа товара на имейл продавца — это ID товара, который предполагается извлечь со страницы, на которой будет размещена кнопка быстрого заказа (страница товара, страница категории товаров). Задумка конструкции такова — данная кнопка «Быстрый заказ» вызывает модульное окошко, в котором пользователю предлагается следующее.
Рис. 1. Быстрый заказ для интернет-магазина. Кнопка быстрого заказа на странице товара. При нажатии открывается модульное окошко поверх страницы (см. рис. 2).
Рис. 2. Быстрый заказ в интернет-магазине. Опровержение локации — «Нет, я НЕ в Москве». Далее — переход к инструкции пройти полную регистрацию, заполнив все необходимые данные покупателя (рис. 3).
Рис. 3. Другой город — покупка возможна только при регистрации.
Рис. 4. Быстрый заказ для интернет-магазина без регистрации (город Москва). Переходим к форме заказа товара (рис. 5):
Рис. 5. Быстрый заказ в интернет-магазине без регистрации. Форма заказа товара.
Скрипт быстрого заказа для интернет-магазинаС интерфейсом определились, теперь пройдемся по коду для данной реализации.
У нас будет 1 основной php-файл — страница, которая будет вызываться в модульное окошко. Назовем его bistriy_zakaz_s_sayta.php . Вспомогательные функции, как то: проверка полей, брейк-тайм (время сессии — скажем, 5 мин, — в течении которого невозможно отправить заказ с того же компьютера дважды) будем использовать по аналогии с формой обратной связи, уже существующей в движке. Собственно, их мы прописывать не будем, а только вызывать. Для этого, прежде всего, запросим рабочие файлы движка:
В шапке подключим основные стили сайта, а также js-скрипты и jquery-библиотеку.
Дополнительно, пропишем стили для двух блоков, определяющих взаимодействие с пользователем на шаге уточнения локации. Внешне это выглядит так, будто перед нами разные страницы (сравните рис. 2 и рис. 5). Но это муляж. На самом деле, в первом случае основная форма просто загорожена пластом блока, растянутым по ширине и высоте окошка.
Собственно, изначально, перед посетителем откроется блок подтверждения / опровержения города местонахождения (см. рис. 2). Класс «displaymoscow» и id #moscow. Его положение на странице зададим в стилях как абсолютное и с z-индексом 1800 над остальным содержимым страницы. (Подробнее о z-индексах и прочих фокусах с блоками читайте здесь: « «.) Тот же класс (displaymoscow) используется для второго блока #moscownot, изначально скрытого на странице.
Пропишем динамику в .
При нажатии на кнопку «Да, я из Москвы» (#tdb1), блок #moscow переходит в режим hide(), т.е. становится скрытым, открывая содержимое страницы и саму форму быстрого заказа. (См. рис. 4-5, строки кода 125-126 )
При нажатии на кнопку «Нет, я НЕ в Москве» (#tdb2), блок #moscow переходит в режим hide(), а вот блок #moscownot, напротив, выходит в режим show() т.е. выходит на первый план, предлагая пройти полную регистрацию. (См. рис. 2-3, строки кода 128-130 )
Стоит обратить внимание на строку 135: блоки «Москвы» выводятся только при условии, что заказ еще не отправлен, а также — если не произведена сессия «moscow» (в случае прошлых заказов с данного компьютера). А иначе нам не нужно подтверждение местонахождения — посетитель уже подтвердил его ранее.
Еще одна деталь — кнопка «Зарегистрироваться». Указываем у ссылки атрибут target=»_top». Мы работаем в модульном окне через frame, и ссылки должны быть соответствующими.
Быстрый заказ: html,body{ margin:0; padding:0; } body { background: #fff url("workimages/bg_foot.jpg") no-repeat right 34px; color: #000; font-size: 13px; text-align:left; } h2 { font-size: 20px; line-height:34px; margin-bottom: 0; font-weight:bold; color: #333; padding-top:0px; padding-bottom: 12px; margin:0; } .contentContainer,.contentText,.contentText table,.contentText table td{background:transparent!important;} .contentContainer{padding:10px 20px;} p{color:#524d4e; font-size:15px;} input,textarea,.fieldKey{font-size:15px!important;} .fieldKey{width:180px;} .fieldValue{width:360px;} .ovr2{width:100%; height:110px; overflow:auto; margin-bottom:10px;} .displaymoscow{ width:560px; padding:10px 20px; height:400px; background: #fff url("workimages/bg_foot.jpg") no-repeat right 34px; position:absolute; z-index:1800; } .displaymoscow#moscownot{display:none;} jQuery(function($) { $("#tdb1").click(function() { $("#moscow").hide(); return false;}); $("#tdb2").click(function() { $("#moscow").hide(); $("#moscownot").show(); return false;});
Внимание! Сервис быстрого заказа доступен только для жителей Москвы. Это связано с тем, что для жителей других городов требуется более детальная информация.
Быстрый заказ очков и оправ на StarOpticПожалуйста, пройдите регистрацию на сайте, чтобы осуществлять покупки в нашем интернет-магазине.
Зарегистрироваться$("#tblnew").button({icons:{primary:"ui-icon-extlink"}}).addClass("ui-priority-secondary").parent().removeClass("tdbLink");Следующим шагом мы посмотрим, отправлялся ли заказ. Если да, то выводим сообщение об успешной отправке.
Быстрый заказ очков и оправ на StarOptic
Заказ успешно отправлен в отдел обслуживания магазина. Наш менеджер свяжется с Вами по контактному телефону для уточнения деталей заказа и времени доставки.
|
|