Простая форму обратной связи html. Как создать форму обратной связи в WordPress

1. Плагин для создания онлайн форм «jFormer»

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

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

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

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте

12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.

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

На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.

Создание формы обратной связи – html разметка

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

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

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


Создание формы обратной связи — css разметка

Давайте зададим стили нашей форме и приведем ее к читабельному виду:

/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }

Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:

Transition: .6s;

Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:


Создание формы обратной связи — php разметка

Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.

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

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

"; $msg .= "

Cообщение с сайта

\r\n"; $msg .= "

От кого: ".$username."

\r\n"; $msg .= "

Почта: ".$usermail."

\r\n"; $msg .= "

Сайт: ".$usertel."

\r\n"; $msg .= ""; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "
"; } else { echo "
"; } ?>

Давайте немного поясню код:

$sendto = "[email protected]"; // почта, на которую будет приходить письмо $username = $_POST["name"]; // сохраняем в переменную данные полученные из поля c именем $usertel = $_POST["telephone"]; // сохраняем в переменную данные полученные из поля c телефонным номером $usermail = $_POST["email"]; // сохраняем в переменную данные полученные из поля c адресом электронной почты

Тут, думаю, — понятно.

Теперь давайте сформируем заголовок письма.

$subject = "Новое сообщение"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

Строка $subject = «Новое сообщение»; — отвечает за тему письма, может написать там: «Заявка с сайта» или то, что вам больше подходит.

Предлагаю сделать так, чтобы письмо приходило, от адреса, указанного в поле input type=»email». То есть с того, с которого пользователь ввел при заполнении формы. Для этого пропишем следующие строки:

$headers = "From: " . strip_tags($usermail) . "\r\n";

То есть мы подставим данные из переменной $usermail, где и хранится информация из поля, отвечающего за ввод email адреса.

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

$msg = ""; $msg .= "

Cообщение с сайта

\r\n"; $msg .= "

От кого: ".$username."

\r\n"; $msg .= "

Почта: ".$usermail."

\r\n"; $msg .= "

Телефон: ".$usertel."

\r\n"; $msg .= "";

Первой строкой задаем шрифт письма. Второй — выводим сообщение, например: «Заявка с формы обратной связи на первом экране». Третей, четвертой и пятой строкой передаем данные из формы. Каждая с новой строки.

Теперь нужно отправить письмо функцией mail и определить, что будет происходить при успешной и не успешной отправки письма:

If(@mail($sendto, $subject, $msg, $headers)) { echo "

"; } else { echo "
"; } ?>

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

Через несколько секунд, после вывода изображения, я делаю редирект (автоматическое перенаправление) на главную страницу. Сделать это можно, вписав следующую строку между тегами head;

То есть через 4 секунды пользователя автоматически вернет на главную страницу!

Я не эксперт в php — это back-end язык программирования, меня всю жизнь тянуло к изучению front-end. Поэтому не судите строго. Да, здесь можно сделать проверки на заполнение контактных форм и так далее, но мне всегда хватало и этого, так что, если у кого-то есть предложение как улучшить этот код, напишите пожалуйста в комментариях или на почту, поправлю урок, спасибо!

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

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

P.s. Так как я стал очень часто получать вопросы о том, почему не работает форма и не приходят письма на почту, то решил описать несколько наиболее популярных причин, по которым это может происходить:

  • Тестируете форму не на сервере.
  • Тестируете форму на бесплатном хостинге.
  • Тестируете форму на платном хостинге, но в бесплатном тестовом периоде.

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

Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .

23/07/2014 12/07/2018

dimadv7

Форма обратной связи для сайта , которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!

Ребята - скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять - лень. Поэтому тестируйте на своё усмотрение.

Форма обратной связи php с отправкой на почту

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

    1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

    2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Заметка для самых умных:

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

    1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

    2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

    3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

    4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!

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

Множество форм - одна цель

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

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

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

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

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

Семь подсказок на заметку

Вспомним несколько простых правил, которые нужно учитывать при разработке и размещении ФОС на сайте.

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

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

    Традиционно формы можно разместить в хедере сайта или на странице контактов.

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

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

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

    Форма должна отображаться и работать одинаково корректно на всех устройствах и во всех браузерах.

    Или кратко – проверьте кроссбраузерность и кроссплатформенность форм обратной связи на вашем сайте. Форма может быть заметной и удобной для заполнения с ноутбука или стационарного компьютера, но на планшете поле для ввода данных может оказаться слишком узким и неудобным для внесения в него текста с сенсорного экрана. Будет ли тогда клиент раз за разом пытаться внести свои данные, чтобы связаться с вами? Ответ очевиден.

    Форма должна быть краткой и понятной.

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

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

    Выглядит более удобно, чем, например:

    Лучше перезвонить и устно уточнить все, что вам нужно, но облегчить посетителю заполнение формы. И повысить тем самым шансы на то, что он к вам обратиться!

    Продолжая тему понятности, обратите внимание на то, чтобы у формы был заголовок – «Заказать обратный звонок», «Заказ вызова замерщика», «Заказ бесплатной консультации» и т.д. Этот же заголовок лучше дублировать в электронных оповещениях, которые будут приходить с формы на вашу почту. Тогда не только посетитель вашего сайта не запутается и не забудет заявку, на что именно он оформляет. Но и вы сами получите четкие данные, какая именно информация интересовала посетителя, оставившего заявку. Это поможет быстро сориентироваться при дальнейшем общении с посетителем и корректно построить диалог.

    Форма должна обладать приятным и практичным дизайном.

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

    Лучше избегать сочетания темного на темном. Если, например, на темно-синем фоне вы сделаете темно-красную или темно-зеленую надпись «Ваше сообщение отправлено», его просто не будет видно.

    Форма должна содержать призыв к действию.

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

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

    Форма должна легко сворачиваться.

    Итак, форму легко найти, она обладает приятным дизайном, удобна для заполнения. Что еще?

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

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

    Настройка ответного сообщения.

    Как-то вот так…

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

Подводя итог

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

Создание формы обратной связи

Создание формы обратной связи на сайте

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

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

Рис.1. Простая форма обратной связи

Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.

1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.

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

Ваше имя:




Ваш e-mail (для ответа):




Ваше сообщение:




Как видим, вся форма создаётся тегом

с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге