Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


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

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Быстрый заказ в интернет магазине - почтовая форма uCoz

Сергей    31.03.2012    11197    4.8 из 5.0 (26)

Оцените материал:

    Введение в "Быстрый Заказ"

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

    А именно, как удержать покупателей, которые уходят со страницы оформления заказа? Порой это происходит из-за абсолютной ерунды: нежелания разбираться в процессе или заполнять поля чекаута. Важно понять, чего хотелось бы таким покупателям и предложить альтернативные способы оформления заказа.

    Вобще, что я подразумеваю под фразой "Быстрый заказ"? Это когда пользователю предлагается ввести телефонный номер для связи (e-mail, как вариант) и отправить его на обработку. Всё! Ничего, кроме одного поля для ввода и кнопки "Быстрый заказ" прямо на странице товара. Очень быстрый, не правда ли?

    Далее идет контакт с клиентом. Во время которого Вам необходимо получить всю дополнительную информацию по заказу. Профессиональные менеджеры по продажам знают, как это делается :) Если интересно, можете найти в интернете книги по этому вопросу, их много. В частности описываются способы построения беседы и перечень вопросов, но сейчас не об этом.

    Размещение и принцип работы "Быстрого Заказа"

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

    Наша задача на этапе "до телефонного звонка" получить максимум информации по заказу. Неплохо было бы знать, содержимое какой страницы побудило клиента отправить форму. Делается это на JavaScript, подробнее рассмотрим чуть ниже.

    Реализация Быстрого Заказа в почтовой форме uCoz - пляски с бубном

    Создадим новую почтовую форму (я уже писал, как это делать в заметке Скрывать ли товары при отсутствии на складе?). Да и Вы, наверняка, опытные пользователи uCoz, сами догадаетесь как это сделать ;)

    Я задействовал три поля: собственно e-mail, тема письма и наименование товара. Не пугайтесь, что их три, вместо одного.

    • E-mail - обязательное поле для почтовой формы uCoz, это мы уже проходили. Будем скрывать его и задавать по умолчанию что-то вроде bystryizakaz@kakoilibodomen.com. Впоследствии в почтовом клиенте можно будет настроить обработчик почты таким образом, чтобы письма с этого адреса перекладывались в отдельную папку, например "Заказы"
    • Тема письма - его я задействовал под телефонный номер покупателя. Таким образом, удобнее собирать базу клиентов, не открывая писем.
    • Собственно наименование товара. В это поле с помощью JavaScript буду передавать название страницы. *Если Вы грамотный оптимизатор, то в названии страницы товара у Вас должно присутствовать название самого товара. (хотя возможно передавать URL, кому как проще)

    Перейдем к самому интересному - настройке шаблона почтовой формы. Вспоминаем опять все наши поля.

    <!-- Поле e-mail отправителя (скрыто) -->
    <input type="hidden" name="f1" value="bystryizakaz@kakoilibodomen.com">
    <!-- Поле телефонный номер -->
    <input type="text" value="Введите номер телефона" name="f2" size="20" maxlength="20">
    <!-- Поле Title - Название страницы (скрыто) -->
    <input type="hidden" name="f3" value="JavaScript клиента отключен, поэтому Вы видите это =(">
    <!-- Кнопка "Отправить" -->
    <input type="submit" onClick="document.mform.f3.value=document.title" value="Быстрый заказ">

    Весь цимус заключается в одной строчке:

    onClick="document.mform.f3.value=document.title"

    Не вдаваясь в знакомство в JavaScript, расскажу что мы имеем:

    • onClick - запуск JavaScript с клика по ссылке
    • mform - общее имя для всех почтовых форм uCoz. Его нужно будет кастомизировать, если у Вас на странице уже есть почтовая форма, отправка которой планируется выполняться по кнопке "Быстрый Заказ". Хотя, если Вы это реализуете, то и сами догадаетесь, как надо сделать, в противном случае - не заморачивайтесь.
    • f3 - имя поля, в которое будет записываться Заголовок страницы. В моем случае оно шло под номером "3" в конструкторе полей. Поставьте подходящее Вам значение.
    • value - атрибут, в который будет записываться заголовок.
    • document.title - заголовок страницы

    Сохраняем шаблон. Результат виден сразу - это форма в одну строчку с полем для ввода телефона и кнопкой "Быстрый Заказ".

    Заключение

    Вот и готов прекрасный инструмент для хорошего интернет магазина. Я дал Вам общее направление действий, дальше решайте сами, тестируйте на аудитории и делайте выводы.

    Удачи!

    Статьи по теме

    Обсуждение

    Всего комментариев: 34

    D
    1
    Спасибо за статью. Еще бы продаж побольше. biggrin
    avatar
    2
    усиленно работаем над этим smile
    avatar
    3
    Спасибо за прекрасную статью! Всё сделали как у Вас написано, но у всех браузерах: [onClick="document.mform.f3.value=document.title"] не копирует название материала и приходит [JavaScript клиента отключен, поэтому Вы видите это =( ](он включён во всех браузерах), можно ли как-то реализовать функцию вставки названия материала или url, чтобы почтовые формы uсoz их поддерживали, если да, то как? Ещё раз спасибо! dry
    avatar
    4
    amrita, Вы могли бы показать шаблон почтовой формы? скорее всего путаница в полях f1, f2, f3...

    Если Вы видите "JavaScript клиента отключен, поэтому Вы видите это", но JS включен, значит не произошло событие по onclick

    Вобщем, так неясно. Покажите шаблон.
    avatar
    5
    Вот шаблон:
    <!-- Поле e-mail отправителя (скрыто) -->
    <input type="hidden" name="f1" value="amrita.kiev@gmail.com">
    <!-- Поле телефонный номер -->
    <input type="text" placeholder="Напишіть номер Вашого телефону" title="Напишіть номер Вашого телефону" name="f2" size="27" maxlength="275">
    <!-- Поле Title - Название страницы (скрыто) -->
    <input type="hidden" name="f3" value="JavaScript клиента отключен, поэтому Вы видите это =(">
    <!-- Кнопка "Отправить" -->
    <input type="submit" onClick="document.mform.f3.value=document.title" value="Швидке замовлення">

    Если ставлю ваш шаблон, тоже самое
    avatar
    6
    Мне предложили альтернативный вариант:
    $MFORM_9$
    <script type="text/javascript">
    $(function(){
    $("[name=f2]").val("$ENTRY_TITLE$")
    $("[name=f9]").val("$ENTRY_URL$")
    });
    </script>

    Это надо ставить не в шаблон самой формы. а в шаблон страницы, на которой стоит форма. Вместо f2 и f9, $ENTRY_TITLE$ и $ENTRY_URL$ можно ставить свои
    avatar
    7
    посмотрел, вижу, что работает:

    $MFORM_9$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$")
    });
    </script>
    avatar
    9
    А ещё больше мне нравится то, что в этот скриптик можно вставить $REQUEST_URI$ и от тоже там будет работать, только его нужно прописовать так: www.domen.ucoz.ru$REQUEST_URI$(у себя на сайте такое поставил). А самое главное что в этот скрипт можно сразу вставить и название материала и ссылку и описание, что угодно... Например:
    $MFORM_9$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$ www.domen.ucoz.ru$REQUEST_URI$")
    });
    </script>
    avatar
    8
    Спасибо за отличное предложение! Так даже правильнее smile
    r
    10
    а в шаблон Почтовой формы что ставить нужно?
    avatar
    11
    <!-- Поле e-mail отправителя (скрыто) -->
    <input type="hidden" name="f1" value="bystryizakaz@kakoilibodomen.com">
    <!-- Поле телефонный номер -->
    <input type="text" value="Введите номер телефона" name="f2" size="20" maxlength="20">
    <!-- Поле Title - Название страницы (скрыто) -->
    <input type="hidden" name="f3" value="JavaScript клиента отключен, поэтому Вы видите это =(">
    <!-- Кнопка "Отправить" -->
    <input type="submit" onClick="document.mform.f3.value=document.title" value="Быстрый заказ">
    r
    12
    я имею ввиду в предложении amrita

    почему-то не пересылает он мне урл страницы, а пересылает только название категории, если я этот скрипт ставлю/

    $MFORM_2$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$ www.rostokshop.ucoz.ru/$REQUEST_URI$")
    });
    </script>

    присылает вот что

    Название формы: Быстрый заказ
    ========================================
    наименование товара: Подставки для цветов
    avatar
    13
    шаблон почтовой формы приложите, возможно с именем <input> что-то не так
    l
    14
    Спасибо огромное за науку! )) Очень полезно. Подскажите, пожалуйста, что прописать вместо document.title, чтобы приходила ссылка на страницу товара или артикул. Простите, за глупые вопросы, своих мозгов не хватает ;)
    avatar
    15
    Вставьте туда document.location.href
    l
    16
    Спасибо! Ура, всё работает! ))
    avatar
    17
    Возможно немного не в тему, я долго искал, но подходящего так и не нашел. Возможно кто-то подскажет. Как сделать форму отправки письма автору материала или пользователю, который разместил товар в интрнет-магазине или статью. Перерыл все, но почтовые формы отправляют на почту, указанную в конструкторе и возможности добавить код "E-mail автора" нет(. Возможно есть нестандартное решение, которое позволило бы отправлять почту на указанный адрес или на адрес "E-mail автора материала". Заранее спасибо
    avatar
    18
    Возможно Вам подойдет не почтовая форма, а модуль посоветовать другу
    K
    19
    Спасибо, все очень хорошо работает.
    Вот пример на моем сайте http://www.kowbel.ru/shop/502/desc/kreps-standart
    a
    20
    Спасибо, применила! Как изменить дизайн кнопки? У меня оч некрасивая получается- просто пустое белое окошко!
    avatar
    21
    Задайте кнопке стиль. Например class = "fastorder"

    Сам стиль можете найти в поисковиках о запросу стили кнопок для сайта на лбой вкус
    a
    22
    Заменила, почему то ничего не происходит!
    avatar
    23
    а я вижу, что черная окантовка исчезла))

    в CSS найдите строчку
    Код
    a.add2cart, a.buyNow, #order-but-continue, #order-but-recalc, #order-button {
    border: medium none;
    color: white;
    display: inline-block;
    font-size: 14px;
    margin: 15px 0;
    text-align: center;
    text-decoration: none;
    }

    и замените ее на
    Код
    input.add2cart, a.buyNow, #order-but-continue, #order-but-recalc, #order-button {
    border: medium none;
    color: white;
    display: inline-block;
    font-size: 14px;
    margin: 15px 0;
    text-align: center;
    text-decoration: none;
    }

    возможно я угадал, что Вы хотите)
    avatar
    24
    А у меня альтернативный вариант не работает, поля не приходят вообще((
    Как быть?
    Можно ли в первом варианте вставлять наименование товара и цену?
    avatar
    25
    Также не работает представленный здесь вариант, если форма расположена во всплывающем окне, можете посмотреть как это сделано у меня на сайте (при нажатии кнопки "Рассрочка"): http://www.ukr-shop.net/shop/99/desc/ipad_mini_16_wifi
    Есть какие-либо решения данной проблемы?
    avatar
    26
    hlopik, не вижу у Вас на сайте формы быстрого заказа, чтобы можно было прокомментировать. Всплывающее окно реализует аналогично рассрочке, она же у Вас на почтовой форме сделана?
    avatar
    27
    Доброго времени суток
    Помогите, пожалуйста: вместо названия страницы на почту приходит "JavaScript клиента отключен, поэтому Вы видите это =(" Хотя все включено

    Шаблон почтовой формы:
    <!-- Поле e-mail отправителя (скрыто) -->
    <input type="hidden" name="f1" value="bystryizakaz@qr4u.com">
    <!-- Поле телефонный номер -->
    <input type="text" placeholder="Введите номер телефона" style="color: #000000;" name="f2" size="20" maxlength="20">
    <!-- Поле Title - Название страницы (скрыто) -->
    <input type="hidden" name="f3" value="JavaScript клиента отключен, поэтому Вы видите это =(">
    <!-- Кнопка "Отправить" -->
    <input type="submit" onClick="document.mform.f3.value=document.title" value="Быстрый заказ">

    Также прописал в самом коде:
    $MFORM_4$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$ www.domen.qr4u.ru$REQUEST_URI$")
    });
    </script>

    Заранее благодарен за помощь в решении данной проблемы
    S
    28
    <!-- Поле e-mail отправителя (скрыто) -->
    <input type="hidden" name="f1" value="sf.butik@yandex.ru">
    <!-- Поле телефонный номер -->
    <input type="text" placeholder="Введите номер телефона" name="f2" size="20" maxlength="20">
    <!-- Поле Title - Название страницы (скрыто) -->
    <input type="hidden" name="f3" value="JavaScript клиента отключен, поэтому Вы видите это =(">
    <!-- Кнопка "Отправить" -->
    <input type="submit" onClick="document.mform.f3.value=document.title" value="Быстрый заказ">

    На странице товара у меня:
    $MFORM_3$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$ www.domen.sf-butik.ru$REQUEST_URI$")
    });
    </script>

    Письмо приходит с темой "Телефон пользователя", а в теле письма:
    Здравствуйте.

    Username: Shen

    Название формы: Быстрый заказ
    ========================================

    IP: 46.200.255.156
    Дата: 10.09.2013, 18:24
    ========================================

    Всего наилучшего.
    avatar
    0
    29
    Вместо onClick попробуйте добавить скрипт
    <script>
    $("f3").val(location.href );
    </script>
    В самый конец шаблона формы
    M
    30
    Разобрался почему форма некорректно работает и возвращает сообщение, что ява-скрипт отключен!

    Вся проблема в том, что если в тайтле вашего товара присутствуют вот такие кавычки  " (например, санки "Скользяшка" модель...) то возвращает ошибку, так как кавычки воспринимаются как часть кода. Надо скрипт поменять на такой:

    <script type="text/javascript">
    $(function(){
      $("[name=f3]").val("http://sitename.ru/$REQUEST_URI$") 
    });
    </script>

    то есть возвращать не название товара, а ссылку на страницу товара (это даже лучше, чем шарить по каталогу в поисках нужного товара по его имени).
    avatar
    31
    А у меня не работал скрипт добавления ссылки в поле №3:
    <script> 
    $("f3").val(location.href ); 
    </script>

    Решилось просто - полю №3 в шаблоне формы надо дать идентификатор, в моем случае fld3
    и справить скрипт на:
    <script> 
    $("#fld3").val(location.href ); 
    </script>
    avatar
    0
    32
    Здорово! Но имейте ввиду, что в таком варианте нельзя размещать более одной формы на странице. Для этого нужно использовать классы:

    
    Код
    <script>   
    [b]$(".fld3").val(location.href );   
    </script>
    avatar
    33
    Необходима помощь. При одной такой форме на странице все работает. Когда форм несколько , даже через диалоговые окна - перестает работать скрипт в строке 3
    avatar
    0
    34
    Чтобы разместить несколько форм на одной странице, нужно создавать разные почтовые формы: $MFORM_1$, $MFORM_2$ и т.д.
    Быстрый заказ в интернет магазине - почтовая форма uCoz
    Быстрый заказ в интернет магазине - почтовая форма uCoz