Форма обратной связи с отправкой на почту php: Р¤РѕСЂРјР° РѕР±СЂР°С‚РЅРѕР№ СЃРІСЏР·Рё РґР»СЏ СЃР°Р№С‚Р° СЃ РѕС‚РїСЂР°РІРєРѕР№ РЅР° РїРѕС‡С‚Сѓ — Программирование на Python и Objective-C в Mac OS

Содержание

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

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

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

<form method="post" action="mail.php">
 
   <div>
      <label for="name">Имя:</label>
      <input maxlength="30" type="text" name="name" />
 
      <label for="phone">Телефон:</label>
      <input maxlength="30" type="text" name="phone" />
 
      <label for="mail">E-mail:</label>
      <input maxlength="30" type="text" name="mail" />
   </div>
 
   <div>
      <label for="message">Сообщение:</label>
      <textarea rows="7" cols="50" name="message"></textarea>
 
      <input type="submit" value="Отправить" />
   </div>
 
</form>

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

```
<form method="post" action="mail.php"> … </form>
```
для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).
```
<input maxlength="30" type="text" name="name" />
```
Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type=»text» говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.
```
<label for="name">Имя:</label>
```
Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.
```
<textarea rows="7" cols="50" name="message"></textarea>
```
Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.
```
<input type="submit" value="Отправить" />
```
О том, что это кнопка для отправки формы нам сообщает type=»submit», а value задает текст, который будет внутри этой кнопки.
```
<div> </div>
```
использованы только для дальнейшего визуального оформления формы.

CSS

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

Мы использовали данный код:

form {
   background: #f4f5f7;
   padding: 20px;
}
form .left, form .right {
   display: inline-block;
   vertical-align: top;
   width: 458px;
}
form .right {
   padding-left: 20px;
}
label {
   display: block;
   font-size: 18px;
   text-align: center;
   margin: 10px 0px 0px 0px;
}
input, textarea {
   border: 1px solid #82858D;
   padding: 10px;
   font-size: 16px;
   width: 436px;
}
textarea {
   height: 98px;
   margin-bottom: 32px;
}
input[type="submit"] {
   width: 200px;
   float: right;
   border: none;
   background: #595B5F;
   color: #fff;
   text-transform: uppercase;
}

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
Не используйте для переноса строк и создания отступов лишние теги по типу <br>, <p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться <br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

<!doctype html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Ваше сообщение успешно отправлено</title>
</head>
 
<body>
 
<?php
   $back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";
 
   if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['mail']) 
   and !empty($_POST['message'])){
      $name = trim(strip_tags($_POST['name']));
      $phone = trim(strip_tags($_POST['phone']));
      $mail = trim(strip_tags($_POST['mail']));
      $message = trim(strip_tags($_POST['message']));
 
      mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 
      'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
      Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");
 
      echo "Ваше сообщение успешно отправлено!<Br> Вы получите ответ в 
      ближайшее время<Br> $back";
 
      exit;
   } 
   else {
      echo "Для отправки сообщения заполните все поля! $back";
      exit;
   }
?>
</body>
</html>

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";

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

