Кнопка подробнее для сайта: Как создать кнопку сайта? — База знаний uCoz

javascript — script.js код, реализующий кнопку «Подробнее» для просмотра статьи

Вопрос задан 1 год 7 месяцев назад

Изменён 1 год 7 месяцев назад

Просмотрен 822 раза

я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js?

var info=document.getElementsByClassName("button_info")
var text_info=document.getElementsByClassName("text_none")
info.onclick = function ()
{
    document.getElementByClassName('text_none').style.overflow="visible"; 
}   (Этот код не работает,возможно я неправильно обращаюсь,или же вообще так делать нельзя?)C

Есть HTML код:

<div>Показать всё содержимое статьи:
</div>
<div    > Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>  

CSS-код:

. text_none 
{
max-height: 150px;
max-width: 300px;
overflow: hidden; 
border: 1px solid black;
}             
.button_info
{
background-color:  darkcyan;
color: white;
padding: 12px 16px;
font-size: 18px;
font-weight: bold;
border: none;
cursor: pointer;
width: 120px;
}

• javascript
• html
• css

Не очень понял, что это «Текст,который будет не вмещаться в рамки». Но в остальном можно использовать класс модификатор, к примеру «more». Который по кнопке будет добавлять необходимые вам стили и при повторном клике возвращать обратно. Надеюсь правильно понял вопрос.

let info=document.querySelector(".button_info")
let text_info=document.querySelector(".text_none")
info.onclick = function ()
{
   text_info.classList.toggle('more')   
} 

.text_none {
  max-height: 150px;
  max-width: 300px;
  overflow: hidden; 
  border: 1px solid black;
}         
.text_none.more {
  max-height: none;  
  overflow: visible;
  
}  
.button_info {
  background-color:  darkcyan;
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 120px;
}

<div>Показать всё содержимое статьи:</div>
<div>
  Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>  

9

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Кнопки в дизайне — блог компании «Веб-Эталон»

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

Кнопка на сайте trello.com узнаваема, заметна и понятна

Различие кнопок по внешнему виду

1. Залитая цветом кнопка, как правило, выделяющаяся относительно других кнопок. Она обозначает самые важные действия на сайте
2. Кнопка с контуром может использоваться для обозначения как вторичной кнопки, так и основной
3. Текстовая кнопка используется для менее приоритетных действий и помогает сохранить акцент на основном тексте, не отвлекая на себя внимание
4. Кнопка переключения группирует набор действий, из которых можно выбрать только одно. Такие кнопки используются реже остальных.

Различие кнопок по иерархии

На сайте может быть более одной кнопки одновременно, поэтому основная кнопка может сопровождаться другими.

1. Основная (первичная) кнопка. Эта кнопка должна быть сильным визуальным индикатором, помогающим пользователю ориентироваться на сайте. Используйте для таких действий, как «перейти», «следующий», «смотреть еще», «заказать» и т.д.
Основная кнопка «подробнее» на сайте brandon-visa.ru
2. Вторичная кнопка используется для второстепенных действий, с более низким приоритетом, чем у основной кнопки. Может быть кнопкой-компаньоном для основной. Например, быть рядом с кнопкой «отправить» и называться «отмена». Не обязательно, чтобы эта кнопка имела отношение к первичной, суть ее в том, что она должна привлекать меньше внимания. Использование вторичных кнопок рядом с основной на сайте designmodo.com
3. Плавающая кнопка используется для обозначения действия, на котором нужно сфокусировать отдельное внимание. Обычно используется в мобильных приложениях. Плавающая кнопка «больше похожих аккаунтов» в приложении Instagram

Несколько полезных советов

Внешний вид:

