Лучшие кейсы за 2024 год

Категории


Все кейсы
Кейсы
Уроки
Тесты

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

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

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

Для себя

Интернет магазин

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


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

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

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

  2. Кейсы
  3. Юзабилити
  4. Быстрый заказ в интернет магазине - почтовая форма uCoz
Сергей    31.03.2012    18835    4.7 из 5.0 (33)

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

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

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

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

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

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

    Вобщем, так неясно. Покажите шаблон.
    avatar
    0Спам
    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
    0Спам
    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
    0Спам
    7
    посмотрел, вижу, что работает:

    $MFORM_9$
    <script type="text/javascript">
    $("[name=f3]").val("$ENTRY_TITLE$")
    });
    </script>
    avatar
    0Спам
    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
    0Спам
    8
    Спасибо за отличное предложение! Так даже правильнее smile
    r
    0Спам
    10
    а в шаблон Почтовой формы что ставить нужно?
    avatar
    0Спам
    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
    0Спам
    12
    я имею ввиду в предложении amrita

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

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

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

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

    Сам стиль можете найти в поисковиках о запросу стили кнопок для сайта на лбой вкус
    a
    0Спам
    22
    Заменила, почему то ничего не происходит!
    avatar
    0Спам
    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
    0Спам
    24
    А у меня альтернативный вариант не работает, поля не приходят вообще((
    Как быть?
    Можно ли в первом варианте вставлять наименование товара и цену?
    avatar
    0Спам
    25
    Также не работает представленный здесь вариант, если форма расположена во всплывающем окне, можете посмотреть как это сделано у меня на сайте (при нажатии кнопки "Рассрочка"): http://www.ukr-shop.net/shop/99/desc/ipad_mini_16_wifi
    Есть какие-либо решения данной проблемы?
    avatar
    0Спам
    26
    hlopik, не вижу у Вас на сайте формы быстрого заказа, чтобы можно было прокомментировать. Всплывающее окно реализует аналогично рассрочке, она же у Вас на почтовой форме сделана?
    avatar
    0Спам
    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
    0Спам
    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
    1Спам
    30
    Разобрался почему форма некорректно работает и возвращает сообщение, что ява-скрипт отключен!

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

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

    то есть возвращать не название товара, а ссылку на страницу товара (это даже лучше, чем шарить по каталогу в поисках нужного товара по его имени).
    avatar
    1Спам
    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
    0Спам
    33
    Необходима помощь. При одной такой форме на странице все работает. Когда форм несколько , даже через диалоговые окна - перестает работать скрипт в строке 3
    avatar
    0
    34
    Чтобы разместить несколько форм на одной странице, нужно создавать разные почтовые формы: $MFORM_1$, $MFORM_2$ и т.д.
    Войдите:
    Быстрый заказ в интернет магазине - почтовая форма uCoz
    Быстрый заказ в интернет магазине - почтовая форма uCoz