Форма обратной связи с отправкой на почту php: Делаем форму обратной связи на сайте

Содержание

Создаем форму обратной связи на 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 я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу <br>, <p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться <br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов 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");

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

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’<br />Его номер: ‘.$phone.’<br />Его почта: ‘.$mail.’<br />Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. 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.
  • Пользователю выводится это сообщение о ошибке.
  • Происходит выход из скрипта проверки.

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

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

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

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

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

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

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

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

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

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

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

    Шаг 1. Страница с формой

    Создаём в папке с темой новый файл — это будет шаблон страницы с формой. Файл можно назвать как угодно, нам важно лишь его содержимое.

    <?php
/* 
 * Template name: Форма обратной связи
 */
get_header(); // эта строчка кода у вас может отличаться
 
/*
 * Тут мы будем обрабатывать ошибки и выводить соответствующие сообщения
 */
if( isset( $_GET['msg'] ) ) {
	// в случае успеха
	if( $_GET['msg'] == 'success' )
		echo '<span>Сообщение успешно отправлено</span>';
 
	// в случае ошибки
	if( $_GET['msg'] == 'error' )
		echo '<span><strong>Ошибка:<strong> Проверьте правильность введённых вами данных. </span>';
	// вы сами можете добавить различные другие сообщения об ошибках
 
}
 
/* 
 * Антиспам-трюк
 * у нас есть два фейковых поля, при заполнении которых прерывается выполнение скрипта
 * сделаем так, чтобы они были скрыты для пользователей при помощи CSS
 */
echo '<style>textarea[name="comment"],textarea[name="message"]{display:none}</style>';
?>
	<form action="<?php echo site_url() ?>/send.php" method="POST">
		<input type="text" name="name" required="true" placeholder="Имя *" />
		<input type="text" name="email" required="true" placeholder="Email *" />
		<textarea name="comment"></textarea>
		<textarea name="message"></textarea>
		<textarea name="soobschenie" required="true" placeholder="Сообщение *"></textarea>
		<button>Отправить</button>
	</form>
<?php
get_footer();  // эта строчка кода у вас может отличаться

    Шаг 2. Файл-обработчик. Отправка формы

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

    <?php
// проверка на спам - просто прерываем выполнение кода, при желании можно и сообщение спамерам вывести
if( isset( $_POST['comment'] ) || isset( $_POST['message'] ) )
	exit;
 
// подключаем WP, можно конечно обойтись без этого, но зачем?
require( dirname(__FILE__) . '/wp-load.php');
 
// следующий шаг - проверка на обязательные поля, у нас это емайл, имя и сообщение
if( isset( $_POST['name'] )
  && isset( $_POST['email'] ) && is_email( $_POST['email'] ) // is_email() - встроенная функция WP для проверки корректности емайлов
  && isset( $_POST['soobschenie'] ) ) {
 
	$headers = array(
		"Content-type: text/html; charset=utf-8",
		"From: " . $_POST['name'] . " <" . $_POST['email'] . ">"
	);
 
	if( wp_mail( get_option('admin_email'), 'Сообщение с сайта', wpautop( $_POST['soobschenie'] ), $headers ) ) {
		header('Location:' . site_url('/contact?msg=success') );
		exit;
	}
 
 
}
 
