Заголовок формы обратной связи. Веб-дизайн и поисковая оптимизация
Я много видел разных мудреных реализаций форм обратной связи. Думаю, что даже заядлый программист не сразу разберется в работе такого кода. А зачем, собственно говоря, усложнять работу, если все можно сделать как никогда просто, не так ли?
Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.
Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи.
Под простотой я подразумеваю наличие лишь текстовых полей. По желанию, вы можете внедрить чекбоксы, селекты, прикрепление файлов и даже свою капчу.
Если вы не сильно разбираетесь в сайтостроении или только начали освоение этой темы и нуждаетесь в добавлении одного из перечисленный функционалов – пишите об этом в комментариях, постараюсь помочь.
Поскольку для отправки формы мы будем использовать PHP, то не стоит делать акцент на том, что на вашем хостинге должна быть его поддержка.
1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя », «E-mail » и поле для ввода сообщения:
Ваше Имя: Ваш E-mail *: Сообщение *: Отправить
Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.
$(document).ready(function() { $("#submit").click(function() { var name = $("#name").val(); // Получаем имя var email = $("#email").val(); // Получаем e-mail var message = $("#message").val(); // Получаем сообщение $.ajax({ url: "/form.php", // Куда отправляем данные (обработчик) type: "post", dataType: "json", data: { "name": name, "email": email, "message": message }, success: function(data) { $(".result").html(data.result); // Выводим результат } }); }); });
Скрипт вставляем перед закрывающим тегом . После того, как мы напишем обработчик, не забудьте в этом скрипте прописать корректную ссылку до него.
3. Ну и собственно последним шагом будет написание обработчика:
Здесь вы можете изменить тексты сообщений об ошибках и успешной отправке, вид письма, которое приходит на почту, и обязательно адрес почты, на который будут приходить сообщения с формы.
В качестве небольшого бонуса я добавил функцию проверки валидности введенной почты из этой статьи .
Вот и все, можете проверить корректность работы формы. Дополнительные поля вы можете добавить по аналогии с существующими. Если возникают проблемы в работе – пишите об этом в комментариях.
Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.
Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.
Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.
Кроме того, использование обратной связи без плагинов возможно и для WordPress. Лишние плагины создают немалую нагрузку на сервера и отказ от них позволяет ускорить работу сайта.
Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).
Принцип работы формы обратной связи на htmlНаша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).
Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).
Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.
Конечная форма связи будет иметь вот такой вид:
Для работы контактной формы, созданной на html, требуется 3 элемента.
Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.
Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.
Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.
Демо версия формы
Настройку каждого из этих элементов мы с вами разберем по шагам.
Создание HTML макетаЧтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.
Для обозначения форм в html используется тег , внутри которого заполняются необходимые параметры.
Имя:
Email: Правильный формат "[email protected]"
Телефон: Правильный формат "+7-123-4567890"
Сайт: Правильный формат "http://someaddress.com"
Текст сообщения:
Отправить сообщение
Имя:
Email:
Телефон:
Правильный формат "+7-123-4567890" Сайт:
Правильный формат "http://someaddress.com" Текст сообщения:
Отправить сообщение
|
Начнем с первой строки.
class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.
action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.
Дальше идут 4 блока
Отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов , внутри которого задаются следующие характеристики:
Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.
Name – собственное название самого элемента, оно необходимо, что скрипт знал как использовать данные каждого поля. Если вы сделаете несколько полей одного типа, то вам необходимо каждому полю присвоить свое name.
Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.
Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.
pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.
Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .
Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.
Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.
И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом , имеющим свой класс для настройки внешнего вида и тип “submit”.
Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.
Оформление CSS стилямиЕсли вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).
Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.
Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.
Подключить стили можно двумя способами:
Подключаются файлы стилей следующим кодом , размещаемым внутри . Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.
В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.
Настройка PHP кода (добавлена защита от спама)Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.
Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.
Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.
Итак, строка №1 - здесь указываете адрес главной страницы. После отправки сообщения посетителя автоматически перенаправит по адресу, который вы укажите. Также укажите время, через которое посетитель перенаправится на главную страницу (у меня 6 секунд). строка №2 - кодировка отображения UTF-8 строка №11 - это самая важная строка! В этой строке вам следует вписать свой электронный почтовый ящик, на который вы хотите получать сообщения с сайта. Шаг №2
Форма обратной связи..php" method="post"> Ваше имя* Электронная почта* Тема сообщения Текст сообщения: в строке №2 укажите путь к файлу "mail.php ", у меня в примере он https://сайт/mail.php Вот и все. Если остановиться на этом этапе, то ваша форма обратной связи будет работать на сайте, но вид ее будет не очень привлекательный. Это исправимо - нужно к форме прописать стили в CSS файле. Итак, вставьте в файл "style.css " вот такой код: #submit { font-family: sans-serif; color: #ffffff; font-size: 18px; padding: 0px; text-decoration: none; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce1515), to(#8b0d0d)); background: -moz-linear-gradient(top, #ce1515, #8b0d0d); } #submit:hover { background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce1515)); background: -moz-linear-gradient(top, #8b0d0d, #ce1515) } #respond input, textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } #respond input:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } Вот такая форма обратной связи должна получиться у вас, если вы все сделали так, как я описал. Если на вашей форме вместо нормальных читабельных слов вы видите караказябли, как на примере снизу: тогда откройте файл "mail.php
" и "kontakt.html
" через бесплатный и в меню перейдите в Можно сделать только один файл обратной связи с расширением "php ", например, с названием "kontakt.php ", и в этот файл вписать все коды, скрипты и стили, о которых я расписывал чуть выше. Но все таки кое-какие изменения в коде мы сделаем. Это будет выглядеть вот так: Оформление ссылок #submit { font-family: sans-serif; color: #ffffff; font-size: 18px; padding: 0px; text-decoration: none; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce1515), to(#8b0d0d)); background: -moz-linear-gradient(top, #ce1515, #8b0d0d); } #submit:hover { background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce1515)); background: -moz-linear-gradient(top, #8b0d0d, #ce1515) } #respond input, textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } #respond input:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } Форма обратной связи. Ваше имя* Электронная почта* Тема сообщения Текст сообщения: Внимание: еще раз повторюсь: сохранить этот файл нужно обязательно в расширении "php ", иначе работать не будет. Обратите внимание на строчку в коде №70 . Как видите, я оставил "action " пустым, так как сам обработчик формы обратной связи находится на одном файле.
Вот и все!!! Надеюсь простая HTML форма обратной связи для сайта действительно была для вас простой. Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓Получай обновления блога!!! Подпишись: Последние новости категории: Популярные статьи: 274 Ответов на комментарий - Простая HTML форма обратной связи для сайтаКуда потом загружать mail.php и kontakt.html и как вывести форму на отдельной странице? mail.php и kontakt.html загружаете на хостинг, где лежит ваш сайт. Если быть более точным – в корень сайта. Николай отвечает: Степан спасибо за рабочую форму обратной связи. У меня стояла раньше, но возврат на сайт не работал. А ваша работает! У меня старая перестала работать поставил вашу. Оказалось с 18 мая маил ввёл жёсткие меры по борьбе со спамом и перестали письма с сайта приходить. Пришлось переходить на яндекспочту там всё в порядке пока. Здравствуйте, Николай! Вы мне дали новую интересную тему. Я думаю на этой неделя я выложу парочку статьей по теме “простейшая для формы обратной связи”. Дмитрий отвечает: Степан спасибо за прекрасный скрипт! Все супер! Но вот есть одна проблема, текст приходит в виде черных квадратиков (ютф проверял) что может быть? заранее спасибо! Семен отвечает: Стоит сказать что есть еще один способ разместить форму обратной связи на своем сайте – это воспользоваться онлайн сервисом, который предоставляет визуальный конструктор веб-форм. Мне например нравится русскоязычный сервис – formdesigner.ru. Как по мне это отличный вариант для новичков, которым не хватает навыков программирования. Привет! Спасибо за интересную статью! Напишите пожалуйста, что менять в style.css, чтобы увеличить размер полей ввода данных. Понял. Спасибо! Здравствуйте, Степан. Сделал все, как указано, но сообщения не отправляются. В чем может быть проблема. Спасибо за ответ. Я разобрался с первым способом все работает. Моя Здравствуйте Степан,у меня не отправляются сообщения пишут Ошибка, сообщение не отправлено я все сделал как написано и почту поменял и это и в первом и втором случае Здравствуйте Степан,файлы размещены на хостинге $mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body"; Что здесь не так подскажите пожалуйста в kontakt.html поменял названия форм вместо тема сообщения стало номер телефона а вместо текст сообщения адрес отправки выходит вот такая ошибка Parse error: syntax error, unexpected T_STRING in /home/rxlwxpct/public_html/mail.php on line 12 Добрый день, Степан! В пришедшем письме отображаются только английские буквы и цифры. Вместо русских букв печатается: ??????? Здравствуйте, Виталий! Возможно проблема в кодировке файла “mail.php”. Кодировка должна быть UTF-8, для этого откройте текстовый редактор Notepad++. В текстовом редакторе перейдите в меню сверху по вкладке «Кодировки» => «Преобразовать в UTF-8 (без BOM)». О кодировке почитайте . Виталий отвечает: Я все сделал согласно Ваших инструкций, но ситуация не изменилась (вместо русских букв выводятся кракозябры)… Я использую первый способ. Загрузил mail.php и создал статическую страницу с файлом kontakt.html. Все работает, только есть указанная мной проблема… Степан, я открывал в редакторе notepad++ файл mail.php и перешел по вкладке «Преобразовать в UTF-8 (без BOM)». Но это не помогло… Также я сменил почту с mail.ru на yandex.ru. Тот же результат: вместо русских букв печатаются кракозябры… Виталий, что-то Вы делаете не так! У меня все работает!
Виталий отвечает: Степан, Ваша форма работает прекрасно. Ну а я что то сделал не правильно… Подскажите: что? Степан, извините за надоедливость, но правда хочется разобраться… С Вашими файлами у меня вообще ничего не получается. Что то я делаю не так… Степан, подскажите, пожалуйста, пошагово что я должен сделать с файлом (1.html) чтобы создать статическую страницу? здравствуйте!скажите пожалуйста а если сайт ещё пока не на хостинге,а он у меня еще в процессе создания на жестком диске…форму установил но сообщение не приходит на e-mail Здравствуйте! Спасибо огромное за форму, я пользовалась способом №1, все прекрасно работает. Но может быть есть способ сделать так, чтобы сообщение что письмо отправлено выводилось на той же странице? Здравствуйте, спасибо за форму, очень хорошо подошла для сайта, но есть проблема, после нажатия кнопки отправить не сообщение отправляется, а этот файл mail.php скачивается мне на компьютер, почему так? Спасибо=) все я понял, мой хост не поддерживает php…спасибо=) Степан, здравствуйте еще раз. Скажите пожалуйста, а где выводится сообщение об успешной (или не очень) отправке сообщения? Делала по второму способу, все получилось, письма приходят, но сообщений никаких нет Доброе время суток. Отличная статья! Все очень понятно! Великолепно, я проискал 4 дня как сделать форму в очень подробном формате и легкую. Ваш сайт просто изюминка в интернете. У меня вопрос к вам Степан. Дело в том что я не хочу чтобы после отправки сообщения, происходил переход на стартовую страницу. Можно как то сделать чтобы просто сообщения вылезло – Ваше сообщение отправлено. И все? Степан спасибо, И последний вопрос. Вот я хочу чтобы только можно было отправлять сообщение без имен и email. У меня получится такой код
Текст сообщения: И у меня когда отправляешь сообщение выходит что “Вы заполнили не все поля, вернитесь назад и заполните необходимые поля!” Странное, что не так? А когда с именем и email все работает. И еще где можно ширину изменить? в css? подскажите пожалуйста какая строчка Вот моя форма, из песни слов не выкинуть. Можете подкоректировать Ваш php код обработки, для моей формы? Сам пробовал заменить, все равно ошибку выдает при заполнении. Помогите пожалуйста!) Форма заказа Заполните форму обратной связи, и мы Вам перезвоним! ВЫВОДИТ ВОТ ЭТО ПОСЛЕ ОТПРАВКИ. ПОЧЕМУ?
C Новым Годом, Степан, и большое спасибо! Я несколько дней разными способами пыталась установить форму обратной связи, сегодня она, наконец, заработала! Только почему при незаполненном поле “тема” письмо не отправляется, а выходит надпись, что заполнить надо все поля. Ведь “тема” – необязательное поле? И при необходимости это поле ведь можно удалить? Степан, благодарю за форму! Спасибо, Степан Степан, я создала новый файл php. Куда скопировала то, что написано в способе 2, заменила нужные строчки. Я все это очень внимательно прочитала и конечно же поняла совсем иначе)))) К сожалению, все равно кривулька какая-то получается(( Проверил Ваш сайт, но не смог посмотреть на кривульку-форму . Добрый день! Проблема решена, она была в тестовом хостинге. Спасибо. Получилось и чисто, и все работает. А у меня не работает ни первый вариант ни второй. файлы PHP Хостинг признался после долгих пыток что их косяк После отправки на сайте появляется ошибка или просто письмо на почту не приходит? короче проблема только в хостинге. Супер получилось все с первого раза настроить на ТС! Вопросик! можно как то сделать чтобы при заполнении формы где пишется E-mail если напишешь что то от балды к примеру цифры или что то либо еще … Выдавало ошибку “Введите правильно свой E-mail” типо таго Здравствуйте Степан.Во первых спасибо за ваш блог.Для меня это как учебник, постоянно бываю у вас в сайте. Много полезного. У меня вот такая проблема. Я взял от вас код и создал простую форму обратной связи. Все работает и письмо доходит. Вот только беда. Письмо доходить без текста. Пустое письмо.По какой причине, не могу понять. Пожалуйста, помогите мне в этом разобраться.Заранее спасибо. С ув.Акиф Здравствуйте, Степан. Возник такой вопрос, может ли от хостинга зависеть качеств отправки писем? Здравствуйте, Андрей! Вы проверяли письма в СПАСМ-е? Андрей отвечает: Да, проверял. Там ничего не было. Да, спасибо, я уже на 100% уверен, что проблема в хостинге. Переезжаю! Сделал по способу номер 1 , но к сожалению сообщения не приходят,в чем беда? Никита отвечает: вот по второму способу сделал,работает,но только одна почта,пробую другие – ничего не приходит. Укажите, какие почтовые сайты не принимает и покажите, как вы заполнили строку №56 $address = "[email protected]"; Перенаправление происходит после отправки сообщения? Никита отвечает: да перенаправление на сайт происходит, $address = "[email protected]"; свою почту ставлю Спасибо за статью! очень помогла Как дабавить либо вообще переобразовать код на вид: Добрый вечер,Степан! Ваш код действительно рабочий, огромное вам спасибо, за ваш труд! Подскажите пожалуйста: Здравствуйте, Степан! В чем может быть загвоздка? Здравствуйте, Борис! Вы на почте “mail.ru” в СПАМ смотрели? Может письмо туда попало Борис отвечает: Смотрел. Там вообще странность какая-то: письма доходят с большой задержкой и не все. Грубо говоря – через раз. В общем, логики нет. Возможно хостинг тупит. Не возможно, а точно. Что за хостинг? Я прочитаю про них. Борис отвечает: Skyhost.ru Здравствуйте. у меня не получается форма обратной связи(((Почему – не знаю Вот что мне ответила тех. поддержка В итоге я забил на маил.ру и отправил письма на яндекс. Добрый день!
Ваше имя* Дата консультации* Время консультации* Здравствуйте, Максим! Я думаю проблема в кодировке. Файл с обработчиком формы должен быть сохранен в UTF-8 без бом. Смотрите Максим отвечает: Степан, спасибо. Но к сожалению, не помогло. Точно так же текст отображается вопросами. Степан, Проблема в кодировке 105%. Может быть такое, что сервер отдает только win-1251. Определите какую кодировку выдает сервак и преобразуйте из той, что выдается в ту, которую нужно на странице. Вот и все! Максим отвечает: Степан, добрый день! Получил ответ от разработчиков Яндекс.Почты. “Проверили письмо - в нём не найдено указания на какую-оибо кодировку. Проверьте, пожалуйста, настройки Вашей формы. Кажется, она не формирует заголовок “Content type” и потому не передаёт информацию о кодировке.” Буду сидеть и разбираться, почему информация не передается. Как только выясню, отпишу в комментариях, вдруг у кого-то такие же проблемы возникнут Максим отвечает: После очередной итерации всё заработало. Видимо, были проблемы с руками и кодировкой. Спасибо, Степан, за терпение и за столь удобный функционал! Степан, добрый день. Здравствуйте, Вячеслав! А Вы пробовали искать ответ на сайтах? В сети валом решений, как сделать отправку письма с вложенным файлом. Вячеслав отвечает: Нашёл много решений, но попытавшись их совместить с Вашей формой, ничего не получилось. Степан, спасибо за простую и рабочую форму! Доброе время суток,код рабочий и очень полезны спасибо огромное. Большое спасибо, Я вставил форму обратной связи по вашим описаниям, но позже отказался от нее. Но вы мне испортили этим страницу сайта. Постоянно открывается ваша страница, через 6 сек, и ни чего не могу поделать, даже когда полностью удалил вашу эту форму обр. связи. Это ВИРУС!? Ищу как мне сделать скрипт на товарный одностраничник с апселлом. У вас самое толковое объяснение, как отправлять сообщения на почту. Но мне нужно: страничка upsell.php. НО ПРИ ЭТОМ ДАННЫЕ С ПОЛЕЙ ФОРМЫ НЕ ОТПРАВЛЯЮТСЯ НА Е-МЭЙЛ, А СОХРАНЯЮТСЯ-ОЖИДАЮТ КОМАНДЫ ОТПРАВКИ!!! отправки сообщения mail с собранными данными с полей формы и добавляется название е-мэйл сообщения mail с собранными данными с полей формы, но уже без добавления дополнительного товара. Это всё выражается в конечном итоге в виде сообщения на е-мэйл Добрый вечер Степан! Order form. Name* E-mail* Phone* Message: Здравствуйте, Денис! Все верно у Вас. Должно работать, я даже перепроверил на локальном сервере. Посмотрите, не приходят ли письма в СПАМ?! Здравствуйте! Доброго времени суток Степан, на свой сайт установил вашу форму обратной связи (ФОРМУ 2) после отправки пишет Сообщение отправлено успешно. Но на почту ничего не приходит. Подскажите как исправить, заранее благодарен. Здравствуйте на примере вашей формы делаю свою. Подскажите пожалуйста вот есть обязательные поля для заполнения а есть не обязательные как сделать не обязательные? у вас если не заполнить пишет “Вы заполнили не все поля, вернитесь назад и заполните необходимые поля!”; Я бы с удовольствием но проверка быть должна и сообщение типа “сообщение отправлено через 6 сек вы будете перенаправлены” тоже должно быть в чем дело не знаю посмотрите плиз код?
И еще плюс ко всему вылетает ошибка 1,3,5,6 неопределенная форма??? И постоянно пишет “Вы заполнили не все поля, вернитесь назад и заполните необходимые поля! ” хотя я заполняю все до единого??? Степан я ведь жду) Все нормуль у меня получилось. Нумерцию эту я тут написал ее в моем php файле нету. А про 11 строку я сразу понял что она для обязательных форм заполнения. А все дело оказалось {$name = $_POST["adres"] {$email = $_POST["name"] переменные укзаны не верно.) Могу и заплатить сколько будет стоить форма регистрации php с личным кабинетом у каждого пользователя и платежкой в ней? Доброго времени суток еще раз Степан подскажите почему когда создаю файл с расширением php в корневой папке сайта при запросе: адрес сайта/файл php выдает The requested URL /cgi-bin/php4.fcgi/kontakt.php was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Здравствуйте! Сделала по второму варианту, работает!Спасибо!) Здравствуйте.Степан! Здравствуйте, Вадим! $address = "[email protected]"; Vadim отвечает: Здравствуйте.Степан ещё раз. да. я всё перепроверил. работают оба варианта.но до ящика не доходит.скорее всего-проблема в бесплатном хостинге.Для уточнения могу прислать коды и данные сайта.т.к этот сайт своего рода учебный полигон а я человек с небольшим опытом в этом делe(пока).Ваше решение.стоит ли возиться? Письмо должно прийти на ваш компьютер (Диск локального сервера/tmp/!sendmail) Vadim отвечает: Отличное решение вопроса-а я в попыхах сразу не учёл этот вариант.как только “оформлю” это хозяйство-обязательно отпишу. спасибо за отзывчивость Пишет Ошибка, сообщение не отправлено! Лилия, проверил я еще раз свою форму, все работает. Смотрите в обработчик, там где-то какая-то переменная не правильно прописана или вообще нету. Алена отвечает: Здравствуйте! попробовала форму №2, все работало, но письма приходили только с яндекс почты или если краказябры просто написать вместо адреса, с майла не доходят. Еще я добавила строку “Телефон” и где-то напортачила, теперь вообще не отправляется посмотрите плиз Здравствуйте Степан. Вы случайно не узнали решение с mail.ru, почему не работает? Только что попробовал на хостинге, на поддомене своего сайта потестировать обе формы. Все работает хорошо и с почтой Гугл и Яндекс, но вот Мэйл.ру никак, письма не доходят, хотя отправка идет. Причем интересно, что не работает как если указать почту мыла $address. Так и даже если просто в форме отправитель оставит почту на мыле, а в $address будет стоять почта яндекса к примеру. Не могу понять. как и что не исправлял, сервер при отправке запроса присылает ошибку 405 “Method Not Allowed” The requested method POST is not allowed for the URL /mail.php. как это можно побороть? Спасибо! Спасибо, Степан! Проблема была как вы и сказали в сервере. Исправили. Теперь другой прикол: все поля заполнены, выводит сообщений, что все успешно отправлено, но потом вместо перенаправления на головной сайт, выводит сообщение “Вы заполнили не все поля, вернитесь назад и заполните необходимые поля!” А вообще, Степан, вы большой молодец! Спасибо вам за блог, очень интересные вещи пишете на доступном языке. И Вам, Дмитрий, спасибо за красивые слова. Дмитрий отвечает: Степан, в общем пару дней ковырялся, не могу допетрить))) Понял, что проблема в то, что добавил поля. Поля в обработчике прописал. Но явно где-то в моем днк проблема, раз не вижу источник проблемы. Вот код из обработчика:
Здравствуйте! Echo "Письмо не отправлено, через 5 секунд вы вернетесь на главную;} не стоит перед “;” одинарная кавычка ” ‘ “, вот так: Echo "Письмо не отправлено, через 5 секунд вы вернетесь на главную";} пробуйте. ро отвечает: здравствуйте ещё раз. теперь он другую ошибку нашел в пустом хэдере в 28 строке, заполнил её, и теперь вот такая((( Warning: Cannot modify header information – headers already sent by (output started at Z:\home\192.168.1.227\www\php\contact-form.php:1) in Z:\home\192.168.1.227\www\php\contact-form.php on line 28 перевёл файл php в утф-8 без бом, стал показывать без ворнинга, но иероглифы((( и вроде бы это не страшно, на почту указанную письмо почему-то не приходит
ро отвечает: вроде с кодировкой разобрался, и он пишет письмо отправлено, но оно на почту не приходит(( За комментируйте строку 28 //header("Refresh: 5; URL=https://hot-potato.studio"); Результат не изменился? ро отвечает: разобрался, приходит, но кракозябры в почте((( ро отвечает: совершенно не пойму! везде стоит одинаковая кодировка utf-8, но всё равно приходит вот такое! как это исправить? если ставил без бом, то у меня на сайте появляются эти иероглифы. X-Sendmail-Cmdline: sendmail.pl -t -i Сообщение СЃ сайта Hot-potato.studio РРјСЏ отправителя: Р РѕРґРёРѕРЅ Мальцев ро отвечает: всё перевёл в ANSI и всё заработало, почему так? и нормально ли ANSI использовать? Степан, здравствуйте! В комментариях к этой теме я прочитал, что Вы хотели добавить в код капчу. Упсссссссс! Александр, не сделал. Александр отвечает: Степан, здравствуйте! Помойму проще использовать готовый решения с широким функционалом, например конструктор форм testograf.ru Добрый день Степан, 1 вариант испробовал, все работает, но когда приходит письмо вместо русских и литовских букв крючки, пробовал варианты с кодировками, не помогло. Добрый день! Если честно, не поняла. Сайт php сделала, а как вставлять форму на нужную страницу в нужном месте? Здравствуйте! вставил форму по Способу-1, все время пишет “Вы заполнили не все поля, вернитесь назад и заполните необходимые поля!” хотя они все заполнены.подскажите пожалуйста в чем может быть причина код обработчика:
Здравствуйте! Tim отвечает: Добрый день! Ой, сообщение поправила.) Степан! Все заработало! Это сообщение не доходят, когда я пытаюсь со своего адресе сама себе послать, а с других адресов, или если просто указать 123 вместо адреса – доходят. Уважаемый Степан! РРјСЏ пославшего: РРіРѕСЂСЊ Рлектронный адрес: [email protected] Контактный телефон: 1111111111 Сообщение: Проверка СЃ сайта В Notepad преобразовал (хотя до перекодировки было так Имя пославшего: РРіРѕСЂСЊ Электронный адрес: [email protected] Сообщение: РџР РћР’Р Р РљРђ Вот код mail.php
Отправка почты идет со страницы *******/contacts.html Поменял ящик на @ukr.net иначе на @rambler письма шли в спам. Может Вы разберетесь? Спасибо за ответ. Пока ждал и не дождался ответ, все сделал сам. Заработало. Очень интересная была причина. А подскажите, пожалуйста, как эту замечательную форму отцентрировать по горизонтали. Чтобы она по центру страницы отображалась. И при этом с левой стороны была выровнена, как сейчас. Есть ли варианты, кроме как в div оборачивать, его центрировать, а содержание по левому краю выравнивать? Да, этот вариант, единственный, приходил в голову, но руки пока не дошли, Новый Год на носу, как-никак Да и навыков web-программирования откровенно маловато, чтобы легко и непринужденно выровнять форму. Спасибо! И с Новым Годом! Доброго времени! Как сделать, что бы для клиента вместо майла для обратной связи был только номер телефона? Спасибо! Здравствуйте, Степан! Помогите мне, пожалуйста. Я вторую неделю делаю форму обратной связи, перепробовала бесконечное множество форм, и сегодня у меня наконец-то получилось добиться, чтобы форма выдала ответ: Ваше сообщение отправлено. и это была именно Ваша форма. Однако по ней отсылаются только ту письма, в которых в качестве эл. адреса посетитель сайта указал не почтовый ящик на mail.ru. Хостинг написал мне на мою жалобу, почему письма не приходят, такой ответ: В данном случае могут возникнуть проблемы, если пользователь укажет любой почтовый ящик на mail.ru. В данном случае рекомендуем установить в качестве адреса отправителя адрес на базе Вашего домена. Скорректировали для этого txt spf запись, чтобы разрешит отправку с сервера хостинга для данного домена: Как мне заменить адрес в mail.php? If (isset($_POST["email"])) {$email = $_POST["email"]; if ($email == "[email protected]") {unset($email);}} адрес эл.почты на базе моего домена – он тоже сформирован на mail.ru, но не в этом дело, если вставить туда адрес на – письмо тоже не придет. Здравствуйте, Степан! Перечитала еще раз все комментарии и нашла ответ на свой вопрос, все исправила, все работает! спасибо огромное! Подскажите еще, пожалуйста, как-нибудь можно сделать так, чтобы создать маску для поля $etel с телефонным номером, чтобы если пользователь ввел номер телефона не целиком, форма бы ему на это указала? Здравствуйте, Екатерина. Екатерина отвечает: Добрый день! Причина, наверное, в хостинге (у меня рег.ру). У них, видимо, какие-то проблемы с отправкой писем с ящиков mail.ru через сайт. Они мне настроили, чтобы письма, отправленные с почты на основе доменного имени, приходили без проблем, и я изменила строку 15 формы: $send = mail ($address,$etel,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$address"); и теперь письма приходят от моего почтового ящика в мой почтовый ящик, а содержание – то, которое укажет посетитель сайта. Степан, здравствуйте! Использовал первый вариант размещения формы и столкнулся вот с какой ошибкой при нажатии кнопки “отправить”: Parse error: syntax error, unexpected T_NS_SEPARATOR in /var/www/vhosts/***.plsk.regruhosting.ru/httpdocs/***.ru/mail.php on line 13
Код в странице: Напишите нам или закажите обратный звонок! Ваше имя Электронная почта Номер телефона Вам перезвонить?
Текст сообщения: Судя по тексту ошибки, понимаю, что где-то намудрил с символами в обработчике, но найти не могу – глаза сломал… Не наведете на мысль? Заранее благодарен! Сергей отвечает: Нашел лишние ковычки, ошибка пропала. Но теперь другая беда… Письмо приходит, все нормально отображается, но поля словно не заполнены. То есть, как буд-то обработчик не подхватывает данные из формы html.
Проверку заполнения реализовал через html:
Ваше имя Электронная почта Номер телефона Вам перезвонить? Хотите ли Вы получить электронный каталог? Текст сообщения: Если проверку обязательного заполнения возвращать в php, то выдается сообщение, словно ни одной строчки в форме не заполнено. То есть при обоих вариантах, обработчик словно “не видит” заполнения на странице. Повторюсь, посьмо приходит, отображается корректно, категории “анкеты” имеются, но они пустые. Куда глядеть тут? Подскажите) Я в коде у вас не нашел строку №9 If (isset($name) && isset($email) && isset($sub) && isset($ring) && isset($catal) && isset($body)){ Добавьте, в обработчик вот такой код: Print_r($_POST) Перепишите и отправьте мне, что Вам вывелось на экран. Сергей отвечает: А куда именно в логическую цепочку нужно добавить? Print_r($_POST) В какую строчку? Добрый день, Степан! Огромное спасибо за статью) Делала все по 1-ому варианту – форма работает, но вот когда вставляю ваш код для оформления формы в style.css – ничего не меняется((Форма рабочая, но совсем невзрачная(( Привет, я тут диплом пишу и решил вставить обратку, но без хостинга я так понимаю это не сделать? Ваш способ почему то не подходит или я что напутал с путями ( Спасибо! однако не работает. причем сработало один раз. как такое может быть, ага. срабатывает если все писать латиницей. если кириллицей то либо не приходит либо вопросительные знаки. если указываю обратный майл от gmail то письмо проходит, если от mail.ru – то не проходит. как такое вообще может быть? второй способ работает полностью, но если указать адрес отправителя на майл ру (list.ru ets) то письмо не приходит Здравствуйте Степан! Добрый день, Степан!
Здравствуйте, подскажите пожалуйста, после вставки кода,у меня отображается текстом на странице эта часть: Может ли быть, что Word press не видит эту часть кода? Добрый день. Заранее благодарен. setTimeout("location.replace("https://адрес_сайта")", 5000); Доброго дня Степан) Вопрос как подключить определение ip отправителя, добавил поле If (isset($_POST["ip"])) {$ip = $_POST["ip"]; if ($ip == "") {unset($ip);}} не выводися, Заранее спасибо. Добрый день. Здравствуйте, Александр! Александр отвечает: Строка 54 исправлена на мою почту. В почтовом ящике в спаме тоже ничего нету. Может надо написать в техподдерку хостинга, но что писать не знаю? попробуйте вот . Александр отвечает: И эта форма тоже работает и не выдает ошибок, но письма на почту не приходят. Свою почту в ней менял. Видимо хоть хостинг и поддерживает php, но в настройках надо что-то включить, а что именно я не знаю. Такой вопрос. В форме есть где прописать на какой почтовый адрес отсылать письма, а вот где надо прописать с какого почтового ящика отсылать письма? Или это сам хостинг по умолчанию должен понимать? Техподдержка ответила что функция mail на хостинге работает исправно. Дали скрипт для проверки
Добрый день, Степан! Установил ваш скрипт обратной связи по первому способу, все работает. Спасибо! В программировании не силен. Подскажите, что внести в код mail.php, чтобы сообщение об отправке сообщения отражалось в небольшом всплывающем окне. Еще раз спасибо! Здравствуйте, Игорь! {echo "Сообщение отправлено успешно, через 6 секунд Вы будете направлены на главную страницу блога сайт,где сможете продолжить ваш просмотр";} добавьте к сообщению CSS класс со стилями и все (можно так): {echo " Сообщение отправлено успешно, через 6 секунд Вы будете направлены на главную страницу блога сайт,где сможете продолжить ваш просмотр ";}if (isset($_POST[‘name’])) {$name = $_POST[‘name’]; if ($name == ”) {unset($name);}} Здравствуйте. А вот как сделать отправку формы если у меня сайт на локальном сервере? Использую Open Server Вы когда-нибудь хотели установить на свой сайт форму обратной связи? Наверняка Вы встречались с подобными скриптами. Как ни странно, готовые скрипты отправки формы на email пользуются большой популярностью (Вы можете убедиться в этом в любом архиве скриптов), причем их существует великое множество. Есть простые, в которых ничего не меняется, а есть сложные и большие системы, которые функционируют на mysql, позволяют динамически изменять любые поля, содержат кучу настроек… Но так ли они нужны? На мой взгляд необходимость в подобных системах очень сомнительна. Тестировать отправку почты на домашнем компьютере не получиться. Для этого Вам необходим хостинг с поддержкой php и функциями отправки почты. Я рекомендую Вам хостинг-провайдера runweb.ru. Этот провайдер предлагает отличные тарифы, высочайшую скорость доступа и отличное обслуживание. Методы отправки почтыОтправлять почту с сервера с помощью php можно двумя основными способами. Первый и самый простой — это использование php функции mail(). Функция очень простая и понятная, хотя отправка почты с использованием mail() имеет и ряд недостатков. Самый главный — письмо отправляется не напрямую, а через php. Одновременно программа php подставляет в письмо некоторые свои поля. Например, у Вас не получится корректно указать отправителя. В поле "from" (то есть от кого пришло письмо) в большинстве случаев будет стоять имя сервера. Все дело в том, что php подставляет свои заголовки в служебную строку письмо "from". Тем не менее отправка почты с помощью функции mail() остается самым простым Функция mail() имеет следующий синтаксис: mail($to, $subject, $body, $headers); $to - это адрес получателя. Например, "[email protected]". $subject - тема письма. Например, "Вам пришло письмо". $body - текст сообщения. $headers - любые заголовки письма. Например, адрес отправителя будет выглядеть так: "from: [email protected]". Вот полный пример отправки почты с помощью mail(): mail("[email protected]", "Тема письма", "Здравствуйте!nВам пришло письмо.", "from: site_name"); Обратите внимание, что при использовании этой функции на домашнем компьютере она может выдавать ошибку, так как не может отправить письмо без почтового сервера. Теперь давайте посмотрим, как можно отправить письмо с помощью sendmail. sendmail — это стандартная программа операционной системы unix, которая отправляет почту. sendmail программа имеет множество параметров, мы будем использовать некоторые из них. Чтобы использовать sendmail, нужно открыть к нему поток (pipe). В php это делается использованием команды popen(), которая по синтаксису идентична команде fopen(). Путем использования popen() мы открывает поток к sendmail В этой программе первое, что мы делаем — описываем rfc заголовки. rfc — это службные поля, которые содержат всю информацию о письме. Увидеть пример rfc Вы можете, например, в программе the bat!, щелкнув правой кнопкой мыши на тексте письмо и выбрав "rfc-822 headers" (название пункта может отличаться). Чтобы убрать их, повторите действия. В заголовке мы описываем поля "content-type", которые указывают что письмо текстовое и в кодировке windows-1251 (стандартная кодировка windows). В качестве кодировки также может быть использовано "koi8-r", это стандартная кодировка unix. В этой статье мы не будем рассматривать возможные rfc заголовки подробно. Мы сделаем это чуть позже, $recipients = "[email protected] [email protected] [email protected]"; Далее мы записываем в поток сначала заголовки письма (переменная $text_headers), потом отделяем их символом переноса строки и записываем текст сообщения. Последний шаг — закрытие потока и проверка на ошибку. При правильном выполеннии в переменную $result помещается ноль, а если возникла ошибка, в нее записывается номер ошибки. Теперь давайте рассмотрим пример использования возможностей отправки почты. Для этого мы сделаем форму обратной связи, которую Вы сможете установить на свой сайт. В качестве метода отправки письма мы будем использовать sendmail. Создаем форму обратной связиНаша форма обратной связи будет представлять собой один скрипт. Этот скрипт будет выводить форму и отправлять письмо. contact.php: Обратная связь
Поля, отмеченные звездочкой (*) должны быть заполнены. Теперь давате рассмотрим, как работает эта программа. Выполнение начинается со строки "if (!$a) show_form();", так как до этого указана функция, которая, естественно, не выполняется. В этой строке мы проверяем, была ли попытка заполнения формы (из формы, как Вы видите, передается переменная $a, которая и проверяется в этой строке). Если такой попытки не было, вызывается функция show_form(), которая выводит форму. Похожие публикации
|