В ответ на такой вопросы первое, что приходит в голову: «Удобными и рабочими». И это в общем-то логично. Ведь в противном случае, какой смысл в наличие на сайте красивой формы обратной связи, которой не пользуются? Но обо всем по порядку.
Множество форм - одна цельНачнем с того, для чего вообще нужны формы обратной связи на сайте? Владелец сайта должен иметь возможность связаться с посетителями своего сайта. Люди стремятся экономить свое время на поиске информации о нужных товарах, уточнении их качеств и характеристик, цен и в апогее - совершении заказа. Формы обратной связи - важный канал, через который происходит коммуникация между посетителем сайта и его владельцем, продавцом и покупателем. Если этот канал связи не работает или оказывается неудобным для посетителя, он может отказаться от идеи обратиться к вам, а, значит, от идеи стать вашим реальным клиентом.
То, насколько регулярно и активно используются формы обратной связи на Вашем сайте, расскажет о Вашем сайте не хуже аналитики посещений.
Отсюда логично вытекает вывод, который уже был озвучен выше - формы обратной связи должны быть удобными и должны работать!
Стоит заметить, что вторая часть этого вывода зависит не только от корректности программирования. С технической стороны форма может работать идеально, но оператор должен быстро отвечать на обращения
, поступающие с сайта. Иначе формы обратной связи окажутся бесполезны. Если оператор перезвонит посетителю через два дня, необходимость в заказе товара или услуги у человека может попросту исчезнуть.
Форм обратной связи может быть великое множество («Заказать обратный звонок», «Задать вопрос», «Оставить отзыв», «Заполнить форму заказа», «Обратиться к руководителю» и т. д.), и использоваться они могут для разных задач. Но цель у всех будет в сущности одна - обеспечить связь посетителя сайта и его администратора или владельца, получить контакты посетителя для дальнейшего взаимодействия с ним.
Семь подсказок на заметкуВспомним несколько простых правил, которые нужно учитывать при разработке и размещении ФОС на сайте.
Форма должна располагаться так, чтобы посетителю было удобно ее найти.
Расположите форму на видном месте - чтобы посетителю вашего сайта не пришлось прикладывать усилия к тому, чтобы среди множества разных элементов на странице найти форму обратной связи или бесконечно скролить страницу вниз.
Традиционно формы можно разместить в хедере сайта или на странице контактов.
Можно при необходимости продублировать в футере ключевые формы, чтобы не заставлять посетителей, просмотревших всю страницу, пролистывать ее снова вверх:
Если есть страницы с продукцией или услугой, на которую действует специальное предложение и посетитель может получить ее через он-лайн заказ, разместите на этой странице форму быстрого звонка или оформления заказа.
Кроме того, это позволит «зацепить» посетителя, который уже заинтересован в продукте или услуге. Посетитель посмотрел описание, гарантии, цены, решил, что продукт или услуга ему подходят и вот, мы ему сразу предлагаем, не уходя с этой страницы, оставить заявку на заказ этой услуги.
Форма должна отображаться и работать одинаково корректно на всех устройствах и во всех браузерах.
Или кратко – проверьте кроссбраузерность и кроссплатформенность форм обратной связи на вашем сайте. Форма может быть заметной и удобной для заполнения с ноутбука или стационарного компьютера, но на планшете поле для ввода данных может оказаться слишком узким и неудобным для внесения в него текста с сенсорного экрана. Будет ли тогда клиент раз за разом пытаться внести свои данные, чтобы связаться с вами? Ответ очевиден.
Форма должна быть краткой и понятной.
Что это значит? Форма не должна состоять из большого количества полей или этапов заполнения. Если, конечно, в этом нет жесткой необходимости. Люди стремятся к простоте, они не хотят тратить много времени на то, чтобы разобраться и заполнить десять тысяч полей.
Если услуга подразумевает получение довольно подробной информации, упростите задачу клиенту (если это, конечно, возможно). Выделите несколько ключевых полей, которые нужно заполнить:
Выглядит более удобно, чем, например:
Лучше перезвонить и устно уточнить все, что вам нужно, но облегчить посетителю заполнение формы. И повысить тем самым шансы на то, что он к вам обратиться!
Продолжая тему понятности, обратите внимание на то, чтобы у формы был заголовок – «Заказать обратный звонок», «Заказ вызова замерщика», «Заказ бесплатной консультации» и т.д. Этот же заголовок лучше дублировать в электронных оповещениях, которые будут приходить с формы на вашу почту. Тогда не только посетитель вашего сайта не запутается и не забудет заявку, на что именно он оформляет. Но и вы сами получите четкие данные, какая именно информация интересовала посетителя, оставившего заявку. Это поможет быстро сориентироваться при дальнейшем общении с посетителем и корректно построить диалог.
Форма должна обладать приятным и практичным дизайном.
Все поля должны быть хорошо видны. Если при создании дизайна формы используется много цветов, стоит обратить внимание на то, чтобы их не было слишком много, чтобы они сочетались и не были чрезмерно яркими. Человек, заполняющий форму, не должен напрягать зрение. То же самое относится к подбору цвета для текстовых сообщений.
Лучше избегать сочетания темного на темном. Если, например, на темно-синем фоне вы сделаете темно-красную или темно-зеленую надпись «Ваше сообщение отправлено», его просто не будет видно.
Форма должна содержать призыв к действию.
Небольшой штрих, призывающий посетителя совершить или завершить действие. В нашем случае отправить сообщение с сайта!
Также кнопку лучше выделить контрастным цветом. Вместе с призывом к действию, это сделает ее заметной, и привлечет внимание посетителя.
Форма должна легко сворачиваться.
Итак, форму легко найти, она обладает приятным дизайном, удобна для заполнения. Что еще?
Не забудьте попросить разработчиков добавить «крестик» на форму, чтобы можно было ее закрыть. Или настроить автоматическое сворачивание формы после ее заполнения.
Кажется, что мелочь, а общую картину может подпортить.
Например, посетитель оставил заявку на сайте и хочет вернуться к просмотру сайта. НО! Форма висит, не исчезает, как ее закрыть – непонятно. Или другой вариант – посетитель передумал писать заявку, а решил сам позвонить. Получиться может неприятно.
Настройка ответного сообщения.
Как-то вот так…
Человек, отправивший сообщение, хочет быть уверен, что его сообщение будет получено вами и рассмотрено. Технически настройка автоматического оповещения много времени не отнимет, зато укрепит уверенность посетителя в том, что его сообщение не останется без ответа. Обычно это используется в тех формах, где при заполнении требуется указать свою электронную почту. Впрочем, современные сервисы позволяют настраивать автоматические оповещения и через SMS.
Подводя итогТонкостей и прочих деталей очень много: можно экспериментировать с формой и дизайном, можно дорисовать ненавязчивую графику по теме и т.д. Но базовые критерии не меняются. Ко всему сказанному выше хочется добавить большое, но немаловажное пожелание – периодически проверяйте работу форм обратной связи на сайте. Технические сбои не должны быть препятствие в работе вашего бизнеса!
Форма обратной связи, или если по другому, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные , должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению.
Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами 3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) для контактных форм, выполненных в светлых и тёмных тонах.
В зависимости от цвета основного фона страницы, визуально будет меняться базовый цвет фона самой формы. Размер формы зависит от размеров контейнера, в котором форма будет расположена.
Html каркас формы стандартный, необходимые поля ввода и кнопка «Отправить», для связки с CSS, каждому элементу формы присвоен определённый класс, ничего сложного, разобраться будет нетрудно.
| < form> < input name= "name" placeholder= "Укажите ваше имя!" class = "name" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> < input name= "submit" class = "btn" type= "submit" value= "Отправить" /> |
CSS
По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства CSS3, линейный градиент, эффект тени, слегка скруглённые углы и т.д., постарался добиться некой кроссбраузерности для этих свойств, но в старых версиях браузеров, форма будет выглядеть всё же несколько иначе ((.
| /* Базовый стиль формы */ form { margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius: 5px; - webkit- border- radius: 5px; border- radius: 5px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; background: rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 110px; border: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 25px; padding- right: 20px; padding- top: 12px; margin- bottom: 20px; overflow: hidden; } /* Поля ввода */ input { width: 100 %; height: 48px; border: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 20px; padding- right: 20px; margin- bottom: 20px; } input[ type= submit] { cursor: pointer; } input. name { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. email { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. message { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } ::- webkit- input- placeholder { color: #fff; } :- moz- placeholder{ color: #fff; } ::- moz- placeholder { color: #fff; } :- ms- input- placeholder { color: #fff; } input: focus, textarea: focus { background- color: rgba(0 , 0 , 0 , 0.2 ) ; - moz- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; - webkit- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; overflow: hidden; } /* Стили для кнопки отправить */ . btn { width: 138px; height: 44px; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; float: right; border: 1px solid #253737; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); background: - moz- linear- gradient(top, #6da5a3, #416b68); background: - ms- linear- gradient(top, #6da5a3, #416b68); background: - o- linear- gradient(top, #6da5a3, #416b68); background- image: - ms- linear- gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; - webkit- border- radius: 6px; - moz- border- radius: 6px; border- radius: 6px; - webkit- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; text- shadow: #333333 0 1px 0; color: #e1e1e1; } . btn: hover { border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top, #77b2b0, #416b68); background: - o- linear- gradient(top, #77b2b0, #416b68); background- image: - ms- linear- gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } . btn: active { margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); background: - ms- linear- gradient(top, #ffcc00, #ff6600); background: - o- linear- gradient(top, #ffcc00, #ff6600); background- image: - ms- linear- gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; - webkit- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; outline: none; } |
/* Базовый стиль формы */ form { margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255, 255, 255, 0.4); width: 100%; height: 110px; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; overflow:hidden; } /* Поля ввода */ input { width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; } input { cursor:pointer; } input.name { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.email { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.message { background: rgba(255, 255, 255, 0.4); padding-left:25px; } ::-webkit-input-placeholder { color: #fff; } :-moz-placeholder{ color: #fff; } ::-moz-placeholder { color: #fff; } :-ms-input-placeholder { color: #fff; } input:focus, textarea:focus { background-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); overflow: hidden; } /* Стили для кнопки отправить */ .btn { width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border: 1px solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -webkit-linear-gradient(top, #6da5a3, #416b68); background: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear-gradient(top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); padding: 10.5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; } .btn:hover { border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient(top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } .btn:active { margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: -webkit-linear-gradient(top, #ffcc00, #ff6600); background: -moz-linear-gradient(top, #ffcc00, #ff6600); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; outline: none; }
Может и это вам будет интересно:2. Контактная форма в светлых тонахВторой вариант оформления формы обратной связи представлен в светлых тонах, размеры формы (ширина, высота), как и в первом варианте не фиксированы, и легко будут вписываться в размеры контейнера где эта формы будет расположена.
Как и в первом варианте, структура Html контактной формы стандартная, элементы формы с определёнными классами, соответствующими классам в CSS.
| < form> < input name= "name" placeholder= "Укажите ваше имя!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> < input name= "submit" class = "button" type= "submit" value= "Отправить" /> |
CSS
При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины width , благодаря чему, форма легко подстраивается под размеры контейнера в котором она будет расположена. Цветовая гамма кнопки «Отправить», её размеры и расположения, легко меняются, достаточно поэкспериментировать с определёнными значениями.
| /* Базовые стили формы */ form{ margin: 0 auto; max- width: 95 %; box- sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255 , 255 , 255 , 1 ) ; - webkit- box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; } /* Стили полей ввода */ . textbox{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; font- family: "Open Sans" , sans- serif; font- size: 18px; padding: 10px; margin- bottom: 30px; } . message: focus, . textbox: focus{ outline: none; border: rgba(24 , 149 , 215 , 1 ) 2px solid; color: rgba(24 , 149 , 215 , 1 ) ; } /* Стили текстового поля */ . message{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 120px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; - moz- border- radius: 3px; font- size: 18px; font- family: "Open Sans" , sans- serif; - webkit- border- radius: 3px; border- radius: 3px; display: block; padding: 10px; margin- bottom: 30px; overflow: hidden; } /* Базовые стили кнопки */ . button{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 0px solid; box- sizing: border- box; padding: 10px; background: #90c843; color: #FFF; font- family: "Open Sans" , sans- serif; font- weight: 400 ; font- size: 16pt; transition: background . 4s; cursor: pointer; } /* Изменение фона кнопки при наведении */ . button: hover{ background: #80b438; } |
/* Базовые стили формы */ form{ margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); } /* Стили полей ввода */ .textbox{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; } .message:focus, .textbox:focus{ outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba(24,149,215,1); } /* Стили текстового поля */ .message{ background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border-radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; } /* Базовые стили кнопки */ .button{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; background:#90c843; color:#FFF; font-family: "Open Sans", sans-serif; font-weight:400; font-size: 16pt; transition:background .4s; cursor:pointer; } /* Изменение фона кнопки при наведении */ .button:hover{ background:#80b438; }
Вариантов оформления контактных форм масса, главное иметь чуточку фантазии и базовые знания CSS. На страницах моего блога, вы можете найти другие, и примеры стилистики форм обратной связи.
Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем))).
С уважением, Андрей.
Здравствуйте, уважаемые друзья и гости блога! Обратная связь для сайта — это одна из наиболее значимых функций, которая позволяет блоггеру общаться со своими посетителями. Но есть одна загвоздка — плагины выводящие обратную связь для сайта очень много весят!
Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте «Contact Form 7 «, а ему в нагрузку еще требовался второй плагин выводящий капчу «reCaptcha «. Вот таким образом я решил избавиться сразу от двух, довольно весомых плагинов, используя форму обратной связи, которая не требует ни каких плагинов и легка в установке на сайт. Сейчас я вам о ней расскажу и конечно же дам скачать файлы для того, чтобы и Вы смогли себе создать аналогичную обратную связь для сайта …
И так, удалив окончательно плагины для создания обратной формы со своего сайта, я приступил к изготовлению легкой и надежной формы обратной связи без использования каких либо плагинов. И вот, что у меня получилось:
Посмотреть и проверить работоспособность моей формы обратной связи для сайта Вы сможете на странице « «. Напишите в моей форме для связи на сайте и я вам отвечу!
Теперь давайте перейдем к самому главному и создадим свою собственную, не зависящую ни от каких плагинов обратную связь для сайта …
Делаем обратную связь для сайта без плагинов!Все, что нам для этого понадобится: мой блог сайт со статьей «Обратная связь для сайта «, текстовый редактор и конечно же ваше желание создать свою собственную форму для связи на сайте, чтобы облегчить его избавившись от не нужных и тяжелых плагинов!
Вот вам код HTML самой формы обратной связи для сайта, который Вы сможете вставить на свой сайт или блог в любое место, у меня это страница для контактов:
Форма обратной связи
Как вас зовут
Электронная почта
Тема сообщения
Отправить сообщение
Обратите внимание на некоторые важные вещи, которые вам нужно выполнить в этом коде:
Этот файл Вы должны залить на свой хостинг в корневую папку движка сайта! Но сначала проверьте исправили Вы его или нет!
В строке, где написан текст «АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ! «, вам нужно обязательно его исправить на свой Е-майл адрес, который у Вас на хостинге. Если у Вас нет почты на хостинге, то обязательно ее заведите. Это не сложно!
Теперь вам нужно подключить скрипт, который подключает библиотеку jQuery на сайте для корректной работы нашей системы «обратная связь для сайта «. Сначала проверьте на своем сайте, может быть этот скрипт уже установлен, если не знаете как это сделать, задайте вопрос в поддержку на своем хостинге.
Вот этот скрипт:
Или можете добавить на WordPress в файл functions.php вот эту функцию:
Function my_jquery() { wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery"); }
Она заменяет скрипт и также подключает библиотеку jQuery на сайте WordPress.
Теперь подключаем на своем сайте скрипт, который будет с файлом mail.php совместно, отправляя ваши письма. Для этого нам нужно создать вот такой js файл contact.js и отправить его на ваш сайт в папку со скриптами вашей активной темы оформления, которая так и назвается js . Если ее нет у Вас на сайте, то создайте!
Вот этот скрипт:
JQuery(document).ready(function($) { $("#contact").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/mail.php", data: str, success: function(msg) { if(msg == "OK") { result = "Сообщение отправлено"; $("#fields").hide(); } else {result = msg;} $("#note").html(result); } }); return false; }); });
Почти закончили! Теперь нам осталось залить на наш хостинг стили в ваш файл CSS, который отвечает за стили темы сайта. Если этого не сделать, то наше вновь созданная обратная связь для сайта будет не красивой и однотонной.
Вот код стилей формы обратной связи для сайта:
Form#contact { border:1px solid #e5e5e5; padding:10px; background:#e9ffd0; border-radius:5px; } #contact label { font-size: 14px; } #contact input:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; background: #fff url(images/valid.png) no-repeat 98% center; } #contact textarea:required:valid { box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; } #contact input:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; background: #fff url(images/invalid.png) no-repeat 98% center; } #contact textarea:focus:invalid { box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; } .err { border: 1px solid #ff8c00; padding: 10px; background: #FFDF97; text-align: left; border-radius: 3px; } .ok { border: 1px #BCEF89 solid; margin-bottom: 15px; padding: 10px; background: #f5f9fd; text-align: center; border-radius: 3px; } #author, #email, #url { width: 30%; padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; } #comment { padding: 5px; border-radius: 5px; border: 1px solid #e5e5e5; overflow: auto; } #submit { font-weight: 400; background: #393; font-size: 15px; color: #fff; padding: 10px 50px; border: none; cursor: pointer; }
Просто скопируйте их и отправьте в файл style.css вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!
Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!
На этом все!
Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!
Форма обратной связи для сайта , которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!
Ребята - скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять - лень. Поэтому тестируйте на своё усмотрение.
Форма обратной связи php с отправкой на почтуЭта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем ! А называются так:
1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!
2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!
Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!
Заметка для самых умных:
Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!
Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!
Поэтому, ваш должен поддерживать PHP, а для этой формы контактов, PHP должен быть не ниже пятой версии. Надеюсь, понятно излагаю? Тем более, сейчас, любой нормальный хостинг поддерживает эти условия!
Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!
Там все на английском, поэтому нам с Сашей пришлось немного повозиться, что бы русифицировать данную форму контактов и сами плагины, которые подключены к ней.
Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:
1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!
2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!
3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.
4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.
Ну, вроде все расписал и предупредил. Поехали дальше!
От автора: приветствую вас, друзья. Данная статья будет продолжением , в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.
Исходные файлы текущей статьи вы можете скачать по .
В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.
Начнем с синтаксиса функции mail . Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:
to — email получателя (также можно указать несколько адресов, перечислив их через запятую);
subject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Давайте попробуем отправить письмо, используя данную функцию. Сделаем это в файле mail.php, в котором мы принимаем данные из формы. Новый код данного файла будет таким: