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

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

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

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

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

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

Код вставлен, что мы видим?

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:

/* Форма обратной связи */ #inline { margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; } .txt { display:inline-block; color:#676767; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; } .txtarea { display:inline-block; color:#676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; } .txt:focus, .txtarea:focus { border-style:solid; border-color:#bababa; color:#444; } input.error, textarea.error { border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; } input.error:focus, textarea.error:focus { border-color:#973d3d; color:#a35959; } #send { color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; } #send:hover { background:#979797; } /* Форма обратной связи */

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

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

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

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

1. Производит проверку введенного e-mail.
2. Указывает поля, с которыми будет работать.
3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Новое сообщение\r\n"; $msg .= "

Имя: ".$username."

\r\n"; $msg .= "

Номер телефона: ".$userphone."

\r\n"; $msg .= "

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

\r\n"; $msg .= "

Сообщение: ".$content."

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

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Добавляем всплывающую форму обратной связи на сайт

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

Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

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

И придаем ей стили.

Modalbox { color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-decoration:none; text-align:center; margin:0 auto 20px; } .modalbox:hover { background:#979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.

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

#inline { display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; }

В итоге у нас получается вот такая кнопочка.

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

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

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

Форма обратной связи для wordpress

В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

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

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

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

Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.

Делаем всплывающую форму обратной связи для wordpress

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

1. Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
2. Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

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

Для начала, вставляем следующий код сразу после открытия тега body.

X

Давайте разберемся что есть что:

• Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
• Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
• Блок callme будет содержать саму форму обратной связи.
• X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
• Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

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

Bg-b { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; } body { position:relative; } .callme { position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border-radius:4px; } .callme small { position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; }

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

Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.

Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

UPDATE 06.06.2018

В последних версиях WordPress jQuery скрипты не работают с символом $ , поэтому это следует учесть и заменить $ на jQuery

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

Url: "http://site.ru/sendmessage.php"

А скачать исходники первых двух форм, вы сможете по

UPDATE 04.07.2018

По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

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

Вы знаете, что до 80% пользователей покидают ваш сайт, не заполнив заявку потому, что форма обратной связи на вашем сайте далека от идеала? Или вы уверены в том, что ваша форма заявок идеальна и имеет максимальную конверсию?

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

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

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

Для чего нужна форма обратной связи

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

а) повышение лояльности к вашей компании;

б) возможность быстро отреагировать на запрос, снизить негатив и сохранить клиента;

в) возможность улучшить продукт или сервис;

г) способ увеличить продажи.

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

Правило №1. Максимально упрощайте форму

Какую из этих форм вы заполните охотнее?

Или такую

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

Если правило упрощения формы выполнили, то стоит ожидать увеличение конверсии на 30–60 %.

Совет. Уберите всё лишнее, оставьте 2–3 поля или даже 1. Обычно это «Имя», «номер телефона или e-mail». Если у вас интернет-магазин и вы делаете форму для заказа, то полей будет немного больше: «Имя», «№ телефона или E-mail», «Вариант доставки», «Количество товара», «Адрес». Смотрите, для каких целей вы делаете форму обратной связи, и максимально упрощайте её.

Правило №2. Форма должна быть заметна

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

Правило №3. Минимум «обязательных полей»

Одно обязательное поле - телефон

Часто на сайтах компаний можно наблюдать не только перегруженную лишними полями форму, но и обязательность заполнения этих полей. Формулировка «обязательное поле» присутствует на 99 % сайтов. Хотите увеличить конверсию? Уберите обязательное заполнение всех полей, кроме телефона. Если человек захочет, он сам заполнит те поля, которые считает нужными, но основное поле - номер телефона, которое позволит перезвонить клиенту и уточнить всю остальную информацию. Главное не забудьте составить правильные скрипты для менеджеров.

В каких случаях конверсия с форм падает:

• Падение конверсии на 3 %, если вы просите заполнить поле с указанием возраста
• Падение конверсии на 10 %, если необходимо ввести ФИО
• Падение конверсии на 2 %, если вас интересует, в каком населенном пункте живет посетитель
• Падение конверсии на 4 %, если необходимо заполнить адрес проживания

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

Правило №4. Ссылки в форме (условия обращения)

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

Пример такой формы:

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

Правило №5. Согласие на обработку данных

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

Правило №6. Выпадающих списков быть не должно

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

Правило №7. Уберите каптчу с формы

Ввод каптчи может снижать конверсию до 40%. Это объясняется тем, что часто каптча вообще не читается, либо при вводе данных сообщает о некорректности ввода символов. Если раньше каптча была оправлена тем, что без нее могло приходить много спама, то теперь есть технологии, которые защищают форму от ввода данных спам-роботами и без ввода каптчи.

В студии artcell мы как раз используем такую технологию. Как можете заметить каптчи в наших формах нет и СПАМ мы не получаем.

Правило №8. Автоуведомление о том, что форма отправлена

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

Правило №9. Уведомление по sms

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

Так какая она - идеальная форма обратной связи?

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