• горизонтальный внутренний отступ может быть либо выровнен по сетке, либо иметь одинаковый отступ по бокам. Выравнивание по сетке позволяет сохранять кнопку всегда одинакового размера (в таком случае это ограничивает количество текста в кнопке). Если сохранять одинаковый отступ по бокам, например, 32рх, это позволит менять длину кнопки и избежать ограничения по длине текста. Но в таком случае надо установить минимальную ширину кнопки, например, 100рх, чтобы избежать слишком маленьких кнопок
• вертикальный внутренний отступ должен быть достаточным, чтобы тексту в кнопке не было «тесно», например, при высоте строки 22px сделайте отступы по 40рх
• делайте текстовую кнопку узнаваемой и понятной. Если она не написана заглавными буквами, ее цвет и стиль должен отличаться от обычного текста.

На сайте equatorcoffees.com у кнопки горизонтальный внутренний отступ выровнен по сетке и все кнопки одного размера

Содержание:

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

На сайте ekolife.co.uk кнопка имеет формулировку глагол+наречие и недлинный текст в одну строку

Сочетание:

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

Основная кнопка на сайте themelooks.com выделена, а менее приоритетная кнопка—контурная

Состояние:

• Неактивные кнопки. Кнопка может быть не активной, (отключенной), если пользователь не выполнил необходимые действия. После выполнения действий кнопка становится активной.
• Активная кнопка—ее внешний вид дает пользователю понять, что она кликабельна
• Наведение
• Фокус обозначает, например, открытую вкладку
• Нажатие.

На сайте brandon-visa.ru фокус сосредоточен на одной кнопке, из этого можно понять, что остальные кнопки кликабельны и при нажатии на одну из них откроется нужная вкладка

Выводы:

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

Разработка кнопок для Интернета — Руководство и примеры на 2020 год

Кнопки в Интернете — неотъемлемая часть взаимодействия с пользователем. Их цель — вдохновить на конверсию и действие человека по ту сторону экрана. Но когда они плохо реализованы — будь то дизайн или копия — они могут вообще не привлечь внимания.

Как специалист по пользовательскому опыту (UX), важно знать, как лучше всего разрабатывать кнопки для Интернета в 2020 году. Понимание важных аспектов дизайна пользовательского интерфейса может помочь сохранить эффективность вашей стратегии кнопок и обеспечить нужные результаты.

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, и Нильсен считает, что 20% более вероятны. И эксперты предсказывают, что в наши дни продолжительность нашего внимания даже меньше, чем у золотой рыбки — около 8,25 секунды.

Итак, какое место в этом уравнении занимают кнопки?

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

Веб-кнопки на протяжении многих лет

Как мы знаем, веб-дизайн сильно изменился за последние десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в разработке» и навигация по i-frame остались в прошлом. Хотите прогуляться во времени? Посмотрите это ностальгическое путешествие по прошлому Интернета.

Как и Интернет в целом, веб-кнопки изменили свое лицо и стиль. Серые кнопки с градиентами и закругленными краями господствовали почти десять лет назад благодаря смартфонам, таким как Apple iPhone, которые доминировали в мире дизайна.

Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять свои закругленные углы, тени и градиенты. Смартфоны, такие как Android и iPhone, также начали подхватывать тенденции плоского дизайна.

К 2015 году у плоского дизайна все еще был дом, но веб-дизайнеры начали возвращаться к тому, чтобы «кнопки выглядели как кнопки», используя тени или градиенты, чтобы они выглядели «кликабельными». По состоянию на 2019 год мы все еще на этой арене.

Хотите узнать больше об эволюции веб-кнопок? Посмотрите эту временную шкалу с примерами из Dribbble.

Согласно UX Planet, кнопки со сплошной заливкой и тенями являются наиболее четкими для пользователей, потому что размерность легче понять как кнопку, которую можно нажать. Но это не единственное руководство, которое следует учитывать.

Дизайн кнопки в различных ее состояниях так же важен, как и ее внешний вид.

Учитывать состояния кнопок, например :

• Активно или отключено
• В фокусе
• Наведение
• Выбрано

Активные или отключенные кнопки

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

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

Кнопки фокусировки

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

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

Кнопки состояния наведения

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

Выбранные кнопки

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

Выбранные кнопки в качестве ползунков

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

Дизайн — это только часть того, что делает кнопку хорошей в Интернете. И действительно, в дизайне не так много правил, если он доступен, последователен и работает для ваших пользователей. Но прошли те времена, когда текст «нажмите здесь» и кнопкам не хватало последовательного стиля и подхода. Примите во внимание эти рекомендации при разработке веб-кнопок в 2020 году.

Придерживайтесь своего дизайна и документируйте его

Частью руководства по стилю вашего бренда должны быть не только голос и тон вашего контента, но и не только использование вашей цветовой палитры и логотипа. Интерактивные веб-элементы, такие как кнопки, также должны быть обведены, и ваша команда должна выбрать последовательный подход.

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

Аналогичным образом, если ваши кнопки имеют какие-либо анимации, такие как статусы загрузки или состояния, вы захотите зафиксировать, как они выглядят и как они спроектированы.

Кнопки также можно интерпретировать как ссылки в тексте. Опять же, выбор того, как текстовые ссылки будут отображаться и функционировать, также должен быть отражен в вашем руководстве по стилю.

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

Не полагайтесь только на значки в качестве кнопок

Значки могут быть великолепны, если они являются частью руководства вашего бренда. При правильном использовании они могут быть понятными и преодолевать языковые барьеры. Однако будьте осмотрительны в использовании иконок.

По словам Авроры Харли из Nielsen Norman Group, «понимание пользователем значка основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности».

Исследования пользовательского опыта показывают, что даже гамбургер-меню (или мобильное меню) не так хорошо знакомо всем пользователям, как можно было бы предположить. Вместо этого маркировка гамбургер-меню словом «меню» делает его более понятным и простым в использовании.

Используйте четкую, доступную копию

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

Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать» — лучше всего подходят для активных кнопок.

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

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

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

При проектировании

учитывайте размеры кнопок (и досягаемость) Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах рук 3,5 дюйма? Может быть, нет, но вы можете знать, почему это важно.

Размер кнопок и их расположение на экранах смартфонов и мобильных устройств во многом влияет на UX.

• Если кнопка находится слишком далеко от одной стороны экрана, пользователь может не дотянуться до нее большим пальцем
• Если кнопка слишком маленькая, ее может быть трудно нажать большим или большим пальцем или более плотный
• Плохая контрастность может сделать кнопки плохо видимыми и, следовательно, трудными для эффективного нажатия на мобильных устройствах

Поскольку люди чаще всего полагаются на свои большие пальцы для прокрутки мобильных экранов, это взаимодействие стало известно как «зона большого пальца». ” Хотя кнопки часто нажимаются или нажимаются, они также могут быть ползунками, карточками, каруселями и многим другим.

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

Доступность имеет значение и для кнопок

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

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

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

Помните: чем меньше, тем лучше, когда вы разрабатываете эффективные, инклюзивные кнопки, которые работают, особенно если эта кнопка является вашим призывом к действию (CTA). На каждой странице вашего сайта должен быть как минимум один призыв к действию, но добавление слишком большого количества может снизить срочность и побудить пользователей сделать следующий логический шаг.

Измерьте влияние ваших кнопок

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

Но как именно вы можете эффективно протестировать кнопки на своем веб-сайте?

Лучший способ протестировать кнопки, особенно в CTA, — это A/B-тестирование. A/B-тестирование позволяет настроить два подхода к CTA и проверить эффективность каждого, чтобы увидеть, какие варианты лучше всего находят отклик у реальных людей.

Бесплатные инструменты, такие как Google Analytics или Диспетчер тегов Google, можно быстро и легко настроить для отслеживания обеих версий CTA или кнопки для достижения наилучших результатов.

Тепловая карта с помощью таких инструментов, как Hotjar или CrazyEgg, также может дать вам представление о проценте кликов и интересе к прокрутке. Благодаря ограниченному времени работы на вашем сайте тепловые карты могут отслеживать тысячи кликов по различным другим элементам, таким как навигация, текстовые ссылки, нижние колонтитулы и многое другое.

Кнопки — это мощный инструмент, если их правильно использовать

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

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

