Адаптивная форма обратной связи на CSS
В блоге или на сайте владелец и посетитель хотят общаться друг с другом и отправлять сообщения. И здесь как раз контакт или форма обратной связи, станет лучший способом выслушать ваших посетителей или потенциальных клиентов. Вот почему нам нужна контактная форма на нашем сайте. Если кто-то не знает javascript, а также библиотеки, то этот материал для вас, ведь идет на чистом HTML CSS.
Итак, сегодня рассматриваем актуальное направление, которая в обязательном порядке должна как функция присутствовать на всем тематических ресурсах, это связь, но мы создаем контактную форму при помощи CSS с адаптивным дизайном. Она создана без какой-либо библиотеки JS, но я использовал одну внешнюю библиотеку CSS для простого создания эффекта анимации.
При проверках на работоспособность, стиль дизайна и функционал, так представлен по умолчанию. Где самостоятельно можно поменять оттенок цвета и добавить больше оформление, хотя по мне такая функция должна быть понятна и доступна по одному клику.
Это переделано по цветовой палитре с добавлением элементов:
Так форма идет по умолчанию, что стили находятся в архиве, так как здесь самостоятельно добавил элементов и изменил палитру с тенями. Ведь окно с анимацией, где при открытие страницы оно выезжает с левой стороны, что смотрится красиво.
Стилизованная рабочая форма обратной связи
Создание формы обратной связи с валидацией, оформлением, отправкой письма и описанием
Преимущество данной формы в том, что в ней нет необходимости ставить капчу и мучать тем самым ее отправителей, а не спамботов.
Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php
Так выглядит форма:
HTML код формы:
Немного о коде:
Комментарии:
Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!
Подскажите пожалуйста как изменить надпись Ваше сообщение отправлено. В коде js меняю на Message sent но всеравно на руском остается. Спасибо!
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две.
В JS нужно немного поменять, через each сделать форму.
Никак не соберусь обновить тут коды…
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат.
Например:
height: 50px; — высота верхних полей и кнопки
min-height: 170px; — высота поля с доп. инфой
Вопрос такой: как вставить в js код — цель на отправку формы метрики?
Когда форма отправлена:
всё работает по кайфу
Добрый день!
Спасибо за крутое решение… долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Я про отправку файлов не писал в блоге, но можно почитать тут например.
Или лучше использовать что то более профессиональное — PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит.
Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере.
Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found — файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php
Скиньте результат сюда или в ВК/Телеграм
Добрый день! А файл jQuery как назвать необходимо?
Правильное оформление форм на сайте
Правильно составленная форма оформления заказа поможет не спугнуть посетителя на завершающем этапе конверсии.
Слишком долгое, сложное или непонятное её оформление, как правило, приводит к отказу от покупки. В таком случае все затраты на привлечение посетителей становятся напрасными — именно поэтому форму оформления заказа очень важно сделать правильно. В этом вам поможет наш список правил.
Важно, чтобы оформление заказа не отпугивало посетителя. В первую очередь, не нужно делать его сложным или долгим. Постарайтесь собирать только самую необходимую информацию.
Во-первых, используйте подсказки. Банальное «Иванов Иван Иванович» в поле для ввода ФИО подсказывает пользователю о том, что необходимо прописывать инициалы полностью, избегая формулировок вроде «Иванов И.И.». Поля ввода номера телефона обязательно должны иметь маску.
Хорошим тоном является также подсветка ошибок при вводе. При отправлении форма должна проходить валидацию — если данные введены неверно, форма не отправляется на сервер, а пользователю показывается соответствующее сообщение. Ситуация, если форму можно отправить, заполнив её как угодно, является ошибкой.
Бывают ситуации, когда допущенная в начале формы ошибка тянется на протяжении всего оформления. И когда пользователь нажимает заветное «Подтвердить заказ» страница обновляется, данные сбрасываются, выводится сообщение об ошибке и необходимо заполнять всё заново.
Это натуральное издевательство над своими клиентами и, по совместительству, лучший способ их отпугнуть.
Лучшим решением будет сохранять не только информацию, введённую в правильном формате, а вообще всю. Поля с ошибками можно просто выделить каким-либо образом. Это поможет избежать повторения неверного ввода.
Посетитель должен всегда знать, сколько шагов до конца оформления ему предстоит пройти, в этом поможет визуализация. Оптимальным является значение в три-четыре этапа, сгруппированные по логическому принципу.
Например, первый этап — общая информация о заказчике (ФИО, номер телефона и так далее), второй — адрес доставки, третий — выбор способа оплаты и четвёртый — проверка информации и подтверждение сделки.
Оформление заказа должно быть доступно и для незарегистрированных пользователей, потому что регистрация — это ещё один дополнительный шаг в цепочке конверсии, а чем эта цепочка длиннее, тем меньше вероятность, что клиент дойдёт до финала.
Если вы всё же решились добавить этот шаг, то сделайте его максимально простым и быстрым. Хороший пример — регистрация в один клик, например, через социальные сети.
Самый популярный вариант — ввод капчи. С первого взгляда это хороший вариант, но исследования в области маркетинга показывают, что в реальности это отпугивает клиентов. На данный момент есть множество технологических решений, например «невидимые капчи», которые позволяют отсекать спам-ботов без непосредственных усилий пользователей.
Ссылки на Пользовательское соглашение и Правила обработки персональных данных на данный момент необходимы в соответствии с 152-ФЗ, а их отсутствие карается наложением штрафа на владельцев сайта.
Да и современный пользователь становится в этом плане всё более осторожным. Поэтому ссылки на соответствующие документы должны однозначно присутствовать при оформлении формы, в противном случае к вашему ресурсу может возникнуть недоверие.
Стоит подчеркнуть, что все описанные выше правила относятся и к формам обратной связи «Заказать звонок», «Купить в один клик», «Получить консультацию». Однако тут присутствует также своя специфика:
Создание формы заказа и форм обратной связи содержит в себе множество подводных камней, которых необходимо избегать. Для того, чтобы не препятствовать пользователю совершить конверсию, пользуйтесь описанными выше правилами.
Форма обратной связи дизайн
Затем приходим к тому, чтобы иметь возможность спросить у клиентов то, о чем мы хотим узнать больше о них, например, проектные компании, возможно, захотят спросить у клиентов, где их бюджет или какое поле они работают, чтобы быть лучше классифицировать каждое электронное письмо и каждого потенциального клиента. И тогда есть последовательность удобства использования. Контактные формы позволяют легко получать и отвечать на электронные письма, так как большую часть времени они все имеют одинаковое ощущение и внешний вид.
В то время как платформы для ведения блогов или сайтов, то предоставляют своим пользователям массу интересных плагинов для контактных форм, кто полагается на создание собственных сайтов, естественно, придется полагаться на шаблоны контактных форм. В списке мы изучаем лучший бесплатный HTML5 и шаблоны контактных форм CSS3, которые добавят некоторую реальную личность и почувствуют модернизацию на ваших страницах контактов. Добавление этих шаблонов на ваши страницы будет невероятно простым, так же просто, как создать несколько HTML и CSS файлов.
1. Элегантная контактная форма
2. Bootstrap 3 Контактная форма
Bootstrap предлагает так много различных элементов, как значки, типы шрифтов, поля формы, что было бы позором не иметь надлежащую контактную форму, созданную с использованием этой интерфейсной структуры. Jay Deutsch понимает это и выдает очень сложную контактную форму, что используется каждый элемент Bootstrap, который можно использовать для создания профессиональной контактной формы.
Этот в частности был создан для агентств и предприятий, где хотят собирать онлайн бизнес через единую форму, поэтому ожидайте, что сможете собирать информацию, такую как полный адрес лица, обращающегося к нему, номер своего телефона и их краткое описание проект, что они хотят выполнить.
3. Отзывчивая контактная форма
Эта оптимизированная для мобильных устройств форма использует бокс-макет со специальной функцией «выпадающее меню». Выпадающие списки могут быть указаны, чтобы помочь вам лучше классифицировать получаемые вами письма и в свою очередь, либо распределить их по приоритету, либо просто лучше понять, какую поддержку люди ищут больше всего, а затем, возможно предоставить различные варианты поддержки в этом площадь. Цвета довольно темные с этим, но все это можно изменить, используя базовые знания CSS.
4. Контактная форма Bootstrap 3
Давайте посмотрим на другую форму Bootstrap, на этот раз из Shuvo Habib. Существует не так много, чтобы сказать об этом, кроме того, что это форма полной ширины, которая будет собирать основную требуемую информацию от ваших посетителей и размещать ее на ваш адрес электронной почты так, как вы хотите ее получить.
5. Морская тематика контактной формы
В сети интернет на одном форуме предоставили эту форму с анимацией, что может быть самой красивой и интерактивной формой контакта в нашем списке. Форма на морскую тематику представляет собой полнофункциональную форму контакта, которая распространяется на JavaScript и CSS3, чтобы обеспечить очень красивый анимированный контактный вид, который будет соответствовать сайтам как интересы детей, анимация, графический дизайн или другие интерактивные типы веб-сайтов. Дизайн, использование шрифтов и фактическая последовательная анимация будет трудно сопротивляться даже для среднего блогера.
Создаем красивую форму обратной связи самостоятельно
По моему глубокому убеждению, очень важно осознавать [позитивное] влияние HTML5 на контактные формы и на то, как они будут функционировать в ближайшие годы.
И действительно, мы не можем на сегодняшний день реализовать все новые функции, но вы ведь не хотите быть в рядах отстающих, когда эти функции наконец-то получат широкое распространение?
Именно поэтому данная статья посвящена новым функциям HTML5, которые уже поддерживаются всеми основными браузерами, и частично теми, которые всеми считаются отстающими. Предлагаю вашему вниманию руководство по тому, как сделать форму обратной связи с помощью HTML5.
Дизайн
Прежде всего, хочу обратить ваше внимание на то, что это не учебник по Photoshop. Я разработал дизайн красивой формы обратной связи, но в дальнейшем мы сфокусируем свое внимание на ее создании с использованием новейших методов кодирования и на том, как сделать, чтобы она корректно функционировала.
Разметка HTML5
Итак, у нас есть дизайн контактной формы, с которой нам предстоит работать. Теперь наша задача – построить структуру данной формы при помощи HTML5, чтобы, в конечном счете, у нас получилась отличная форма обратной связи для сайта на html и php.
Doctype
У нас есть пустой документ PHP, давайте же приступим к созданию соответствующего doctype, который, между прочим, создать при помощи HTML5 намного проще, чем при использовании предыдущей версии!
Почувствовали разницу? Как говорится – no comments; победитель очевиден. Более того, пример с doctype не единичен, т.к. многие теги и атрибуты отныне у HTML5 представлены в намного упрощенном виде – теперь нет пугающих по длине кодов и ужасающих по длине строк JavaScript.
Структура
Следующим нашим шагом должно быть кодирование основной структуры страницы. Для этого нам следует еще раз взглянуть на дизайн контактной формы и разделить его, исходя из логики, на секции.
В данном случае мы имеем секции: «заголовок», «контент» и «футер». Все очень просто, не так ли? А с использованием HTML5, будет все еще намного проще!
Именно так, я не шучу. Никаких дивов. Новые теги HTML5 обладают реальным смыслом и целями, использовать которые намного разумнее, чем повсеместное втыкание дивов.
Как вы видите, я назначил каждому элементу класс «body», чтобы показать, что они относятся к основному контенту и для того, чтобы они были оформлены в соответствующем стиле. Вы, конечно, можете все это проделать с помощью дивов, но только с несколькими основными body-элементами; это будет также просто как назначение классов.
Форма
Вот как выглядит эта разметка. Дайте-ка пояснить в ней несколько вещей.
Input Tag
Input Name
Ко всем input > тегам присужден атрибут «name». Мы еще поговорим об этом подробнее чуть позже, когда перейдем к созданию PHP-скрипта, который будет обрабатывать данные, введенные в контактную форму.
Input Type
Введение атрибута «type» демонстрирует значительное преимущество HTML5 по сравнению с XHTML. Но, к сожалению, многие новые input > types не могут быть использованы на всю мощь из-за пока еще минимальной поддержки; радует то, что ситуация в скором времени должна измениться и эти атрибуты взвалят на себя огромную часть работы, сделав нашу жизнь намного проще.
Однако уже сейчас мы можем увидеть, пусть и небольшие, но некоторые преимущества, используя новые атрибуты types. Как, например, сплошь положительный атрибут type=»email». Пусть его позитивное влияние и не столь значительно, но он стоит того, чтобы его
прописать, хотя все браузеры, которые его не поддерживают, распознают данный атрибут как type=»text». А вот с айфонами ситуация совсем другая: данный атрибут вызывает изменения в раскладке клавиатуры при переходе к полю ввести «email»: клавиша пробел становится меньше по размеру, а в центре появляется знак “@”.
Атрибут Placeholder
Данный атрибут является одной из основных инноваций в HTML5, позволяющей веб-разработчикам делать вещи, которые ранее можно было осуществить лишь при использовании нескольких строк JavaScript.
Атрибут «placeholder» достаточно хорошо поддерживается большинством последних версий браузеров. Он позволяет присваивать значение (т.е. текст) текстовому полю, которое при постановке курсора исчезает и если текст не был введен в выбранное поле, а курсор убран – снова возникает.
В своей работе я всегда пользовался данной функцией, однако раньше, чтобы ее запустить, мне необходимо было прописывать громоздкие уродливые JavaScript коды.
А вот и то, что получится после прописки всех разметок к странице:
Не очень-то и симпотично, не правда ли? Вот и пришло время перейти к таблице стилей CSS, чтобы придать нашей css форме обратной связи, так сказать, товарный вид, а именно приблизить ее к оригинальному дизайну, что был представлен в начале статьи. Давайте придадим тексту формы привычную ориентацию: чтобы текст полей располагался не слева направо, а сверху вниз.