Минимум полей для заполнения

Одно или два обязательных поля

Отсутствие полей с выпадающими списками

Наличие чекбокса для согласия на обработку получаемых данных

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

Отсутствие каптчи

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

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

2019.08.10 Viktar Haurylavets

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

Основные принципы организации обратной связи

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

Схема организации обратной связи на сайте.

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

Форма

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

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

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

, но существует различие. Если

формирует POST запрос, указанный в атрибуте action , который удобно использовать для дальнейшей обработки на сервере с помощью PHP, Pyton, Java и так далее, то в случае div нужно использовать JavaScript. Так же с помощью JavaScript можно данные посылать через Ajax запросы, в таком случае страница не будет обновляться в строке браузера.

Однако принцип один - мы отправляем некие данные на сервер.

Какие данные должны быть обязательными?

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

Обработка запроса на сервере

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

Ответ с сервера

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

Непосредственный разбор кода на HTML и PHP смотрите .

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»

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

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

HTML

Итак, начнем, как всегда, с обычной заготовки – html . Для начала нам понадобится форма с несколькими полями. Мы возьмем для наглядности и стандарта всех форм 3 поля. Т.е. это будет Имя, Email и телефон.

Каждый input у нас имеет свое уникальное имя name , оно нам понадобится в дальнейшем для отправки сообщений. Вы можете также свободно добавлять свои поля и не только input , но и select , textarea . Только не забывайте каждому из них присваивать свои имена, которые мы будем использовать при отправке на почту информации. Для удобства я добавил каждому полю атрибут required , благодаря которому браузер не позволит пользователю отправить пустые значения и уведомит о необходимости их заполнения.

CSS

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

Form{ max-width: 400px; width: 100%; margin: 0 auto; } input{ box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); padding: 10px 20px; width: 100%; margin: 10px 0; outline: none; } input{ background: red; border: none; box-shadow: 0px 2px 0 1px #C50909; border-radius: 5px; color: white; text-transform: uppercase; font-weight: 600; width: 200px; cursor: pointer; transition: 0.3s; } input:hover{ background: black; box-shadow: 0px 2px 0 1px black; }

Клиентская часть

Здесь уже стоит разобраться более детально, точнее выбрать для себя подходящий вариант. Для отправки сообщений на почту нам понадобится использовать язык php , т.е. создавать отдельный файл, в который мы будем передавать все эти данные. Но мы данный способ здесь не будем рассматривать, так как гораздо красивее, когда у нас все происходит без перезагрузки страницы. Поэтому мы рассмотрим отправку данных через ajax .

Если вы хотите все сделать по старинке, то вам понадобится немного подправить верхний html и задать форме значение атрибута method (post или get). Все зависит от того, каким способом вы хотите передать данные из формы. А также не забудьте прописать action , который укажет путь к файлу php .

А мы пойдем более продвинутым методом и сделаем отправку данных не перезагружая страницу, и получая ответ от сервера будем выдавать пользователю сообщение об успешной операции, либо ошибке. Однако, нам также понадобятся 2 файла, допустим contact.php и custom.js .

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

$(".form").submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "contact.php", data: str, success: function(msg) { if(msg == "ok") { alert("Письмо отправлено"); } else { alert("Ошибка! Возможно вы неправильно заполнили поля."); } } }); return false; });

Теперь разберемся в схеме действий и зачем нам нужны все эти библиотеки и файлы. Когда пользователь нажимает кнопку отправить, у нас происходит событие submit , которое мы пропишем в custom.js и на основе которого получим все данные из формы и передадим их в файл contact.php. Здесь мы еще раз проверяем, не пустые ли у нас поля (дабы избежать очередной возможности спама), производим отправку сообщения на email и уведомляем о результатах пользователя, которые передаются ответом в custom.js.

If (trim($_POST["mfbPhone"]) == "") { echo "false"; } else { $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail"]); $txtphone = trim($_POST["mfbPhone"]); // от кого $fromMail = "[email protected]"; // Сюда введите Ваш email $emailTo = "[email protected]"; $subject = "Обратная связь"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "From: Пример формы<$fromMail>\n"; $headers .= "Content-type: text/plain; charset="utf-8"\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Date: ". date("D, d M Y h:i:s O") ."\r\n"; // тело письма $body = "Получено письмо с сайта ".$site." \n\nИмя: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nСообщение: ".$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; }

Это самый элементарный пример работы контактной формы. Есть множество вариантов, как доработать файл проверки на php, создание своих классов и т.д. Но наша задача была создать простой и рабочий пример, который можно использовать на своем сайте.

demo

файлы

Готовые плагины

Так как вы находитесь на блоге WordPress, то наверняка готовы и стремитесь использовать всевозможные плагины, особенно если вы в программировании и верстке полный ламер. И я вас в этом не виню и могу даже один из них представить вашему вниманию для наглядности. Цель этого абзаца не рекомендация, а лишь пример, так как я использовал плагин Contact Form 7 в нескольких проектах.

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

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