Интеграция кнопки/ссылки, которая при нажатии нажимается вниз, чтобы соответствовать форме.

Приветствую всех, Я пытаюсь интегрировать на свой веб-сайт кнопку/ссылку, которая при нажатии нажимает вниз, чтобы встретить форму на веб-сайте. Мой дизайнер воплотил идею воедино, однако мой разработчик не знает, как действовать дальше. Используемая нами CMS — Wordpress. Сайт:
http://healthcareinsured.co.uk/

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

>Хм, возможно, с помощью javascript. Или код преобразования на кнопке при нажатии, с которого я бы начал. Если это невозможно, возможно, при нажатии кнопки к форме можно просто добавить рамку?

Я также приложил оригинальный макет дизайна и ее инструкции, которые объясняют, как он должен работать и выглядеть при нажатии.
http://s000.tinyupload.com/index.php?file_id=48802369301704464479

>

СТРАНИЦА 2 PDF: На второй странице PDF-файла показаны состояния опрокидывания или щелчка.

Для меня пока что будут происходить только клики в первом разделе.



Я подумал, что было бы полезно иметь кнопку призыва к действию для формы, а также форму на главной странице в соответствии с навигацией по меню - если пользователь должен был выделить или нажать кнопку «Получить мою цитату» - верхняя правая страница 2 PDF-файл, тогда ссылка появится, как на странице 3 PDF-файла.

При наведении курсора мыши или нажатии на синюю/белую кнопку меню – верхняя правая страница 2 PDF-файла станет зеленой/с синим текстом, как на странице 3 PDF-файла.

При наведении курсора мыши или нажатии кнопки «Получить цитату» внутри формы (синий/белый) на странице 2 PDF-файла текст изменится на тот же зеленый, что и фон формы, чтобы показать пользователям, что он интерактивный, как на странице 1 PDF-файла.

Кто-нибудь может подробно объяснить, как это будет интегрировано?

Заранее спасибо.

Хм... Ладно, дизайн и ваш вопрос совершенно не имеют значения. Первое: и кнопка, и форма полностью видны одновременно.

НЕТ НИКАКОГО способа, которым люди не поймут, что речь идет о форме.

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

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

Наличие одного и того же текста в настоящее время может сбить с толку. Четвертое: вы слишком много думаете об этом.

Активный: когда форма в фокусе (заполняется) - в фокусе

Неактивный: когда форма находится на странице, но в данный момент не используется.

Т.е. то же самое и с формой, меняющей цвет.

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

Хорошее правило веб-разработки — свести количество различных цветов к минимуму — скажем, всего 5-7 цветов.

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

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

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

Можете ли вы объяснить, что вы подразумеваете под активным/неактивным цветом — вы имеете в виду разделы формы, которые необходимо заполнить? А если бы я добавил рамку, какого цвета она должна быть? Я думал о красном, но он выглядит слишком резким с точки зрения контраста с цветом, хотя он и привлекает внимание, но может выглядеть странно.

Вы хотите сказать, что хотите, чтобы кнопка вверху делала то же самое, что и кнопка на странице? или вы хотите, чтобы это выглядело так, будто нажимается физическая 3D-кнопка? Какова цель размещения кнопки в двух местах одновременно?

Хорошо спасибо. Да, я сам думал, что кнопка ненужна. Яркая граница звучит хорошо. Какой цвет фона вы бы предложили? Я также подумывал о том, чтобы сменить весь синий цвет на «Bing Blue», так как читал, что это синий цвет с самой высокой конверсией.

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

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

Теория цвета может быть полезной, но может и не иметь вообще никакого значения.

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