Как добавить плавающую кнопку «Свяжитесь с нами» на свой веб-сайт

Источник: https://getsitecontrol.com/usecase/contact-us-button/

Нина Де ла Круз 5 минут чтения

💥 Присоединяйтесь к 5 тысячам подписчиков

Наличие кнопки «Свяжитесь с нами» важно для любого веб-сайта, потому что она позволяет вашей аудитории задавать вопросы и показывает, что вам небезразлично, что они думают. Лучше всего добавить тот, который выглядит компактным и ненавязчивым, но всегда остается на виду. В этом посте мы покажем вам, как это сделать с помощью конструктора всплывающих окон Getsitecontrol.

---

Когда посетители нажимают на кнопку, на той же странице появляется контактная форма, подобная этой: Служба поддержки, Google Диск или любое другое приложение по вашему выбору. Представленные материалы также хранятся на панели инструментов Getsitecontrol.

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

Создайте свою контактную форму

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

Начните сегодня →

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

Шаг 1. Выберите шаблон контактной формы

Чтобы начать, щелкните любой шаблон из галереи и следуйте инструкциям в правой части страницы. После этого выбранная контактная форма появится на панели инструментов Getsitecontrol:

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

Если вы хотите изменить цветовую тему или шрифт текста, используйте кнопку  9Меню 0207 Theme вверху.

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

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

Шаг 2. Выберите шаблон плавающей кнопки

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

Клейкая боковая контактная кнопка

Из всех форматов контактных кнопок этот самый популярный. Он прикрепляется к краю страницы и остается там, пока посетители прокручивают ее вниз.

Предварительный просмотр в реальном времени →

Чтобы добавить индивидуальности, вы можете изменить призыв к действию и использовать что-то вроде «Есть вопросы?» или «Нужна помощь?» вместо стандартной копии «Свяжитесь с нами».

Липкая нижняя кнопка

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

Предварительный просмотр в реальном времени →

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

Плавающая кнопка «Свяжитесь с нами» с изображением

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

Посмотреть предварительный просмотр в реальном времени →

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

Выбрав плавающую кнопку, добавьте ее на панель управления Getsitecontrol так же, как вы сделали ранее с контактной формой.

Шаг 3. Подключите кнопку к форме

Последний шаг – соедините кнопку и контактную форму, чтобы нажатие на кнопку вызывало всплывающую форму.

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

Когда вы закончите с настройками, нажмите Сохранить и закрыть , чтобы сохранить изменения.

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

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

Советы по настройке

Теперь, когда у вас есть общее представление о том, как быстро добавить кнопку контакта на свой веб-сайт, вот несколько советов, которые могут пригодиться вам в будущем.

• 💡 Вы можете использовать плавающую кнопку для запуска любого всплывающего окна, а не только контактной формы. В качестве примеров рассмотрим форму технического запроса, форму обратного звонка или форму заказа.
• 💡 Вы можете настроить точное время и условие для появления и исчезновения кнопки «Свяжитесь с нами» со страницы — если вы не хотите, чтобы она отображалась постоянно. Для этого используйте Таргетинг вкладка.
• 💡 Вы также можете настроить автоответчик и отправлять персонализированные электронные письма тем, кто заполнил форму, поскольку она включает поле для захвата электронной почты. Для этого используйте вкладку Уведомления .

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

Так чего же ты ждешь? Добавьте его на свой веб-сайт прямо сейчас и будьте доступны для общения.

Получите кнопку «Свяжитесь с нами»

Создайте учетную запись Getsitecontrol, чтобы добавить контактную форму на свой веб-сайт. Занимает меньше минуты, без программирования.

Начните сегодня →

Вы читаете сборник примеров использования Getsitecontrol, в котором мы рассказываем о передовых методах использования всплывающих окон на веб-сайтах. Этот вариант использования является частью раздела «Сбор отзывов».

Получить версию для печати

Загрузите PDF-версию нашего варианта использования, чтобы вам было проще читать ее в автономном режиме и делиться ею с коллегами.