if(!empty($_POST['name']) and !empty($_POST['phone']) 
and !empty($_POST['mail']) and !empty($_POST['message'])){
   //внутрення часть обработчика
} 
else {
   echo "Для отправки сообщения заполните все поля! $back";
   exit;
}

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

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

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));
$mail = trim(strip_tags($_POST['mail']));
$message = trim(strip_tags($_POST['message']));

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 
'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
‘Вам написал: ‘.$name.’<br />Его номер: ‘.$phone.’<br />Его почта: ‘.$mail.’<br />Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа (<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».[A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).

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

Пользователю выводится это сообщение о ошибке.

Происходит выход из скрипта проверки.

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

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

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

О защите от спама я напишу в следующих статьях.

Оценок: 68 (средняя 4.5 из 5)

Добавление виджетов форм обратной связи и стилей форм в Adobe Muse.

Эта ошибка может возникать по нескольким причинам. Для устранения неполадок выполните следующее:

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

2. Некоторые поставщики услуг хостинга не отправляют сообщения на адрес электронной почты с другим доменом сайта. Например, если ваш веб-сайт www.example.com, но в настройках формы указано отправлять сообщения на адрес электронной почты: [email protected], ваш поставщик услуг хостинга может отказаться отправлять сообщения, созданные виджетом «Формы».

Для решения этой проблемы выполните следующее:

Обновите параметры формы для отправки сообщений электронной почты на адрес: пользователь@example.com. Это может устранить проблему и позволит получать сообщения. Если ваш поставщик услуг хостинга — GoDaddy, а в форме указан адрес электронной почты не GoDaddy, необходимо включить «remote» (удаленный) адрес электронной почты в cPanel. (Такие же действия могут потребоваться при работе с другими поставщиками услуг хостинга).
Откройте страницу GoDaddy и перейдите к cPanel. Здесь осуществляется управление веб-сайтом.
На главной странице cPanel прокрутите вниз до пункта «:::Email» («:::Адрес электронной почты»).
Нажмите на параметр «MX entry», расположенный ниже «Accounts» (Учетные записи). Это настройка почтового обменника. По умолчанию подразумевается, что вы будете использовать электронную почту с доменом GoDaddy.
Убедитесь, что выбрали «Remote Mail Exchanger» (Удаленный почтовый обменник).
По умолчанию предполагается, что вы будете размещать электронную почту, используя GoDaddy. Если вы укажете адрес электронной почты, размещенный не на ресурсе GoDaddy, тогда GoDaddy не примет его по умолчанию. Необходимо предоставить GoDaddy разрешение на отправку форм на тот адрес электронной почты, который GoDaddy по умолчанию считает «remote» (удаленным).

3. Некоторые ИТ-отделы блокируют адреса электронной почты от [email protected] до [email protected], если сообщение электронной почты отправлено не со стандартного почтового сервера bigcompany.com. Измените параметры формы, добавив другой адрес электронной почты (первый в списке), который не оканчивается на @bigcompany.com. Таким образом, на оба адреса электронной почты будет приходить сообщение с данными формы.

4. Перейдите по ссылке http://my-site.com/scripts/form_check.php в веб-браузере и проверьте, отображаются ли у вас все три флажка зеленого цвета. Если напротив некоторых элементов не отображаются флажки зеленого цвета, значит сервер хостинга настроен неверно и виджеты «Формы» не отправляют сообщения электронной почты на указанный адрес.

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

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

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

Первым делом разберемся с файловой структурой, у нас будет главная страница index.html, папка со стилями — css, в которой будет один файл стилей template.css и файл PHP — send.php.

Первым делом создадим разметку нашей формы в файле index.html:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ><head>	<title>Страница</title>	<link rel="stylesheet" href="/../css/template.css" type="text/css" /></head><body>	<form action="send.php" method="get">		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>		<input type="submit" value="Нажмите, чтобы отправить письмо">	</form></body></html>

Ключевыми тут являются атрибуты action и method у <form>, первый отвечает за путь до PHP файла обработчика отправления письма, а второй за тип передачи в этот обработчик данных.

В нашем случае файл-обработчик send.php, который лежит в корневом каталоге, рядом с index.html, потому и путь такой.

И мы выбрали метод GET, так же можно выбирать метод POST, просто получать данные потом в PHP файле вы будете по другому.

Для <input> важен атрибут name, при помощи его значения потом мы будем доставать значения в PHP.

Добавим немного стилей, чтобы форма была по центру страницы:

form {	text-align:center;}form input {	margin:20px 0;}

Теперь остается только написать обработчик send.php, который будет отправлять сообщение на почту.

Немного о логике происходящего. Пользователь, попав на страницу index.html, заполняет поля формы и нажимает на кнопку Отправить (В нашем случае она будет с текстом «Нажмите, чтобы отправить письмо»), после чего страница переходи к файлу send.php, который будет выполнять, написанный нами скрипт, по его результатам выводить сообщение об успешной/не успешной отправке.

Немного о самом скрипте, чтобы продемонстрировать работоспособность примера, письмо будет отправляться на указанный в поле E-mail. Т.е. вы сможете ввести свой адрес и удостоверится в работе скрипта.

Вот сам скрипт, с комментариями строк:

<?php	//Получаем данные из глобальной переменной $_GET, так как мы передаем данные методом GET	$name = $_GET['name']; // Вытаскиваем имя в переменную	$email = $_GET['e-mail']; // Вытаскиваем почту в переменную	$message = "Поздравляем, $name, отправка сообщений на почту $email работает"; // Формируем сообщение, отправляемое на почту	$to = $email; // Задаем получателя письма	$from = "noreply-site.web.cofp.ru"; // От кого пришло письмо	$subject = "Письмо с примера простой формы сайта web.cofp.ru"; // Задаем тему письма	$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n"; // Формируем заголовок письма (при неправильном формировании может ломаться кодировка и т.д.)	if (mail($to, $subject, $message, $headers)) { // При помощи функции mail, отправляем сообщение, проверяя отправилось оно или нет		echo "<p>Сообщение успешно отправлено</p>"; // Отправка успешна	}	else {		echo "<p>Что-то пошло не так, как планировалось</p>"; // Письмо не отправилось	}?>

Чтобы понять, что тут происходит, вам нужны хотя бы базовые знания PHP или программирования на других языках. Комментарии помогут вам.

Там где мы вытаскиваем данные в переменные — используется глобальная переменная и значения атрибутов name, соответствующих полей.

Результат работы примера можно увидеть на демо-странице:

Скачать исходники примера ниже:

настройка. Код формы обратной связи

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

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

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

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

Рисунок 1. Что такое форма обратной связи и почему она так необходима?

Что такое форма обратной связи и почему она так необходима?

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

Форма обратной связи представляет собой отдельную страницу или блок (отдел), состоящий из нескольких полей ввода текста и кнопки «Отправить». Как правило, стандартная форма имеет следующие поля:

ФИО
E-mail (адрес электронной почты)
Номер мобильного телефона
Адреса вашего сайта
Поле для ввода текстового сообщения

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

Рисунок 2. Что такое форма обратной связи и почему она так необходима?

Кроме того, к форме обратной связи некоторые владельцы добавляют карты Google или Яндекс, формы входа на сайт с помощью социальных сетей «ВКонтакте», «Facebook», «Google+» и так далее. Но мы поговорим о создании простейшей формы обратной связи, для которой Вам потребуется исключительно знание основ языка разметки HTML и ничего более.

Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Для воссоздания рабочей формы обратной связи Вам потребуется три важных элемента, один из которых отвечает за разметку и структуру формы (HTML), второй за её внешнее оформление (CSS), а третий за обработку и передачу данных (PHP). Начнём по порядку:

Написание HTML-кода для формы обратной связи

Шаг 1. Для того, чтобы обозначить форму в HTML используется тэг <form> </form>. Внутри него будут задаваться размеры, стили и другие жизненно важные свойства формы. При записи самого тэга ему необходимо задать для обозначения класс, который в дальнейшем поможет установить для формы CSS стили.

Рисунок 1. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 2. Далее для создания первого поля нашей формы внутри тэга <form> необходимо написать блочный тэг <p>, которой отвечает за создание новой строки.

Рисунок 2. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 3. Внутри тэга <p> с новой строки вписываем следующий тэг: <label for=»name»>Имя</label>. Он отвечает за наименования будущего поля формы.

Рисунок 3. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 4. С новой строки всё в том же тэге <p> прописываем тэг создания поля со следующими значениями: <input type=»text» name=»name» placeholder=»Введите ваше имя» required \>. Параметр «type=»text«» задаёт тип текстового поля, а параметр «placeholder=»Введите ваше имя«» задаёт начальный текст в этом самом текстовом поле. Параметр «required» даёт понять посетителю сайта, что данное поле обязательно для заполнения. В результате у Вас должна получиться форма с одним полем, как показано на скриншоте ниже.

Рисунок 4. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 5. По выше приведённому примеру добавьте остальные нужные Вам поля, каждый раз начиная с тега <p>. Для установки поля с текстовым сообщением используйте тэг <textarea name=»message» cols=»50″ rows=»6″ required></textarea>. Параметры «cols» и «rows» отвечают за ширину и высоту текстового поля. Можете задать параметры, какие Вам больше нравятся. У Вас должно получиться примерно так, как показано на скриншоте ниже.

Рисунок 5. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 6. Чтобы защитить себя от ботов, которых сегодня в интернете довольно много, создайте ещё одну строку с помощью тэга <input name=»bezspama» type=»text» style=»display:none» value=»» />. За счёт параметра «style=»display:none»» данное поле не будет видно простым смертным, однако ботами будет заполняться автоматически. Таким образом, Вы всегда сможете отличить живого человека от программы.

Рисунок 6. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 7. Завершающим этапом разметки станет создание кнопки отправки. Для этого используется тэг <button>. Создайте новый блок <p> и внутри него впишите код кнопки со следующими параметрами: <button class=»submit» type=»submit»>Отправить сообщение</button>. Получиться должен похожий результат, как показано на скриншоте.

Рисунок 7. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Работа с каскадными таблицами стилей (CSS)

Как Вы уже успели заметить в процессе разметки, у нас получилось что-то очень кривое, невзрачное и отвратительное. Для того, чтобы придать форме обратной связи более или менее опрятный вид, одного языка HTML будет недостаточно. Для этой цели придётся прибегнуть к использованию стилей CSS.
В том случае, если Вы воспользовались советом подтянуть свои базовые навыки на ресурсе htmlbook.ru, то задать определённые параметры оформления для всех частей формы с помощью CSS Вам не составит никакого труда. Если же у Вас нет желания или времени со всем этим возиться, то мы предоставим Вам уже готовый код и расскажем, как его подключить.

Рисунок 8. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Подключить стили CSS к HTML можно двумя способами:

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

Файл style.css подключается внутри тэга <head></head> с помощью скрипта <link rel=»stylesheet» media=»screen» href=»style.css»>. В том случае, если файл со стилями лежит не в той же самой папке, что и основной файл html, то к нему необходимо указать путь. В нашем файле со стилями каждый элемент имеет обозначение. При желании Вы сможете поменять параметры под себя, руководствуясь только базовыми навыками программирования.

Подключение файла PHP и его настройка

Как уже было сказано ранее, скрипт PHP отвечает за исполнение формы обратной связи. Однако для того, чтобы более или менее понять принцип работы языка PHP, необходимо прочитать большой объём литературы и провести приличное количество часов за практикой. Поэтому, как и в случае с CSS, мы предоставим Вам уже готовый файл с php-скриптом, который останется только прикрепить к документу с формой.

В отличие от файла style.css, файл с php-скриптом прикрепляется в свойствах самой формы. Начнём по порядку:

Шаг 1. Откройте ранее написанный код и найдите строку с открытым тегом формы. Добавьте к нему свойства «action=»contact-form.php»» и «method=»post»». Смотрите пример на скриншоте.

Рисунок 9. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 10. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 11. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 4. Далее необходимо добавить ещё две переменных с адресом вашей электронной почты и темой письма, которая будет отображаться на вашем ящике. В строке с переменной «$address» укажите E-mail, а в строке «$sub» тему письма как показано на скриншоте.

Рисунок 12. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Шаг 5. В строке с переменной «$mes» настраивается формат письма, которое Вы получите на почту. Вы можете переписать его без изменений или отредактировать по собственному вкусу.

Рисунок 13 Как создать простейшую форму обратной связи для сайта на HTML и PHP?

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

Рисунок 14. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Скачать файлы CSS и PHP для формы обратной связи

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

Рисунок 15. Как создать простейшую форму обратной связи для сайта на HTML и PHP?

Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

Опираясь на выше приведённые инструкции, Вы без труда сможете «нарисовать» форму обратной связи под свой собственный вкус. Однако, если у Вас нет времени или желания самостоятельно создавать форму с нуля, Вы можете найти в интернете уже готовые дизайнерские формы и обладая базовыми навыками HTML отредактировать их под себя.

Рисунок 1. Подборка красивых дизайнерских форм обратной связи на HTML и CSS для разных целей

Немного поискав, мы нашли для Вас подборку из 35 красивых всплывающих дизайнерских форм обратной связи, которые написаны на HTML и CSS. Данные формы подходят для таких движков, как WordPress и Joomla, имеют простую и лёгкую настройку из панели управления, а также прекрасно подходят для сайтов без движка.

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

ВИДЕО: Всплывающая форма обратной связи для сайта WordPress

Как скопировать сайт с формами обратной связи

Как сделать копию сайта и настроить веб-формы

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

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

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

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

Как работает отправка заявок и сообщений на web-сайте

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

В первую очередь, вы должны понимать, как работает отправка данных с интернет-страниц. Поэтому, способу получения сообщений с web-ресурса стоит уделить отдельное внимание. Знайте что для того, чтобы отправить данные из HTML-документа в веб-разработке существует два популярных метода: GET-запрос и POST-запрос.

Работа первого заключается в том, что данные из полей формы отправляются открыто, через адресную строку браузера. При этом происходит переход на исполнительный файл и эти данные становятся видны в поле с адресом сайта. Например, формат передаваемых значений может быть следующим: ?name=иван&phone=123456

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

Как настроить формы обратной связи на почту

Ранее мы выяснили, как работает оправка сообщений из формы, теперь необходимо ее настроить. Первое что вам стоит указать — это метод передачи данных. Он задаётся с помощью специального параметра method. Именно в нем стоит указать каким способом будут отправляться данные веб-формы, POST или GET запросом.

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

За передачу данных в этом файле будет отвечать PHP-функция mail( $to, $subject, $message, $headers ). Параметрами которой являются: почта получателя, тема, сообщение и заголовки письма. Если с первыми тремя значениями все понятно, то с четвертым могут возникнуть вопросы. Этот параметр обязательно рекомендуется указать.

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

Как оправить заявки и сообщения в Telegram

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

Передача данных web-формы в Телеграм, по своему принципу, очень похожа на оправку сообщений на почту. В этом случае вам также придется указать в форме ссылку на файл, который будет принимать значения формы и отправлять их дальше. Напомним, ссылка задаётся через специальный параметр action.

Ещё потребуется задать метод с помощью которого данные формы будут передаваться в исполнительный PHP-скрипт. Он указывается параметром method и будет содержать одно из двух значений, либо POST, либо GET. Далее вам необходимо будет заполучить ID аккаунта адресата в Телеграме. Это делается через специального бота.

Главное, что вам предстоит сделать — это создать своего личного бота, который будет передавать сообщения с сайта. Необходимо будет узнать его Token, то есть ключ. При этом работа исполнительного файла будет связана с функцией fopen. Именно она будет содержать запрос с сообщением, Token-ключ отправителя и ID получателя.

Почему могут не работать web-формы

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

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

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

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

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

Сегодня речь пойдёт не столько о создании стандартной формы обратной связи установленной в самой Joomla, сколько о разработке целого модуля и его возможностях, которые он может предложить вашему сайту. Стандартную форму можно привязать к пункту меню (к примеру, «КОНТАКТЫ») и тем самым выделить для неё целую страницу. Однако при использовании стандартных средств не всегда можно получить желаемое. У нас всех свои собственные проекты в сети, каждый из них отличается друг от друга и количество полей для заполнения, которые предлагает движок, могут нас не устраивать. Я уже молчу о том, что визуальный стиль нужно подгонять к фирменным цветам, да и сама форма желательно должна быть компактной. А что если нам не нужны некоторые поля и мы хотим их заменить на что-то другое? Вывод тут один, необходимо создать собственную форму для обратной связи своими руками. Этот модуль будет интересен абсолютно всем, особенно онлайн магазинам, в качестве: обычной формы для связи, подписки, рассылки, подтверждения заказа при покупке товара и т.д. В общем, возможностей много и для начала определимся: я использую Joomla 3.x, стандартный шаблон protostar, кодировка моего хостинга utf-8. Модуль запросто запускается на Joomla с версией 3 и выше, а про кодировку поговорим, когда будем писать код. Наша форма обратной связи будет иметь три поля «Ваше имя», «Ваш телефон», «Сообщение», а так же кнопку для отправки. Ещё добавим два сообщения, одно из которых будет гласить о положительном результате отправки письма, а второе в качестве заголовка. Вот как выглядит этот модуль, размещённый в боковой панели сайта:

1. Создаём файлы и папки

Для начала необходимо разобраться со структурой папок и файлов. На рабочем столе создаём папку mod_feedback_form (все приставки mod ниже по тексту обязательны), внутри расположим ещё одну с названием tmpl. В первой папке должно лежать то, что отвечает за установку модуля, его настройку и работу. В tmpl кладут шаблоны для визуального отображения на сайте или подключаемые файл. Ещё многие добавляют пустые index.html в качестве заглушки, чтобы любопытные пользователи не могли иметь прямой доступ к файлам в этих папках. Вы можете их создать, если хотите, но лично я не вижу необходимости, так как название вашего модуля вы создаёте сами. Какова вероятность того, что злоумышленники узнают название? К тому же в файлах такого рода принято писать первую строчку для ограничения доступа. Даже если человек напрямую сошлётся на конкретный файл, движок выдаст «Restricted access» (Ограниченный доступ).

И так, в папке mod_feedback_form при помощи любого редактора создаём mod_feedback_form.xml и mod_feedback_form.php:

В tmpl кладём default.php и success.php:

Теперь о каждом по отдельности.

1.1 Файл mod_feedback_form.xml

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

XML код:
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.6" client="site">
    <name>Feedback Form</name>
    <author>WebDesign</author>
    <creationDate>august 2016</creationDate>
    <copyright>Copyright (C) 2016. All rights reserved.</copyright>    
    <license>Public License</license>
    <authorEmail><a href="mailto:Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.<">Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.<</a>;/authorEmail>
    <authorUrl>www.author.ru</authorUrl>
    <version>1.0.0</version>
    <description>Модуль для создания формы обратной связи на сайте.</description>
    <files>
        <filename module="mod_feedback_form">mod_feedback_form.php</filename>
        <folder>tmpl</folder>
        <filename module="mod_feedback_form">default.php</filename>
        <filename module="mod_feedback_form">success.php</filename>
    </files>
    <languages>
        <language tag="en-GB">en-GB.mod_feedback_form.ini</language>
        <language tag="en-GB">en-GB.mod_feedback_form.sys.ini</language>
    </languages>
    <config>
        <fields name="params">
            <fieldset name="feedbackform" label="Настройки">
 
                <field name="feedback-email" type="email"
                    label="E-mail"
                    description="Напишите почтовый ящик, на который хотите получать письма от пользователей."
                    required="true"
                    size="30"
 
                    validate="email" />
 
                <field name="feedback_title_form" type="text" default=""
                    label="Заголовок в форме"
                    description="Напишите заголовок, который будет отображаться в форме обратной связи перед полями."
                    size="30" />
 
                <field name="feedback_title" type="text" default=""
                    label="Заголовок письма"
                    description="Этот заголовок будет показан в приходящем на почту письме."
                    required="true"
                    size="30" />
 
                <field name="feedback_success_message" type="text" default=""
                    label="Удачная отправка"
                    description="Сообщение о том, что письмо удалось отправить."
                    required="true"
                    size="300" />
 
            </fieldset>
        </fields>
    </config>
</extension>

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

1.2 Файл mod_feedback_form.php

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

PHP код:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );
 
if(isset($_POST['mod_feedback_submitted'])) {              // Если кнопка нажата, то отправить письмо
    $name = isset($_POST['feedback_name']) ? $_POST['feedback_name'] : 'Не указано' ;
    $phone = isset($_POST['feedback_phone']) ? $_POST['feedback_phone'] : 'Не указано' ;
    $formmessenge = isset($_POST['feedback_form_messenge']) ? $_POST['feedback_form_messenge'] : 'Не указано' ;
 
    $name = strip_tags($name); 
    $phone = strip_tags($phone); 
    $formmessenge = strip_tags($formmessenge); 
 
    $message = "<h3>Текст сообщения:</h3>" ;            // Текст письма на почте
    $message .= "<p><b>Имя:</b> $name" ;                // Имя - если не заполнено, покажет "Не указано"
    $message .= "<p><b>Телефон:</b> $phone" ;            // Телефон - если не заполнено, покажет "Не указано"
    $message .= "<p><b>Сообщение:</b> $formmessenge" ;    // Сообщение - если не заполнено, покажет "Не указано"
 
    $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8"; // кодировка ставится в зависимости от сервера: utf-8 или windows-1251
 
    // Отправляем письмо на уканаззный ящик с заголовком
    @mail($params['feedback-email'], $params['feedback_title'], $message, $headers) ;
 
    // Показывает сообщение об успешной отправке из файла success.php
    require( JModuleHelper::getLayoutPath( 'mod_feedback_form', "success" ) );
}
else { 
    // Если кнопка НЕ нажата, то показывать стандартную форму из файла default.php
    require( JModuleHelper::getLayoutPath( 'mod_feedback_form' ) );    
}
?>

Всё подписал в самом коде, но для тех, кто не понимает, объясняю. Всё что между if и else как раз и формирует сообщение для отправки на почту. После того как письмо выслано на электронный ящик, вместо полей формы выводится содержимое из success.php (в нем сообщение об успешной отправки). Это происходит, если нажали кнопку «Отправить», в противном случае покажет стандартную форму из файла default.php. Очень важный момент, у меня на хостинге установлена кодировка utf-8, поэтому я поставил на 18 строчке именно её. У кого-то возможно надо будет заменить на windows-1251. Если будет стоять не та кодировка, то на почту будут приходить непонятные символы.

1.3 Шаблон default.php в папке tmpl

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

PHP код:
<div>
    <form method="POST">
 
        <div><?php echo $params['feedback_title_form']?></div>
 
        <input type="text" name="feedback_name" placeholder="Ваше имя..." required='required' />
        <input type="text" name="feedback_phone" placeholder="Ваш телефон..." required='required' />
        <input type="text" name="feedback_form_messenge" placeholder="Сообщение..." required='required' />
 
        <input type="submit" value="Отправить" name="mod_feedback_submitted" />
 
    </form>
</div>

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

1.4 success.php в папке tmpl

В success.php будет небольшой код:

PHP код:
<div>
    <?php echo $params['feedback_success_message']?>
</div>

Этот файл отвечает за вывод сообщения при успешной отправке письма на почту. Но я не стал писать слова прямо в нём, а добавил функцию echo с параметром feedback_success_message. Таким образом, тут покажет всё, что мы напишем в настройках модуля.

2. Устанавливаем в Joomla

Далее нам необходимо установить модуль на сайте. Берём папку mod_feedback_form со всеми файлами внутри и бросаем в директорию на сервере …/modules.

Открываем панель управления, следом «Расширения – Менеджер расширений — Поиск». В списке мы увидим наш модуль (название Feedback Form), выбираем его и нажимает установить.

Далее открываем менеджер модулей и нажимаем создать. В самом верху выбираем тип модуля:

3. Настраиваем форму обратной связи

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

Собственно те, что помечены звёздочкой, обязательны для заполнения.

E-mail – тут необходимо вставить электронный ящик, на который впоследствии будут отправляться все письма из формы. Можете выбирать любой, не обязательно писать тот же, что и при установке Joomla.

Заголовок в форме – небольшое текстовое сообщение перед полями. Оно не обязательно, скорее мотивирует или даёт подсказку, зачем нужна данная форма.

Заголовок письма – этот текст будет заголовком для письма приходящего на ящик.

Удачная отправка – данное сообщение выводиться после успешной отправки. Этот параметр прописан в файле success.php.

Как вы понимаете success.php сильно не нужен, всё, что в нём написано можно было разместить в default.php. Но добавив строку для обращения к другому файлу, за какой либо информацией, я дал вам возможность поэкспериментировать с выводом и стилями.

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

Вот как выглядит написанное сообщение и то, что приходит на mail:

Заключение

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

Опубликовано: 22-01-2017

Несколько форм на одной странице с отправкой без перезагрузки

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

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

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

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

Несколько форм связи с одним обработчиком

К примеру, возьмем три формы.

Присвойте каждой форме свой уникальный id. У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css, для отображения подсказки включите атрибуты placeholder, а для формирования темы письма добавьте скрытый input.

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

Отправка формы без перезагрузки страницы

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

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

Форма связи в процессе заполнения

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

Форма связи после нажатия кнопки «Отправить»

update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):

Метод .load() загружает данные и вставляет в указанный элемент.

«#parent» — id формы, в которую необходимо вставить удаленные данные.

В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input. Назначьте ему id, например inputs. Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id, этот id необходимо указать в #parent, это станет контейнером для загрузки скриптом данных формы (удаленные input).

«http://site.ru» — адрес вашей страницы с формой, откуда скрипт загрузит удаленные input. Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.

«#child» — id блока, который содержит input. В данном случае div #inputs.

3000 — время в мс через которое восстановится код формы.

Демо

PHP обработчик

Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.

Данный обработчик содержит проверку метода передачи данных.

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

Возникли вопросы? Давайте обсудим их в комментариях.

Демо

[ИСПРАВЛЕНО] Почему Contact Form 7 не отправляет электронные письма?

Вам нужно заполнить контактную форму 7, не отправляя электронное письмо?

Не волнуйтесь: у нас есть решение для вас.

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

Исправьте вашу контактную форму 7 писем прямо сейчас

Почему контактная форма 7 не отправляет электронные письма

Контактная форма 7 письма отправлены, но не получены? Вы не одиноки.

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

Но электронное письмо с контактной формой никогда не попадает в ваш почтовый ящик.

Если вы используете Контактную форму 7, мы объясним, почему часто бывает, что Контактная форма 7 не отправляет электронные письма.

Есть 2 основные причины:

Ваши электронные письма считаются спамом

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

К сожалению, Contact Form 7 отправляет вам уведомление, когда форма заполняется, используя стандартный или общий адрес электронной почты в качестве адреса «от». Это часто отмечается как спуфинг, потому что это электронное письмо является общим и не имеет правильной аутентификации.

По этой причине электронные уведомления Контактной формы 7 обычно теряются и никогда не попадают в ваш почтовый ящик.

Ваша хостинговая компания не использует почтовую функцию PHP

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

Если ваш веб-хостинг не поддерживает почтовую функцию PHP (которая в наши дни очень распространена), это может быть причиной того, что Contact Form 7 не отправляет электронную почту. Функция WordPress wp_mail () использует почту PHP для отправки электронных писем с вашего сайта, включая электронные письма, созданные плагинами контактной формы, но многие хосты отключают ее.

Мы знаем, что у людей возникают проблемы с отправкой GoDaddy электронной почты WordPress именно по этой причине.

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

Вот почему мы рекомендуем использовать SMTP-плагин для отправки электронных писем из WordPress вместо использования самой почтовой функции PHP по умолчанию.

Итак, теперь, когда вы знаете причины, по которым Contact Form 7 не отправляет электронные письма, давайте посмотрим, как решить эту проблему.

Как исправить, что контактная форма 7 не отправляет электронное письмо

Есть 2 основных способа решить эту проблему с неполучением писем через контактную форму:

Попробуйте изменить адрес отправителя
Используйте контактную форму 7 с WP Mail SMTP

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

Давайте сначала посмотрим на это.

1. Попробуйте изменить адрес отправителя

В настройках

Contact Form 7 по умолчанию используется общий адрес отправителя для каждой формы: [электронная почта защищена]

Это плохая идея, потому что:

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

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

Создайте новый адрес электронной почты (необязательно)

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

Мы покажем вам, как это сделать, на примере Bluehost.

Перейдите в панель управления cPanel на веб-сайте своего веб-хостинга и найдите настройки электронной почты.

Найдите домен, который вы хотите использовать с новой учетной записью электронной почты, и щелкните Управление .

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

На экране Create an email account вам нужно настроить свой почтовый ящик следующим образом:

Домен : выберите доменное имя, которое соответствует вашему веб-сайту
Имя пользователя : это будет часть до @ в вашем адресе электронной почты

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

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

Изменить адрес электронной почты отправителя в контактной форме 7

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

Вы найдете все свои контактные формы, нажав Контакт »Контактные формы на боковой панели.

Найдите форму, с которой у вас возникли проблемы, и наведите на нее указатель мыши. Щелкните ссылку Изменить .

На странице Edit Contact Form прокрутите немного вниз и щелкните вкладку Mail .

На экране настроек электронной почты Contact Form 7 измените поле From на новый адрес электронной почты, который вы только что создали в cPanel.

Затем убедитесь, что в разделе Additional headers указано

Ответить: [ваш-адрес электронной почты]

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

Теперь прокрутите вниз до конца и нажмите Сохранить .

К сожалению, вы не можете быть опытным техническим специалистом, поэтому исправление №1 может не сработать для вас, особенно если это не решит проблему полностью. К счастью, исправление №2 предоставляет вам вариант, который может сделать каждый, даже новичок.

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

2. Используйте контактную форму 7 с WP Mail SMTP

Далее мы собираемся установить плагин WP Mail SMTP на ваш сайт.

WP Mail SMTP — лучший плагин SMTP для WordPress. Вместо того, чтобы полагаться на ваш сервер веб-хостинга для отправки электронных писем, WP Mail SMTP отправляет их через отдельного провайдера электронной почты.

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

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

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

Установить WP Mail SMTP

Для начала вам нужно загрузить zip-файл из своей учетной записи WP Mail SMTP. Вы найдете его на вкладке Загрузки .

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

Если вам нужна помощь с этим, перейдите к этому руководству по установке плагина WordPress.

Не забудьте Активируйте плагин.Как только вы активируете его, откроется Мастер установки.

Вы также можете запустить мастер, нажав кнопку Launch Setup Wizard в настройках WP Mail SMTP.

Затем мы настроим вашего провайдера электронной почты.

Выберите провайдера электронной почты или SMTP-сервер

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

Это просто, даже если вы не технический пользователь.

Нажмите кнопку Давайте приступим к работе , чтобы начать подключение вашего сайта WordPress к провайдеру электронной почты.

На первом этапе пора выбрать почтовую программу. WP Mail SMTP будет подключаться к API для отправки ваших писем, если вы не выберете Другой SMTP , который использует обычные настройки SMTP.

Не знаете, что здесь выбрать? У нас есть несколько советов, которые помогут вам принять решение:

WP Mail SMTP поддерживает учетные записи Gmail или G-Suite. Оба варианта — отличный выбор для небольшого сайта, который не генерирует тонны электронных писем.
Другой SMTP позволяет использовать любой SMTP-сервер, к которому у вас есть доступ.Некоторые провайдеры ограничивают количество писем, которые вы можете отправлять, но это еще один отличный вариант, если вы только начинаете. Обязательно используйте правильный порт SMTP, если выберете этот вариант.
Для крупных сайтов надежными вариантами являются SMTP.com или Sendinblue. Любой из этих почтовых программ может обрабатывать большое количество писем, сгенерированных с вашего сайта.
Если вы хотите иметь возможность отправлять большое количество электронных писем, лучше всего начать с правильного провайдера. Ознакомьтесь с этим руководством для провайдеров транзакционной электронной почты, чтобы увидеть полные обзоры 6 лучших почтовых сервисов для WordPress.

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

Нужна помощь?

Не забывайте, что элитная версия WP Mail SMTP поставляется с полной службой настройки White Glove. Поэтому, если вам неудобно выполнять настройку самостоятельно, вы можете приобрести Elite, и эксперт настроит ее для вас.

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

Включите ведение журнала электронной почты (необязательно)

В конце мастера WP Mail SMTP спросит, какие функции нужно включить.

По умолчанию в настройках плагина уже включены 2 основных инструмента:

Доставляемость электронной почты : WP Mail SMTP будет перенаправлять все ваши сообщения через новую почтовую программу
Отслеживание ошибок : WP Mail SMTP предупредит вас, если обнаружит проблемы с вашими записями DKIM, SPF или DMARC

Если у вас есть WP Mail SMTP Pro, вы также можете включить подробные журналы электронной почты .

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

Более того, версия Pro также включает полезный виджет панели инструментов для вашего сайта WordPress. Виджет показывает отправленные и неудачные электронные письма на диаграмме. Это позволяет быстро выявлять проблемы с электронной почтой. И если ваш почтовый клиент поддерживает это, он даже покажет вам, были ли электронные письма отправлено и доставлено .

Если в WP Mail SMTP включено ведение журнала, вы также можете:

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

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

И все! Теперь вы установили самый популярный плагин SMTP, чтобы исправить ошибку Contact Form 7, которая не отправляет электронные письма!

Загрузить WP Mail SMTP сейчас

Часто задаваемые вопросы по общей контактной форме 7 ошибок

У вас есть еще вопросы по контактной форме 7, которая не отправляет электронное письмо? Ознакомьтесь с дополнительной информацией о сообщениях об ошибках и проблемах CF7 ниже.

Если вы хотите просмотреть все часто задаваемые вопросы, приступим.

Использует ли контактная форма 7 SMTP?

Нет, Contact Form 7 по умолчанию не использует SMTP. Вместо этого он отправляет электронные письма через ваш веб-сервер, что ненадежно и может привести к потере электронной почты вашей контактной формы. Вы можете установить плагин WP Mail SMTP, чтобы легко включить SMTP в контактной форме 7.

Работает ли контактная форма 7 на локальном хосте?

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

Как подключить контактную форму 7 к Gmail?

Вы можете подключить контактную форму 7 к Gmail с помощью WP Mail SMTP. Мы рекомендуем использовать опцию почтовой программы Gmail в мастере настройки для обеспечения максимальной безопасности и максимальной функциональности.

Вы также можете использовать Gmail SMTP с опцией Другой SMTP в WP Mail SMTP. Обратите внимание, что некоторые провайдеры веб-хостинга блокируют Gmail SMTP, поэтому API почтовой программы Gmail обычно более надежен для контактной формы 7.

Что означает цвет сообщения об ошибке контактной формы 7?

Контактная форма 7 содержит 3 типа ошибок с цветовой кодировкой:

Желтый : это означает, что в вашей форме есть ошибка проверки.Например, может быть необязательное поле, которое не было заполнено.
Оранжевый : отправленная вами форма помечена как спам. Это могло быть из-за проблемы с reCAPTCHA или Akismet.
Красный : сбой почтового сервера. Это часто указывает на проблему с сервером хостинга, которая вызывает проблемы с функцией wp_mail () . Попробуйте установить WP Mail SMTP, чтобы узнать, решит ли он проблему. Если это не так, обратитесь за помощью к своему хозяину.

Если сообщение отмечено зеленой рамкой, продолжайте читать.

Сообщение помечено зеленой рамкой, поэтому почему контактная форма 7 не отправляет электронное письмо?

Обычно это означает, что ваше сообщение Контактной формы 7 было помечено как спам или отклонено на пути от вашего сайта к получателю. Итак, выглядит как , как будто ваша контактная форма WordPress не работает.

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

Чтобы исправить это, установите WP Mail SMTP, как мы показали вам в этом руководстве. WP Mail SMTP добавит в ваши электронные письма правильные заголовки, чтобы они не отбрасывались другими серверами после отправки.

Как исправить ошибку контактной формы 7 «При отправке сообщения произошла ошибка. Повторите попытку позже »

Если вы видите сообщение о том, что Contact Form 7 не смогла отправить ваше сообщение, обычно это вызвано защитой от спама Contact Form 7.

По умолчанию Contact Form 7 поддерживает только reCAPTCHA v3. Это самая строгая версия reCAPTCHA, и именно с ней пользователи сообщают о большинстве проблем.

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

reCAPTCHA v2 «Я не робот»
reCAPTCHA v2 невидимый
reCATPCHA v3
hCaptcha
Пользовательская CAPTCHA
Списки разрешенных и запрещенных адресов электронной почты

Обновление до WPForms того стоит, потому что в нем так много дополнительных функций, которых нет в Contact Form 7.Также намного проще создать контактную форму Elementor с помощью WPForms по сравнению с контактной формой 7.

Как исправить ошибку «Адрес электронной почты отправителя не принадлежит домену сайта» Ошибка контактной формы 7

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

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

Лучше всего установить WP Mail SMTP, потому что это единственный способ добавить аутентификацию в ваши электронные письма WordPress.

Как исправить ошибку «Используется недопустимый синтаксис почтового ящика» Контактная форма 7 Ошибка

Если вы видите сообщение «Используется недопустимый синтаксис почтового ящика», это означает, что вы допустили ошибку при вводе поля «От» (адрес отправителя) в настройках почты Контактной формы 7.

Чтобы исправить это, проверьте введенный вами адрес электронной почты на предмет опечаток и ошибок форматирования.

Как исправить «Неверная конфигурация приводит к сбою доставки почты или другим проблемам. Подтвердите свои контактные формы сейчас »

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

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

Вам нужно внимательно просмотреть вкладку Mail , чтобы исправить выделенные ошибки.

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

Почему контактная форма 7 не отправляет электронную почту в тот же домен?

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

Настройки электронной почты хост-сервера

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

Обратитесь к своему хостинг-провайдеру и попросите его проверить настройки почтового сервера в вашей учетной записи.

DNS-записи домена

Для получения электронной почты вашему доменному имени необходимы действительные записи MX.

А для отправки электронных писем с аутентификацией также может потребоваться запись DMARC, 1 действительная запись SPF и запись DKIM.

Чтобы проверить записи DNS вашего домена для отправки электронной почты, вы можете отправить тестовое письмо из WP Mail SMTP на вкладке Test Email .

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

Почему контактная форма 7 не отправляет электронную почту в Gmail?

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

И если вы получаете электронные письма на Gmail, они могут увидеть в них предупреждение, например «будьте осторожны с этим сообщением».

Вы можете исправить, что Contact Form 7 не отправляет электронную почту в Gmail, установив WP Mail SMTP. Это добавит правильную проверку к электронным письмам, чтобы они были доставлены в Gmal.

При желании вы также можете отправлять электронные письма через свою учетную запись Gmail с помощью WP Mail SMTP.

Почему моя контактная форма застряла на прялке?

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

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

Пользователям

Contact Form 7 обычно предлагается отключить все остальные плагины и переключиться на тему по умолчанию. Это может помочь вам определить конфликт, но не поможет вам решить проблему.

Итак, есть еще 2 вещи, которые стоит попробовать.

Восстановить постоянные ссылки в WordPress

На панели управления WordPress перейдите в «Настройки » Постоянные ссылки .

Измените структуру постоянных ссылок и нажмите «Сохранить». Затем верните его к предыдущему значению и снова нажмите «Сохранить».

Это безопасно перестроит ваш файл .htacess , который иногда устраняет проблемы с вращением Контактной формы 7 и отсутствием отправки электронной почты.

Перейти на WPForms Lite

Для повышения функциональности поддержки и вы можете импортировать формы Contact Form 7 в WPForms Lite, который на 100% бесплатен навсегда.

WPForms также намного проще в использовании, потому что это 100% перетаскивание. Таким образом, вам не нужно писать код для создания формы.

Поддержка в WPForms тоже отличная. Даже если вы выберете бесплатную версию, вы сможете получить помощь от команды экспертов на WordPress.org. Вы всегда получите ответ на свой вопрос в течение 1–3 рабочих дней.

Посмотрите это сравнение WPForms Lite и Contact Form 7, чтобы узнать о дополнительных функциях, которые вы получите при переключении!

Исправьте вашу контактную форму 7 писем прямо сейчас

Затем используйте псевдоним Gmail с контактной формой 7

Теперь, когда вы установили контактную форму 7, вы можете использовать разные псевдонимы Gmail или G-Suite для отправки электронных писем из разных контактных форм WordPress.Это отличный способ иметь разные формы для отправки электронной почты от разных команд или отделов.

Ознакомьтесь с этим руководством по использованию псевдонимов Gmail в WordPress, чтобы узнать, как настроить эту мощную функцию.

Готовы исправить электронную почту? Начните сегодня с лучшего плагина WordPress SMTP. WP Mail SMTP Elite включает в себя полную настройку White Glove Setup и предлагает 14-дневную гарантию возврата денег.

Если эта статья вам помогла, подпишитесь на нас в Facebook и Twitter, чтобы получить больше советов и руководств по WordPress.

Как получить уведомления формы WordPress с помощью подключаемого модуля WP Mail SMTP

Вы не получаете уведомления по электронной почте из контактных форм WordPress? К сожалению, контактная форма WordPress не отправляет электронную почту очень часто.

Однако вы можете быстро решить эту проблему и начать получать эти электронные письма, настроив на своем веб-сайте простой протокол передачи почты (SMTP). Из этого туториала Вы узнаете, как исправить проблему отправки электронной почты в контактной форме WordPress.

Почему вы не получаете уведомления

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

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

Ваш хостинг-сервер WordPress (даже неуправляемый или управляемый хостинг WordPress) не настроен для использования почтовой функции PHP, которую WordPress использует для отправки электронных писем, создаваемых плагином контактной формы, таким как WPForms.
Ваш почтовый сервер блокирует его как спам. Чтобы уменьшить количество спам-писем, ваш провайдер электронной почты часто проверяет, исходит ли ваша электронная почта из того места, откуда, по его утверждениям, исходит. Например, если ваш почтовый сервер yahoo.com, скорее всего, ваше уведомление в форме даже не попадет в папку со спамом, поскольку они отправляются с совершенно другого сервера. Это может вызвать массу проблем, в том числе потерю электронных писем WooCommerce, отсутствие отправки электронной почты Gravity Forms или отсутствие отправки Ninja Forms.

Вот почему мы рекомендуем использовать SMTP для отправки электронных писем из WordPress вместо использования почтовой функции PHP по умолчанию. SMTP (Simple Mail Transfer Protocol) — это стандартный в отрасли способ отправки электронных писем, в котором используются надлежащие методы аутентификации для обеспечения доставки электронной почты.

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

Примечание: Этот метод обучения менее безопасен, поскольку он сохраняет ваш логин и пароль электронной почты на панели управления WordPress.Другие администраторы WordPress имеют к этому доступ. Для более безопасного варианта мы рекомендуем использовать один из более безопасных вариантов WP Mail SMTP.

Как исправить проблему с контактной формой WordPress, не отправляющей сообщение

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

Шаг 1. Установите подключаемый модуль WP Mail SMTP

Первое, что вам нужно сделать, это установить и активировать плагин WP Mail SMTP. Вы можете увидеть это руководство о том, как установить плагин WordPress, чтобы получить пошаговые инструкции.

Шаг 2. Настройте свой адрес электронной почты из сообщения

После установки и активации этого плагина перейдите в WP Mail SMTP »Настройки , чтобы настроить параметры почты.

Здесь сначала вам будет предложено ввести свой From Email . Это адрес электронной почты, на который будут отправляться все электронные письма вашего сайта (и уведомления формы) с номера с номера . Если вы настраиваете это на веб-сайте своей компании, вы можете указать здесь свой рабочий адрес электронной почты.

Этот параметр работает с большинством почтовых программ, хотя есть некоторые исключения. Если вы используете Zoho Mail SMTP, ваши электронные письма будут отправляться только с вашего адреса Zoho Mail, поэтому этот параметр будет выделен серым цветом в плагине.

Примечание: Убедитесь, что вы вводите тот же адрес электронной почты, который вы будете использовать для отправки электронных писем SMTP (ваш Yahoo, Gmail или адрес электронной почты Live).

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

Мы, , настоятельно рекомендуем также установить флажок Force From Email . Поскольку для работы SMTP сообщения «От» от всего на вашем сайте, которое отправляет электронную почту, должны совпадать с этим адресом электронной почты, это избавит вас от необходимости редактировать настройки электронной почты WordPress на всем сайте (во всех формах электронной почты и т. Д.).

Шаг 3. Настройте имя отправителя

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

Вы также можете выбрать Force From Name , чтобы применить этот параметр ко всем сообщениям электронной почты на сайте.

Мы также рекомендуем установить дополнительный флажок Return Path , чтобы установить обратный путь, совпадающий с From Email. Если этот параметр включен, вы будете получать по этому адресу электронную почту, если какие-либо сообщения не будут доставлены из-за проблем с электронной почтой получателя.

Шаг 4: Выберите почтовую программу

Затем в поле Mailer вам нужно выбрать опцию Other SMTP .

Если у вас возникли проблемы с WooCommerce, не отправляющим электронную почту, вы можете использовать другой почтовый клиент, который больше подходит для транзакционных писем. Не стесняйтесь ознакомиться с нашими руководствами по другим доступным почтовым программам, таким как Mailgun, Amazon SES, SendGrid, Gmail или Microsoft.

Параметр Gmail позволяет отправлять электронную почту с любого псевдонима Gmail или G-Suite. Вы также можете использовать несколько псевдонимов для отправки электронной почты. Ознакомьтесь с руководством о том, как отправлять электронные письма WordPress с псевдонимов Gmail, чтобы настроить это.

Шаг 5. Настройка других параметров SMTP

После выбора Other SMTP в качестве почтовой программы появится новый раздел под названием Other SMTP . Здесь вам нужно будет ввести дополнительные данные, чтобы связать свой сайт с провайдером электронной почты.

Для каждого провайдера электронной почты требуются несколько разные конфигурации SMTP. В этом руководстве мы рассмотрим, как настроить параметры для Gmail, Yahoo и Live / Hotmail.

При вводе вашего имени пользователя и пароля для любого варианта электронной почты обратите внимание, что эта информация хранится в виде простого текста.Для более безопасного подхода проверьте под полем «Пароль» инструкции по добавлению пароля в файл wp-config.php вашего сайта.

Для получения дополнительных сведений ознакомьтесь с руководством WPBeginner, чтобы узнать, как редактировать wp-config.

Вот настройки SMTP, которые вам понадобятся для самых популярных провайдеров электронной почты:

Настройки SMTP Gmail / G Suite

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

Хост: smtp.gmail.com
Порт: 587 (или 465 с использованием SSL-шифрования)
Имя пользователя: Адрес электронной почты вашего аккаунта Gmail (например, [электронная почта защищена])
Пароль: Пароль вашей учетной записи Gmail
Шифрование: TLS

Затем введите имя пользователя и пароль Gmail и сохраните эти настройки.

Примечание: Обратите внимание, что мы рекомендуем использовать встроенную интеграцию Gmail вместо этого менее безопасного почтового модуля Other SMTP.Однако, если вы используете SMTP, не забудьте на следующем шаге включить менее безопасные приложения.

Настройки Hotmail / Live SMTP

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

Хост: smtp.live.com
Порт: 587
Имя пользователя: Электронная почта вашего аккаунта Hotmail (например, [электронная почта защищена])
Пароль: Пароль учетной записи Hotmail
Шифрование: TLS

Затем введите свое имя пользователя и пароль Live или Hotmail и нажмите Сохранить изменения .

Настройки SMTP Yahoo Mail

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

Хост: smtp.mail.yahoo.com
Порт: 465
Имя пользователя: Электронная почта вашей учетной записи Yahoo Mail (например, [электронная почта защищена])
Пароль: Пароль учетной записи Yahoo Mail
Шифрование: SSL

Затем введите свое имя пользователя и пароль Yahoo и нажмите Сохранить изменения .

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

Настройки SMTP AOL

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

Хост: smtp.aol.com
Порт: 587
Имя пользователя: Ваше экранное имя AOL (например, john)
Пароль: Пароль вашей учетной записи AOL
Шифрование: TLS

После ввода этих данных не забудьте нажать кнопку Сохранить настройки .

Шаг 6. Включение менее безопасных приложений

Чтобы использовать SMTP на вашем сайте WordPress, вам может потребоваться включить менее безопасные приложения в вашей учетной записи электронной почты. Ниже мы покажем вам, как это сделать в:

Как включить менее безопасные приложения в Gmail

Чтобы включить менее безопасные приложения в Gmail, войдите в свою учетную запись Gmail или G Suite.

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

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

Чтобы снять эту блокировку, вам нужно будет нажать кнопку Проверить устройства сейчас (или перейти на страницу недавно использованных устройств в вашей учетной записи) и следовать инструкциям, чтобы сообщить Google, что это была законная попытка входа в систему.

Как включить менее безопасные приложения в Hotmail / Live

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

Как включить менее безопасные приложения в Yahoo

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

Затем нажмите здесь, чтобы перейти к настройкам безопасности учетной записи.

Теперь прокрутите вниз до Создать пароль приложения и щелкните по нему.

Появится экран для генерации пароля.В раскрывающемся списке выберите «Другое приложение». Назовите его как хотите и нажмите кнопку Generate .

Ваш пароль будет отображаться на следующем экране. Скопируйте его и нажмите «Готово». Его нужно будет вставить в область настроек SMTP WP Mail.

Вы увидите, как сгенерирован пароль приложения.

После создания пароля вы можете вставить его в WP Mail SMTP.

Шаг 7. Отправьте тестовое электронное письмо

После того, как настройки SMTP были добавлены в WP Mail SMTP, важно отправить тестовое электронное письмо, чтобы убедиться, что все работает правильно.

Чтобы отправить тестовое электронное письмо, щелкните вкладку Email Test на странице настроек WP Mail SMTP.

На этой вкладке вы можете ввести любой адрес электронной почты, к которому у вас есть доступ, и нажать кнопку Отправить письмо .

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

Если вы проверите в почтовом ящике адрес электронной почты, который вы только что ввели, вы должны получить письмо для этого теста. Если вы используете электронную почту Yahoo, она может занять около 5–10 минут, прежде чем она появится в вашем почтовом ящике.

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

И не забудьте указать From Email в настройках уведомлений вашей формы на тот же адрес электронной почты, с которым вы настроили этот SMTP.

Последние мысли

Вот и все! Вы успешно настроили SMTP на своем сайте WordPress. Теперь вы начнете получать уведомления из форм WordPress.

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

Чего вы ждете? Начните с самого мощного сегодня плагина форм WordPress.

Если вам понравилась эта статья, подпишитесь на нас в Facebook и Twitter, чтобы получить больше бесплатных руководств по WordPress.

Создание настраиваемой контактной формы для веб-сайта с помощью PHP и HTML

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

Что будет делать эта специальная контактная форма

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

Создать индивидуальную контактную форму

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

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

HTML-код для контактной формы

Мы собираемся создать простую HTML-форму для сбора простой информации от пользователя.Получим имя, адрес электронной почты, а затем само сообщение. Затем, конечно, кнопка для отправки формы. Достаточно просто.

Базовая настройка HTML-формы

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

Для контактной формы вы наверняка НЕ хотите использовать метод GET. Это передало бы данные формы в URL-адресе. Что не очень хорошо для большого количества информации или даже частной информации.

Используя элемент form , мы указываем атрибут action как «contact.php». Это указывает нашей HTML-форме на отправку всех наших данных в сценарий contact.php . В данном случае это тот же файл, который содержит саму настраиваемую контактную форму.

Затем, позже по HTML-коду, после всех элементов формы, мы закрываем форму с помощью тега

. Красиво и просто.

Создать каждый из элементов формы HTML

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

Мы можем использовать тег input для создания текстовых полей имени и электронной почты. Оба этих элемента настроены одинаково. Мы должны указать тип атрибута «текст», чтобы превратить его в текстовое поле. Затем дайте ему имя , чтобы мы могли фактически получить данные формы POST с нашим кодом PHP.

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

Подробнее об атрибуте placeholder можно узнать в школах W3.

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

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

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

Получить данные HTML-формы из POST в PHP

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

ПРИМЕЧАНИЕ: Убедитесь, что у вас есть весь PHP-код для обработки входных данных формы. ВЫШЕ HTML-код самой формы.Это позволит вам обрабатывать данные формы и отображать любые сообщения для нужного пользователя. Как сообщения об ошибках.

Во-первых, мы проверяем, действительно ли была отправлена контактная форма. В конце концов, бессмысленно пытаться обрабатывать данные, которые не были отправлены. Правильно?

Используя функцию isset , мы просто проверяем, существует ли элемент $ _POST [‘sendBtn’] . Если функция возвращает истинное значение , значит, форма была фактически отправлена. Если нет, значит, пользователь, скорее всего, просто загружал страницу в первый раз.

Получить данные формы через $ _POST

  // получаем данные POST от пользователя
$ name = $ _POST ['имя'];
$ email = $ _POST ['электронная почта'];
$ message = $ _POST ['сообщение'];

Затем мы можем получить все данные HTML-формы с помощью переменной $ _POST. Эта переменная будет содержать все данные, которые были отправлены с формой. PHP создаст ассоциативный массив, из которого вы можете получить каждый бит данных, который вам нужен.

Простая проверка формы для контактной формы

  if ($ name && $ email && $ message) {.....

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

Отправьте контактное сообщение по электронной почте с PHP

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

Создать заголовки электронной почты

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

  $ to_email = '[email protected]';
 $ subject = 'Новое сообщение от:'.$ name;
 $ headers = "От:". $ email;

Затем, чтобы отправлять электронные письма с помощью функции php mail, вы должны указать хотя бы один базовый заголовок электронного письма. В частности, заголовок «От». Обратите внимание, что первая буква — это заглавная буква. Очень важно иметь заглавную букву «F». Если вы этого не сделаете, ваш почтовый заголовок на самом деле не установлен и, следовательно, на самом деле не будет отправлять электронное письмо.

Отправьте электронное письмо с помощью PHP

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

  if (mail ($ to_email, $ subject, $ message, $ headers)) {
                $ display_message = 'Ваше сообщение отправлено. Вы получите ответ через несколько часов! ';
            }
            еще
                $ display_message = 'Произошла ошибка при отправке вашего электронного письма. Повторите попытку или напишите по электронной почте. $ To_email. напрямую.';

Поместив функцию mail в оператор if, вы сможете узнать, успешно ли почтовая функция отправила наше электронное письмо. Если функция возвращает истинное значение (также известное как успешное), то мы устанавливаем $ display_message как хорошее сообщение об успешном завершении.Если почтовая функция возвращает значение false , мы устанавливаем $ display_message как точное сообщение об ошибке.

Не забывайте отображать сообщения об ошибках!

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

  '.$ display_message. '';
?>

Подобно тому, как мы определяем, была ли форма действительно отправлена, вы можете использовать функцию isset , чтобы проверить, была ли создана переменная $ display_message. Если переменная существует (она же «установлена»), то отобразить ее визуально приятным способом. Я просто вставлю это в тег абзаца. Если $ display_message не установлен, мы ничего не делаем. Простой.

Вуаля! Индивидуальная контактная форма!

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

Улучшение этой специальной контактной формы

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

И если вы размещаете свой веб-сайт на локальном веб-сервере или просто используете веб-сервер localhost, вы можете настроить этот сервер для отправки электронных писем. Используя приложение SendMail и XAMPP, вы можете настроить свой локальный веб-сервер для отправки этих писем для вашего.Конечно, без сообщений об ошибках 🙂

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

Вам это понравилось? Поделитесь им со всем миром!

Нравится:

Нравится Загрузка …

Связанные руководства и статьи

Контактная форма WordPress не отправляет исправление электронной почты с использованием сервера SMTP

Контактная форма WordPress не отправляет электронное письмо — распространенная проблема, с которой сталкиваются владельцы веб-сайтов WordPress. Вы не получаете уведомления по электронной почте из контактных форм WordPress?

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

По умолчанию WordPress использует почтовую функцию PHP для отправки электронных писем, созданных WordPress или любым плагином для контактов, например Contact Form 7.

Однако функция почты PHP — не лучший подход и может снизить доставляемость электронной почты.Из-за характера функции PHP Mail электронные письма часто попадают в папку спама или нежелательной почты.

Также высока вероятность того, что электронные письма, отправленные популярным провайдерам электронной почты (gmail.com, hotmail.com и т. Д.), Будут заблокированы еще до того, как дойдут до получателя.

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

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

Вот почему рекомендуется использовать SMTP (простой протокол передачи почты) для отправки электронных писем в WordPress. В отличие от почтовой функции PHP, SMTP увеличивает доставляемость электронной почты за счет правильной аутентификации.

Если ваш хостинг-провайдер правильно настроил SMTP-сервер (проверьте лучшие доступные варианты хостинга WordPress), вероятность того, что электронная почта попадет в папку спама или нежелательной почты, меньше.

Следовательно, помогает улучшить доставляемость электронной почты . В этом руководстве вы узнаете, как настроить WordPress для отправки электронных писем с помощью SMTP-сервера вашего хостинг-провайдера.

Прежде чем продолжить, убедитесь, что ваш хостинг-провайдер поддерживает SMTP. Приведенный ниже пример основан на хостинге InMotion, который я использую, и процесс должен быть аналогичен другим хостинг-провайдерам, использующим cPanel (см. Различия между cPanel и vDeck).

Как исправить контактную форму WordPress, не отправляющую электронную почту?

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

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

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

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

Я начал подозревать, что в этом виновата почтовая функция PHP и что теперь настало время реализовать SMTP для отправки электронной почты в WordPress. Вы найдете множество руководств по настройке SMTP с помощью Gmail, Yahoo, SendGrid и т. Д.

Но Google часто меняет свои настройки безопасности, Yahoo я не использую, и хотя SendGrid — хороший вариант, я использую бесплатный план, чтобы не превышать мою ежемесячную бесплатную квоту, это был лучший вариант для настройки SMTP через мою хостинг-сервер.

Ниже вы найдете контактную форму WordPress, которая не отправляет исправления по электронной почте через SMTP-сервер. Если вместо этого вы хотите использовать Google, Yahoo, SendGrid, Mandrill или любой другой SMTP, вы можете использовать тот же плагин, что и упомянутый ниже.

Контактная форма не отправляется по электронной почте

Большинство хостинг-провайдеров WordPress предлагают услуги электронной почты для каждого вашего домена. Это означает, что вы можете создавать учетные записи электронной почты с собственным доменным именем, например [email protected].

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

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

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

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

Вам нужен SMTP-хост для вашего адреса электронной почты и SMTP-порт для безопасного входа в систему. Вы можете найти его, щелкнув «Веб-почта» на вкладке «Почта» в cPanel.

Затем нажмите « Войти в Webmail » и затем «Настроить почтовый клиент».

Вам потребуется то, что находится в разделе «Ручные настройки для сервера исходящей почты» и «Настройки безопасного SSL / TLS».

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

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

Плагин

в бесплатной версии предлагает вам параметры , которые можно настроить для отправки электронных писем с помощью Gmail, Mailgun, SendGrid, Sendinblue или другого SMTP. В версии PRO у вас также есть возможность использовать Microsoft SMTP (Outlook.com и Office 365) и Amazon SES SMTP.

Помимо встроенных интеграций Microsoft и Amazon SES, WP Mail SMTP Pro обеспечивает доступ ко многим другим мощным функциям и службам, таким как:

ЖУРНАЛ ЭЛЕКТРОННОЙ ПОЧТЫ — позволяет вам регистрировать и просматривать все электронные письма, отправленные с вашего сайта.
УПРАВЛЕНИЕ ЭЛЕКТРОННОЙ ПОЧТОЙ — вы можете отключить разные электронные письма с уведомлениями WordPress.
WHITE GLOVE SETUP — включает установку и настройку плагина WP Mail SMTP, корректировку конфигурации вашего DNS для правильной проверки имени домена электронной почты, настройку Mailgun и окончательное тестирование, чтобы убедиться, что все работает.

В данном руководстве я выбрал Другой SMTP. Вы можете выбрать любой другой. Например, для SendGrid вам понадобится только ключ API SendGrid.

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

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

В опциях плагина есть функция Email Test , чтобы проверить, все ли правильно настроили.

WP Mail SMTP отправит тестовое сообщение на указанный вами адрес электронной почты. Если вы не получаете тестовое сообщение , это означает, что вы неправильно настроили.

Наиболее частой причиной ошибок при отправке электронных писем с использованием SMTP является неправильный хост или порт SMTP. Убедитесь, что вы вводите правильные настройки хоста и порта, предоставленные вашим хостинг-провайдером.

Убедитесь, что вы выбрали правильный метод шифрования.Обычно SSL работает в большинстве сред, но проверьте его на своем веб-хосте, если ваши электронные письма не доставляются.

Плюсы и минусы использования почтовых серверов веб-хостинга для электронной почты WordPress

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

Вам не нужно будет платить никаких дополнительных денег за отправку и получение электронных писем, как если бы вы платили за использование SendGrid или Mandrill.

Однако некоторые хостинг-провайдеры WordPress применяют ограничения на исходящие электронные письма. Вот почему не рекомендуется использовать WordPress для отправки электронных писем с новостями.

Другая распространенная проблема с поставщиками виртуального хостинга и особенно с вариантами бесплатного хостинга заключается в том, что их почтовые серверы могут быть ненадежными. Если вы заметили задержки в доставке электронной почты, вам следует подумать об использовании сторонних почтовых сервисов, таких как Google Apps for Work, Mandrill или SendGrid.

Как вести учет всех писем, отправленных с сайта?

Если вы хотите вести учет всех писем, отправленных с вашего веб-сайта, то вам нужна опция ведения журнала электронной почты SMTP WP Mail.

Есть несколько причин, по которым вы можете использовать эту функцию:

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

Первое, что вам нужно сделать, это установить плагин WP Mail SMTP на свой сайт WordPress, если он еще не установлен.

Со своего сайта вы сможете перейти к настройкам плагина и включить регистрацию электронной почты. Зайдите в WP Mail SMTP » Настройки . Затем щелкните вкладку Журнал электронной почты. Обратите внимание, что для доступа к функции журнала электронной почты вам понадобится версия PRO . При этом будет регистрироваться каждое электронное письмо, отправляемое с вашего сайта, а также основные сведения об этом электронном письме.

С опцией «Включить журнал» сведения для каждой записи электронной почты WordPress будут включать:

Статус электронной почты (позволяет узнать, успешно ли она была отправлена)
Дата и время отправки
Строка темы
Адрес (а) электронной почты получателя (включая CC и BCC)
С электронной почты
Количество вложений (если вы настроили формы для приема нескольких вложений)
Используемые параметры почтовой программы
Дополнительные технические подробности (например, тип содержимого, MIME и т. Д.))

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

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

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

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

Контактная форма WordPress не отправляет сводку по электронной почте

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

В любом случае ваши электронные письма WordPress или WooCommerce не будут доставлены (см., Как исправить, что WooCommerce не отправляет электронные письма). Альтернативное решение — использовать стороннюю службу электронной почты для отправки ваших писем. Вы можете использовать такие сервисы, как Mandrill, Google Apps for Work или Sendgrid.

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

Использование службы электронной почты вашего хостинг-провайдера WordPress — это экономичный, надежный и простой способ использовать SMTP и быть уверенным, что ваши электронные письма будут отправлены, и что вы будете получать сообщения из контактной формы от посетителей вашего сайта.

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

РАСКРЫТИЕ: Сообщения могут содержать партнерские ссылки. Если вы купите что-то по одной из этих ссылок, я могу получить небольшую комиссию без каких-либо дополнительных затрат для вас. Об этом подробнее здесь.

Как исправить проблему, из-за которой WordPress не отправляет электронные письма в 2021 году

Распространенной проблемой среди владельцев веб-сайтов является то, что WordPress не отправляет электронные письма правильно или вообще.

Большинство управляемых хостинг-провайдеров WordPress, включая Kinsta, не предоставляют хостинг электронной почты.Однако это не означает, что вы не можете отправлять электронные письма из установленного WordPress. В Kinsta все сайты оснащены поддержкой транзакционной электронной почты, что означает, что ваш сайт WordPress сможет отправлять уведомления, подтверждения заказов WooCommerce и другие типы электронных писем, связанных с сайтом.

Обычно, когда вы пытаетесь исправить проблему, когда WordPress не отправляет электронные письма, это не проблема на сервере, а скорее электронная почта настроена неправильно при установке WordPress или существует несовместимость.

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

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

Предпочитаете посмотреть видео версию?

Почему WordPress не отправляет электронную почту

Есть несколько причин, по которым у вас могут быть проблемы с тем, что WordPress не отправляет электронные письма.К ним относятся:

Давайте посмотрим, как определить, какие из них могут вызывать проблему.

1. Письма отправляются, но попадают в спам

Перед запуском любых других тестов убедитесь, что электронные письма от WordPress не попадают в спам.

Если пользователь сообщает вам, что WordPress не отправляет электронные письма, возможно, его электронные письма просто отправляются в спам.

Попросите их проверить папку со спамом на наличие писем от системы. Некоторые почтовые клиенты могут идентифицировать электронные письма от WordPress как спам, поскольку они автоматизированы.

2. Ваш сервер настроен неправильно

Распространенной причиной того, что WordPress не отправляет электронные письма, является то, что ваш сервер не настроен для их отправки.

Веб-серверы

не предназначены для отправки электронных писем, и, возможно, ваш сервер не настроен для использования функции PHP mail () .

Хорошая новость заключается в том, что вы можете легко проверить, не в этом ли причина проблемы, и исправить ее.

Как проверить, отправляет ли сервер электронную почту

Первое, что вы можете сделать, это запустить тест на своем сайте WordPress с помощью бесплатного плагина Check Email.

Это базовый плагин, предназначенный для проверки того, может ли ваша установка WordPress и / или сервер отправлять электронные письма.

После установки перейдите в Инструменты > Проверить адрес электронной почты на панели инструментов WordPress. Введите адрес электронной почты, на который нужно отправить тест, и нажмите Отправить тестовое письмо .

Отправить тестовое электронное письмо

Вы увидите подтверждение.

Тестовое электронное письмо с подтверждением

Проверьте свой почтовый клиент, чтобы узнать, получили ли вы тестовое письмо. В строке темы будет указано «Тестовое письмо с https: // yourdomain.com. »

Получено тестовое письмо

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

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

Если вы являетесь клиентом Kinsta и используете HHVM, вы можете временно переключиться на PHP 7, чтобы проверить, есть ли проблема совместимости. Вы можете легко переключиться на PHP 7 в личном кабинете MyKinsta. После тестирования вы можете снова переключиться на HHVM.

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

Kinsta использует Google Cloud Platform, которая по умолчанию блокирует исходящие соединения на порту 25. Согласно Google, «этот исходящий порт SMTP заблокирован из-за большого количества злоупотреблений, которым этот порт подвержен». В этом случае попробуйте альтернативный порт, например 2525. Порты 587 и 465 открыты в Kinsta.

3. Ваш плагин контактной формы отправляет ложные сообщения электронной почты

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

Скорее всего это будет плагин контактной формы.

Плагины

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

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

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

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

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

Затронутые плагины контактной формы

Эта проблема может затронуть любой плагин контактной формы. Вот некоторые плагины, с которыми у вас может возникнуть эта проблема:

Контактная форма 7
Гравитационные формы
Формы ниндзя
Счастливая форма
weForms
Контактная форма Jetpack
Грозные формы

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

WordPress не отправляет ваши электронные письма? 😱 Узнайте, почему это происходит и как это исправить, прямо здесь ⬇Нажмите, чтобы твитнуть

Как предотвратить попадание спама в электронные письма WordPress

1. Добавить адрес электронной почты в белый список

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

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

2. Используйте более безопасный адрес электронной почты

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

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

3. Настройте аутентификацию электронной почты

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

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

Как настроить SMTP в WordPress для отправки электронной почты

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

SMTP расшифровывается как Simple Mail Transfer Protocol. Он перемещает электронную почту в сети и между ними. Так что, если ваш сервер не настроен для отправки электронных писем, это сделает это возможным.

Есть несколько поставщиков SMTP на выбор, в том числе бесплатные (например, SMTP-сервер Gmail): так что это не должно стоить вам денег, только немного времени.

Чтобы настроить это, следуйте нашему руководству по использованию бесплатного SMTP-сервера с WordPress.

Как настроить плагин форм для правильной отправки электронной почты

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

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

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

Исправить контактную форму 7, не отправляющую электронные письма

Contact Form 7 — один из старейших и самых популярных бесплатных плагинов для форм WordPress.

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

В админке WordPress перейдите в Контакт> Контактные формы .

Контактные формы

Выберите созданную вами форму и откройте вкладку Mail .

Вкладка электронной почты в контактных формах

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

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

Сохраните изменения.

Теперь проверьте все, заполнив форму самостоятельно.

Исправить гравитационные формы, не отправляющие электронные письма

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

Документация гравитационных форм

Проработайте параметры в документации по порядку, пока все не заработает снова.

Исправить формы ниндзя, не отправляющие электронные письма

Ninja Forms имеет как бесплатную, так и премиальную версии.Также существует множество дополнительных плагинов, которые вы можете бесплатно скачать из репозитория WordPress.

Если у вас возникли проблемы, связанные с электронной почтой с помощью Ninja Forms, рекомендуемое решение — использовать плагин SendWP, разработанный той же командой.

ОтправитьWP

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

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

Исправить HappyForms, не отправляющие электронные письма

HappyForms — еще один плагин с бесплатной и премиальной версией.

Happyforms

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

Чтобы изменить адрес электронной почты, с которого отправляются Happy Forms, вы можете изменить настройки электронной почты для отдельной формы аналогично Contact Form 7.

Перейдите в HappyForms> Все формы и выберите форму, которую хотите отредактировать.Это откроет интерфейс, похожий на настройщик.

Откройте вкладку Электронная почта .

Вкладка электронной почты Happyforms

Здесь вы можете настроить адреса с по и с для уведомлений и подтверждений, чтобы убедиться, что вы не отправляете поддельные электронные письма.

После внесения изменений нажмите кнопку Обновить вверху и протестируйте форму.

Исправить weForms, не отправляющие электронные письма

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

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

Исправить контактную форму Jetpack, не отправляющую электронные письма

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

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

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

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

Контактная форма Jetpack

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

Исправить грозные формы, не отправляющие электронные письма

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

Но что, если вы уже сделали это, но все еще не работает? Что ж, опять же, это вероятно потому, что ваши электронные письма помечаются как «поддельные», потому что они отправляются с адреса, который не является настоящим адресом отправителя.

В админке WordPress перейдите в Formidable> Forms и выберите форму, которую хотите отредактировать. Щелкните вкладку Настройки вверху, а затем вкладку Действия и уведомления сбоку. Отсюда откройте мета-поле Уведомление по электронной почте .

Настройки уведомлений по электронной почте для сложных форм

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

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

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

Если ваши электронные письма не отправляются через WordPress, эти распространенные проблемы могут быть причиной проблемы … 👀Нажмите, чтобы написать в Твиттере

Сводка

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

Следуйте приведенному выше руководству, чтобы определить причину, по которой ваш сайт WordPress не отправляет электронные письма, и устранить проблему.Скоро у вас должна получиться правильная электронная почта!

Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress. Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на масштабируемость, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими тарифами

Создание контактной формы по электронной почте

по kirupa | 11 ноября 2011 г.

Есть вопросы? Обсудите это руководство по HTML с другими на форумах.

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

[ вперед, продолжать —

попробуйте! ]

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

Анатомия этой контактной формы

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

Следующая диаграмма должна помочь подготовить почву:

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

Вот и все, но давайте немного углубимся.Форма содержит различные элементы пользовательского интерфейса, которые вы используете для захвата
и представить
data — текстовые поля, текстовое поле и кнопка отправки:

Когда вы нажимаете кнопку отправки, ваши данные передаются в скрипт PHP, который
живет на своей странице:

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

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

Начало работы

Для этого руководства вам потребуется веб-сервер, способный запускать
PHP. Если у вас нет такого сервера, дайте

сделайте выстрел. Они спонсируют хостинг для этого сайта, и они
потрясающие!

На вашем веб-сервере вам нужно будет создать два файла HTML и один
Файл PHP:

контактная форма.htm
confirm.htm
mailer.php

Убедитесь, что все эти файлы находятся в одном каталоге в Интернете.
сервер:

После создания этих файлов вы заполните их
контент, который я предоставлю.

Чтобы получить максимальную отдачу от этого урока, я предлагаю вам знать некоторые
основные приемы HTML и CSS, такие как определение содержимого и его стили.
В

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

Я уже упоминал, что в этом примере несколько раз используется PHP, чтобы
отправить электронное письмо. Вам не нужны знания PHP, чтобы сделать все
эта работа. Я предоставлю код, укажите куда указывать почту
адрес, а затем дайте базовое объяснение того, почему код работает
так оно и есть.

Хорошо, вперед!

Создание контактной формы

Откройте contactform.htm и добавьте следующие HTML и CSS в свой
документ:

 

 

  О чем вы думаете? 


 
<стиль>
input, textarea {
отступ: 5 пикселей;
маржа: 10 пикселей;
семейство шрифтов: Cambria, Cochin, serif;
размер шрифта: средний;
font-weight: жирный;
наброски: нет;
}
п {
семейство шрифтов: Cambria, Cochin, serif;
размер шрифта: большой;
нижнее поле: -5 пикселей;
}
input [type = text], textarea {
ширина: 350 пикселей;
цвет фона: #DDEDFF;
граница: 1px solid # 97C9FF;
}
input [type = submit] {
ширина: 100 пикселей;
цвет фона: # 669900;
граница: 1px solid # 336600;
размер шрифта: большой;
цвет: #FFFFFF;
}
input [type = submit]: hover {
цвет фона: # 78B300;
курсор: указатель;
}
input [type = submit]: active {
цвет фона: # 4A6F00;
}
 
h2 {
семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
размер шрифта: 2.1em;
цвет: # 3399FF;
}
тело {
отступ: 10 пикселей;
цвет фона: # F4F4F4;
}

 

 

 О чем вы думаете? 


 Имя 
 
 

 Электронная почта (необязательно) 





 Комментарий

Не волнуйтесь, если вы не знаете, что на самом деле весь приведенный выше код
делает.Содержимое проанализируем позже. А пока просто скопируйте / вставьте все
это как содержимое contactform.htm и сохраните документ.

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

Пока не нажимайте кнопку «Отправить». Если вы нажмете кнопку «Отправить», вы обнаружите, что на самом деле ничего не
бывает. Мы исправим это в ближайшее время … если быть точным!

Добавление кода PHP

Следующее, что мы сделаем, это добавим PHP-код, необходимый для создания нашей формы.
на самом деле работают.Откройте mailer.php и добавьте следующий код:


if (isset ($ _ POST [‘submit’])) {
} еще {
}
?>

Прежде чем сохранить этот файл и закрыть его, замените [email protected]
с адресом электронной почты, на который вы хотите получать обратную связь:

$ в = «[электронная почта защищена]»;

Это очень важно.Если вы этого не сделаете, оставьте свой отзыв
посетители просто никогда не дойдут до вас!

Вы почти закончили.

Страница подтверждения

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





<мета charset = "utf-8">
Отлично<br /> Успех!
<мета content = "php, контакт, форма, мышление "name =" keywords ">
<мета content = "Отлично успех! "name =" description ">

<стиль>
п {
}

h2 {
}
кузов {
}





& nbsp;
Спасибо Вы!
У нас получил ваш обратная связь и мы будем вернуться тебе скоро.

Сохраните этот файл и просмотрите его в своем браузере. Вы увидите что-то
что выглядит следующим образом:

На этом вы закончили добавление контента в HTML и PHP.
страниц.

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

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

Письмо выглядит некрасиво, но в нем есть отзыв,
Заполнил и отправил!

За кадром

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

Глядя на саму форму

Наша контактная форма (контактная форма.htm) состоит только из стандартных
Теги HTML и CSS. Я собираюсь отложить стили вещей,
но вместо этого давайте посмотрим на элементы формы и на то, что они содержат,
помогает вашему PHP-скрипту знать, что отправлять по электронной почте.

Элементы формы содержатся внутри
тег формы:

<форма действие = "mailer.php" method = "POST">

Имя
<ввод name = "имя" type = "текст">