header('Location:' .  site_url('/contact?msg=error') );
exit;

    Миша

    Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

    Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

    Добавление виджетов форм обратной связи и стилей форм в 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 в веб-браузере и проверьте, отображаются ли у вас все три флажка зеленого цвета. Если напротив некоторых элементов не отображаются флажки зеленого цвета, значит сервер хостинга настроен неверно и виджеты «Формы» не отправляют сообщения электронной почты на указанный адрес.

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

    Этап 3 — Создание Страниц > Объект-форма обратной связи


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

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




    Отправить данные по e-mail— это параметр по умолчанию. С помощью PHP-скрипта данные, получаемые из формы, автоматически отправляются по электронной почте.

    Отправить данные в базу данных— с помощью PHP-скрипта данные, отправляемые из формы, автоматически отправляются в заданную базу данных MySQL.

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

    Нужно задать несколько параметров для каждой возможности отправки:




    Отправить данные по e-mail—

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

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

    ▪Адрес электронной почты пользователя— можно указать адрес, на который должны отправляться собранные данные. Можно перечислить несколько адресов, отделяя их друг от друга точкой с запятой.
    ▪Объект— можно указать тему электронного письма, содержащего данные, введенные в форму электронного письма.
    ▪Сообщение— можно ввести текст электронного письма, содержащего данные, введенные в форму электронного письма.
    ▪Включить собранные данные в формате CSV— при включении этой опции, в конец электронного письма также будут вставляться собранные данные в формате CSV. Данные в формате CSV отображаются как длинный список элементов, разделенных точками с запятой. Такой файл легко импортировать в программу для работы с электронными таблицами (например, Microsoft Excel).

    Отправить данные в базу данных—

    ▪Имя базы данных— выберите базу данных из списка тех, что связаны с проектом. Можно использовать команды в окне Управление данными для создания списка баз данных, связанных с проектом.
    ▪Имя таблицы— введите название таблицы базы данных, куда должны вноситься введенные данные. Если такая таблица не существует, она будет автоматически создана.
    ▪Отправить письмо на электронную почту, чтобы уведомить о получении данных— по мере поступления новых данных будут автоматически отправляться уведомления по электронной почте.
    ▪Адрес электронной почты пользователя— Нужно задать несколько параметров для каждой возможности отправки:

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

    Отправить данные в виде файла—

    ▪Файл скрипта (например, PHP, ASP)— можно импортировать файлы скрипта для сбора и отправки данных, введенных в форму электронного письма. Файл скрипта создается вручную.

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

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

    По умолчанию адрес отправителя электронного письма подтверждения совпадает с электронным адресом администратора сайта, указанным в поле Адрес электронной почты пользователя в разделе Отправка данных. Введите разные Адрес электронной почты отправителя если хотите, чтобы подтверждающие письма отправлялись с другого адреса, чем используется для приема отправленных формами данных. Этот вариант можно использовать для общения с посетителями, использующими общий (info@moya_firma.com или noreply@moya_firma.com), а не персональный (imya.familiya@moya_firma.com) электронный адрес.

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

    Наконец, можете выбрать следующее Параметры:

    ▪Включить антиспам фильтр ‘Captcha’— внизу формы электронного письма можно добавить так называемую «капчу». Анти-спам фильтр CAPTCHA показывает в случайном порядке несколько искаженных букв; чтобы отправить данные через форму электронного письма, посетитель должен правильно ввести эти буквы в отведенное для этого поле.
    ▪Страница подтверждения после отправки данных— эта команда открывает карту сайта, где можно задать страницу, показываемую пользователю после отправки данных через форму электронного письма и пересылки собранных данных по электронной почте. Для этой цели лучше использовать специальную страницу с благодарственным сообщением, а не домашнюю страницу. Эта страница должна быть Скрытая страница в меню(см. Этап 2 — Создание карты сайта.

    Hyper SEO — блог о SEO

    Автор: ХайперСЕО

    2
    Июн

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

    Читать полностью »

    Автор: ХайперСЕО

    17
    Июл

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

    Читать полностью »

  • Оставить отзыв
  • Рубрика: SEO

    • Автор: ХайперСЕО

    12
    Май

    Сейчас многим бизнесам различных сфер предстоит следующая задача: обзвон клиентов и выяснение, кто из них ещё является клиентом, а кого кризис не пощадил. Можно предположить, что конечная клиентская база существенно уменьшится. Значит, следующая задача — привлечение новых клиентов для возврата к показателям оборота аналогичного периода предыдущего года. Рассмотрим интернет-возможности по привлечению клиентов.

    Читать полностью »

  • Оставить отзыв
  • Рубрика: Раскрутка

    • Автор: ХайперСЕО

    24
    Апр

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

    Читать полностью »

  • Оставить отзыв
  • Рубрика: SMM & SMO

    • Автор: ХайперСЕО

    7
    Апр

    Раскрутка аккаунта, группы или страницы в социальной сети полезна не только владельцам бизнеса, продающим услуги или товары, но и простым блогерам, несущим информацию и арт в массы. Бесплатная раскрутка Вконтакте поможет продвижению начинающего бизнеса, ещё не имеющего опыта и денег для социального продвижения, а особенно блогерам с некоммерческими целями. Но кому надо бесплатно что-то для нас делать? Разбираемся ниже (спойлер: деньги — не единственный конвертируемый ресурс).

    Читать полностью »

    Автор: ХайперСЕО

    6
    Апр

    Чем может быть полезна раскрутка аккаунта Twitter в 2020-м? Соцсеть Твиттер по-прежнему является мега-популярной, имеет сотни миллионов активных пользователей по всему миру, а также более полумиллиарда аккаунтов посещается хотя бы раз в месяц для общения и чтения подписок. В отличие от хайповых молодёжных сервисов, больше половины пользователей Твиттера — это взрослые и кредитоспособные люди в возрасте 35-65 лет, показ рекламы которым будет эффективен.

    Читать полностью »

  • Оставить отзыв
  • Рубрика: SMM & SMO

    • Автор: ХайперСЕО

    14
    Фев

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

    Читать полностью »

  • 1 отзыв
  • Рубрика: SEO

    • Автор: ХайперСЕО

    11
    Дек

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

    Да начнётся технический аудит сайта

    Читать полностью »

  • 6 комментариев
  • Рубрика: Web-кодинг

    • Автор: ХайперСЕО

    21
    Ноя

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

    Читать полностью »

  • 4 комментария
  • Рубрика: Web-кодинг

    • Автор: ХайперСЕО

    12
    Ноя

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

    Читать полностью »

  • Оставить отзыв
  • Рубрика: SEO

    • Автор: ХайперСЕО

    30
    Апр

    Началось с того, что клиент на администрировании сайта обратился с просьбой провести аудит выполнения SEO для него от одной маленькой местной компании. Скинул отчёты по SEO, доступы в метрику, аналитику, инструменты вебмастера. Не вдаваясь в детали, работы по SEO были действительно проведены и соответствовали скромному бюджету, хоть и не соответствовали ожиданиям. Поскольку выяснилось, что поискового трафика ждать ещё не скоро (если вообще ждать), встал вопрос привлечения клиентов из других источников, хотя бы разово, но дёшево, чтобы позитивно и с премиями закрыть год. Решили попробовать E-mail рассылку. Спойлер: клиент остался доволен результатом, и даже потом пару раз заказывал мне парсинг мэйлов и телефонов со специализированных ресурсов для более точного попадания рекламы. А я получил немного опыта и информации в новой для меня теме привлечения трафика на сайт.

    Читать полностью »

  • Оставить отзыв
  • Рубрика: Раскрутка

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

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

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

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

    После того, как вы получите клон сайта перед вами будет стоять задача настроить 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.

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

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

    Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов

    Обновлено 15 мая 2021

    1. Формы обратной связи для Joomla и WordPress
    2. Php скрипты форм обратной связи для сайта
    3. Конструкторы и генераторы форм обратной связи
    4. Контактная форма для Html сайтов (без Php)

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

    Понятно, что при использовании Joomla и WordPress вопрос обратной связи или заказа можно решить использованием различных расширений или плагинов, но есть способы, которые подойдут абсолютно для любого проекта, построенного как на чистом Html, так и использующего движок Cms (скрипты, cms, конструкторы и генераторы форм обратной связи).

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

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

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

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

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

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

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

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

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

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

    Теперь давайте поговорим за WordPress. Лично я пока еще не определился с этим и у меня на странице контактов красуется обычный E-mail, что в общем-то не очень здорово, ибо он уже давно попал в спам-базу, и если бы я не сумел привязать почту для домена через Google Apps к обычному ящику в Гмайле, то поток спама меня бы уже давно захлестнул с головой.

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

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

    Собственно, по поводу WordPress. Есть один очень популярный и очень мощный плагин, который зовется Contact Form 7. Популярность его просто зашкаливает, а это значит, что что-то в нем такое есть. Правда для реализации функции капчи вам придется поставить еще дополнительный плагин Really Simple CAPTCHA.

    Форму обратной связи можно будет вставить на любую страницу или в любой пост вашего блога на WordPress, а также в виджет. Фактически это своеобразный конструктор для WordPress, позволяющий обновлять информацию в форме без обновления страницы (на технологии ajax). Лично я испытывал этот плагин на KtoNaNovenkogo.ru примерно пару лет назад, и тогда он мне показался очень тяжелым и неуместно громоздким для реализации стоящих передо мною целей (обратная связь).

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

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

    Но существует еще несколько способов:

    1. Создание формы самостоятельно. Для этого нужно будет написать ее код и оформить внешний вид с помощью Css стилей, а еще написать на Php для нее обработчик (в принципе, знаний, полученных из видеокурса Попова по Php, будет достаточно) и затем добавить CAPTCHA, проверку правильность заполнения полей и что-то еще. Сразу скажу, что сделать это будет не просто.

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

      Три стратегии продвижения сайтовСкачать (150 Мб)
      Html для начинающихСкачать (340 Мб)
      Css для начинающихСкачать (700 Мб)
      Работа с сайтом в DreamweaverСкачать (140 Мб)
      Как получить домен и купить хостингСкачать (120 Мб)
      Как создать свой видеокурсСкачать (600 Мб)

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

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

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

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

    Php скрипты форм обратной связи для сайта

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

    Там и форма заказа для сайта:

    Он представляет из себя архив, содержащий в себе папку, которую нужно будет скопировать в корневую директорию своего сайт (или в любую другую). Далее на странице с контактами вы указываете ссылку с прописанным в ней путем до файла «index.php» из папки «sendmail». Для моего блога это было бы примерно так:_https://ktonanovenkogo.ru/sendmail/index.php (если бы я скопировал каталог со скриптом в корневую папку).

    Настройки осуществляются с помощью редактирования содержимого файла «config.php» из директории «sendmail»:

    В первой строчке вы указываете адрес почтового ящика, на который будут приходить письма, отправленные с помощью этой формы, а во второй строчке указываете желаемую кодировку текста (utf 8, windows 1251). В ряде последних строчек Php кода вы сможете поменять подписи к полям формы обратной связи или заказа. Вот и все.

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

    Существует довольно привлекательный скрипт под названием Super AJAX Contact Form (можно использовать его и для заказа), построенный на основе PHP и jQuery с использованием Ajax:

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

    Установка его на сайт ничем не отличается от описанной ранее и заключается в копировании папки со скриптом в корень, а на странице контактов останется только прописать ссылку до файла «index.php» (для моего блога:_https://ktonanovenkogo.ru/code/index.php).

    Настройки формы обратной связи производятся в файле «\code\assets\xml\config.php», где можно прописать как отдельный E-mail для различных тем, так и один для всех (смотрите об этом подробнее в видеоуроке).

    В Super AJAX Contact Form осуществляется проверка правильности заполнения всех полей и сразу же (без перезагрузки страницы — ajax во всей красе) выдаются подсказки над соответствующими полями, что сильно повышает юзабилити обратной связи:

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

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

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

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

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

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

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

    Конструкторы и генераторы форм обратной связи

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

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

    Добавленные поля можно менять местами простым перетаскиванием мыши, удалять и повторно редактировать:

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

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

    Есть одно «но» — с помощью этого онлайн конструктора вы получите только Html код, а вот Php обработчик данных вам придется использовать свой. О том, где взять обработчик, можете узнать из этого видеоурока.

    Обратная связь для Html сайтов (без Php)

    Есть онлайн сервисы, предоставляющие бесплатно свои собственные Php обработчики, которые будут расположены на их серверах. К такому типу относится конструктор на ip-whois:

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

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

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

    Есть еще один очень похожий по функционалу генератор форм обратной связи. Созданные с помощью него конструкции тоже можно будет размещать на хостингах без поддержки Php (достаточно указать адрес страницы и E-mail, на который будут отправляться сообщения). Рассказывать про него много я не буду, ибо он по своей сути очень похож на описанный чуть выше конструктор.

    Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. contactform.htm
    2. подтверждение.htm
    3. 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’]))
    {
    $ к =
    «[электронная почта защищена]»;
    $ тема =
    «Что вы думаете о подчинении!»;
    // данные, предоставленные посетителем
    $ name_field
    = filter_var ($ _ POST [‘имя’],
    FILTER_SANITIZE_STRING);
    $ email_field
    = filter_var ($ _ POST [‘электронная почта’],
    FILTER_VALIDATE_EMAIL);
    $ комментарий =
    filter_var ($ _ POST [‘комментарий’],
    FILTER_SANITIZE_STRING);
    // построение сообщения
    $ тело =
    «От: $ name_field \ n \ n Электронная почта:
    $ email_field \ n \ n Сообщение: \ n \ n $ comment «;
    //…и понеслось!
    почты ($ в,
    $ тема,
    $ body);
    // перенаправляем на подтверждение
    заголовок (‘Расположение:
    подтверждение.htm ‘);
    } еще
    {
    // как-нибудь обработать ошибку
    }
    ?>

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

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

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

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

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

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

    <мета charset = "utf-8">
    Отлично<br /> Успех!
    <мета content = "php, контакт, форма, мышление "name =" keywords ">
    <мета content = "Отлично успех! "name =" description ">
    <стиль>
    п {
    семейство шрифтов:
    Камбрия,
    Кочин, засечки;
    размер шрифта:
    большой;
    край-низ:
    -5px;
    }
    h2 {
    семейство шрифтов:
    «Требушет МС»,
    Arial, без засечек;
    размер шрифта:
    xx-большой;
    цвет:
    # 3399FF;
    }
    кузов {
    набивка:
    10px;
    цвет фона:
    # F4F4F4;
    }

    & nbsp;

    Спасибо
    Вы!

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

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

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

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

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

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

    За кадром

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

    Взгляд на саму форму

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

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

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

    Имя


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

    Комментарий