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

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
14.05.2013
Имя:
Телефон:
Сообщение:

ноль плюс три равно
Ответ:

Здравствуйте уважаемые читатели Site on! Данный урок станет основоположником небольшого ответвления в разделе PHP. Здесь мы будем рассматривать решения реальных практических задач (так называемые кейсы), которые могут встретиться вам на пути к созданию ваших собственных веб-проектов. Другими словами в статьях данной подкатегории вы сможете найти готовые решения и наработки, которые сразу же можно внедрять в разрабатываемые вами сайты, в том числе и в ваши CMS!

callback для сайта

Задание:

Сделать форму обратной связиcallback (обратный звонок), которая будет отправлять сообщение владельцу магазина по электронной почте. Форма должна иметь приятный интерфейс, быть «лёгкой», безопасной и быстро редактируемой под любые нужны. Также необходимо встроить данную форму в шаблон Joomla 2.5 + VirtueMart 2.

P.S. Форма будет работать на любом движке, не только в Joomla, так как сделана на чистом PHP.

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

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

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

Начинать нужно с HTML, мы должны создать саму «форму» для формы обратной связи, это делается с помощью тега

<form></form>

Внутри которого указываются поля, заполняемые пользователями, и кнопка «отправить»:

<form method="post" action="<?php echo $_SERVER['REQUEST_URI'] ?>">
    Имя: <input required="required" maxlength="30" type="text" name="name" />
    Телефон: <input required="required" maxlength="30" type="text" name="phone" />
    Сообщение: <br /><textarea rows="7" cols="50" required="required" name="message">Пожалуйста, перезвоните на указанный номер.</textarea>
    <input type="hidden" name="check" value="fd13vv" />
    <br /><input type="submit" value="Отправить!" />
</form>

Разберём каждую строчку более детально! Начнём с первой:

<form method="post" action="<?php echo $_SERVER['REQUEST_URI'] ?>">

Здесь мы открываем тег нашей формы и перечисляем необходимые атрибуты тега. Их у нас ровно 2 – это атрибуты method и action.

Значение атрибута method указывает, каким методом будет послан запрос серверу (GET или POST). Нам нужен именно POST, для тех, кто не знает разницы, будет написана отдельная статья про методы в PHP, следите за обновлениями!

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

Далее идут поля, которые будут заполнять наши посетители – это два поля input и одна textarea. Посмотрим из чего у нас состоят наши инпуты:

<input required="required" maxlength="30" type="text" name="name" />

Первым идёт атрибут required, который, по-моему, считается невалидным внутри тега input, но зацикливаться на валидности глупо, поэтому ничего страшного. Этот атрибут говорит о том, что данное поле обязательно для заполнения, посетитель не сможет отправить свой вопрос, пока не заполнит данное поле. Если поле необязательно, просто не пишете этот атрибут вовсе.

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

И последний атрибут – name, самый главный и обязательный атрибут. В нём мы записываем имя данного тега. Зачем оно нужно поговорим чуть позже.

Тег textarea служит нам для того, чтобы пользователь мог написать своё сообщение. В отличие от input, здесь пользователь может делать перенос текста на новую строку:

<textarea rows="7" cols="50" required="required" name="message">Пожалуйста, перезвоните на указанный номер.</textarea>

В теге textarea атрибуты rows и cols обозначают размеры нашего поля в строчках (по вертикали) и количестве символов (по горизонтали). Вот такие вот странные и некроссбраузерные единицы измерения :)

Следующим в нашем списке идёт необязательный скрытый input:

<input type="hidden" name="check" value="fd13vv" />

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

И конечно же, кнопка отправить:

<input type="submit" value="Отправить!" />

Итак, на данном этапе наша форма имеет следующий вид:

форма обратной связи

Callback на PHP

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

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

if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['message'])){
    // ...
}

Обратите внимание: здесь мы и используем наш атрибут name и его значения!

Далее логичным шагом будет отфильтровать полученные данные и хотя бы минимально обезопасить себя, а именно вычистим всё от HTML тегов и удалим лишние пробелы:

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

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

mail('email@mail.ru', 'Callback', 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его сообщение: '.$mess,"Content-type:text/html;charset=utf-8");

Для этого мы использовали встроенную функцию PHP – mail(), первое значение обозначает адрес получателя, второе – тему письма, третье – текст письма и четвёртое (необязательное) – кодировку письма. Как видите, при построении текста письма я использовал переменные и конкатенацию.

После отправки письма необходимо перезагрузить страницу:

header("Location: ${_SERVER['REQUEST_URI']}");
die;

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

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

setcookie('mail', 'sendmail');

В итоге наш PHP скрипт для обработки формы обратной связи выглядит следующим образом:

<?php
if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['message'])){
    $name = trim(strip_tags($_POST['name']));
    $phone = trim(strip_tags($_POST['phone']));
    $message = trim(strip_tags($_POST['message']));
    setcookie('mail', 'sendmail');
    mail('email@mail.ru', 'Callback', 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его сообщение: '.$message,"Content-type:text/html;charset=utf-8");
    header("Location: ${_SERVER['REQUEST_URI']}");
    die;
}
?>

Обратный звонок для Joomla

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

Заходим в главный файл нашего шаблона на Joomla – /templates/шаблон/index.php и как можно ближе к верху, например, сразу после строчки:

defined('_JEXEC') or die;

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

if($_POST['check']=='fd13vv'){
    include 'callback.php';
}

Здесь мы проверяем, пришло ли методом POST наше специальное значение из скрытого input, если пришло, значит можем подключать наш файл callback.php, который проверит и отфильтрует всё остальное.

Заметка:

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

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

Естественно, закачиваем наш файл callback.php в эту же папку (в корень папки с шаблоном).

Далее сразу после предыдущих строк делаем проверку на куки, которые мы посылаем только после успешной отправки письма:

if(isset($_COOKIE['mail'])){
    $thanks = '<p align="center" style="color:green;font-size:26px">Спасибо за Ваше обращение!</p>';
    setcookie('mail', "", time() - 3600);
}

Если проверка выдала TRUE, то заносим в переменную текст благодарности и удаляем куку. Затем там, где вы хотите вывести текст благодарности пишете:

<?php
if(!empty($thanks)){
    echo $thanks;
}
?>

Оформление feedback form

Осталось лишь красиво преподнести нашу форму. Я не буду растягивать статью объяснениями как работает CSS и JS, а просто выложу вам готовый код.

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

<div onclick="openn(this)" id="callback"></div><div id="body-form">
<form method="post" action="<?php echo $_SERVER['REQUEST_URI'] ?>">
    Имя: <input required="required" maxlength="30" type="text" name="name" />
    Телефон: <input required="required" maxlength="30" type="text" name="phone" />
    Сообщение: <br /><textarea rows="7" cols="50" required="required" name="message">Пожалуйста, перезвоните на указанный номер.</textarea>
    <input type="hidden" name="check" value="fd13vv" />
    <br /><input type="submit" value="Отправить!" />
</form>
</div>

Не ругайтесь на то, что я повесил обработку яваскрипта прямо в атрибут тега, это уже совсем другая история :)

Записываем CSS в ваш основной файл стилей (обычно это что-то типа: general.css, template.css, style.css) и не забываем изменить во второй строчке путь до картинки:

#body-form{position:fixed;width:456px;min-height:180px;top:38%;left:-486px;font-size:18px;box-shadow:0 0 15px 0 #000;-moz-box-shadow:0 0 15px 0 #000;-webkit-box-shadow:0 0 15px 0 #000;border-radius:0 7px 7px 0;-khtml-border-radius:0 7px 7px 0;-moz-border-radius:0 7px 7px 0;-webkit-border-radius:0 7px 7px 0;transition:margin-left 0.8s linear;-moz-transition:margin-left 0.8s linear;-webkit-transition:margin-left 0.8s linear;-o-transition:margin-left 0.8s linear;padding:10px;font-style:italic;background:#f5f5f5;z-index:9998;}
#callback{position:fixed;min-width:80px;min-height:200px;cursor:pointer;z-index:9999;top:38%;left:-15px;margin-right:-5px;background:url("/images/articles/php/callback.png") no-repeat;transition:margin-left 0.8s linear;-moz-transition:margin-left 0.8s linear;-webkit-transition:margin-left 0.8s linear;-o-transition:margin-left 0.8s linear;}
.leftOpened{margin-left:486px;} /* если ваша форма будет слева */
.rightOpened{margin-right:486px;} /* если ваша форма будет справа */

JS можно разместить в любом месте на странице или вынести в отдельный файл:

function addClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)return;if(el.className=="")el.className=cls;else el.className+=" "+cls}function hasClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)return true}function removeClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)c.splice(i,1);el.className=c.join(" ")}
function openn(obj){var next=obj.nextSibling;var style=window.getComputedStyle?getComputedStyle(obj,""):obj.currentStyle;if(parseInt(style.left)<0)var open="leftOpened";else var open="rightOpened";if(hasClass(obj,open)){removeClass(obj,open);removeClass(next,open)}else{addClass(obj,open);addClass(next,open)}};

PHP:

<?php
defined('_JEXEC') or die; // добавили защиту Joomla

if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['message'])){
    $name = trim(strip_tags($_POST['name']));
    $phone = trim(strip_tags($_POST['phone']));
    $message = trim(strip_tags($_POST['message']));
    setcookie('mail', 'sendmail');
    mail('email@mail.ru', 'Callback', 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его сообщение: '.$message,"Content-type:text/html;charset=utf-8");
    header("Location: ${_SERVER['REQUEST_URI']}");
    die;
}
?>

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

Скачать картинку «обратная связь» вы можете сохранив данный рисунок:

обратный звонок

Заметки:

Вы можете изменить положение формы обратной связи, чтобы она была справа, а не слева. Для этого вам нужно отредактировать пару значений в CSS, а также повернуть саму картинку. При этом вам НЕ нужно изменять JS, HTML и PHP.

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

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

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 4.73 из 5 (проголосовало: 71)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:

25.10.2013 10:50:30 Денис:
Автор, ты пишешь "HTML код я разместил сразу после открывающегося тега body, но по большому счёту его можно вставить в любое место на странице:..."

Скажи, пожалуйста, в какой именно файл HTML в Joomla 2.5 нужно вставить этот код?

Я зашел в файл index.html в файле с шаблоном, но он пуст. Вот такие дела. Что делать?
25.10.2013 12:21:14 Сергей отвечает:
Учиться, учиться и ещё раз учиться и перечитывать весь блог начиная с самых первых статей. Это то, что Вам нужно делать в первую очередь. И быть внимательным при прочтении!

Джумла написана на PHP, в ней не нужно редактировать .html файлы. Ищите index.php, либо делайте поиск по слову body во всём каталоге с шаблоном.
25.10.2013 16:16:23 Александр отвечает:
Автор, подскажите пожалуйста

if(isset($_COOKIE['mail'])){
$thanks = '<p align="center" style="color:green;font-size:26px">Спасибо за Ваше обращение!</p>;'
setcookie('mail', "", time() - 3600);
}

вставляю это в index.php и джумла пишет синтаксическую ошибку, в чём может быть проблема? так вроде скрипт работает, окно выплывает с полями....и почему у вас всего один вопрос "ноль плюс три равно"..... и как бы себе такое сделать? Заранее спасибо
25.10.2013 17:09:51 Сергей отвечает:
1) Мне нужно знать текст ошибки.
2) Вопрос один, потому что форма тестовая, мне с неё письма не приходят, поэтому спама не боюсь.
3) Как сделать такой скрипт анти-спама читайте здесь.
26.10.2013 05:11:51 Александр отвечает:
Parse error: syntax error, unexpected T_STRING in \www\templates\rsmetro\index.php on line 12

10 if(isset($_COOKIE['mail'])){
11 $thanks = '<p align="center" style="color:green;font-
12 size:26px">Спасибо за Ваше обращение!</p>;'
13 setcookie('mail', "", time() - 3600);}


в кавычки может надо что-то вписать? сори за глупые вопросы, просто новичек в этом деле...
26.10.2013 10:37:49 Сергей отвечает:
Теперь всё ясно, точка с запятой не там стоит, самое интересное, что себе сделал нормально, а в статью с ошибкой скопировал :) Исправил статью, вот как надо:
if(isset($_COOKIE['mail'])){
  $thanks = '<p align="center" style="color:green;font-size:26px">Спасибо за Ваше обращение!</p>';
  setcookie('mail', "", time() - 3600);
}
26.10.2013 13:04:13 Александр отвечает:
Спасибо, всё вроде работает, а как бы текст благодарности на отдельную страницу вывести?
28.10.2013 00:35:07 Андрей отвечает:
Огромное спасибо за статью, подскажите, у меня не выезжает форма. Все сделал по уроку( Joomla 2.5. Все файлы подключены, где ковырять мне?
16.11.2013 21:27:06 Gera отвечает:
))) про модуль - это здорово - напиши сам)
11.11.2013 16:07:54 Николай отвечает:
Не совсем понял где и как сделать данную проверку, буду читать статью с 0 как говорится очень приглянулась форма, а как бы ее так модулем сделать?
28.10.2013 14:44:40 Сергей отвечает:
К сожалению, не могу подсказать. У человека выше всё получилось, значит проблема не в статье. Попробуйте ещё раз внимательно почитать статью и сделать всё сначала, иногда срабатывает.

Ответить на комментарий


20.11.2013 15:09:15 Нейтро:
У меня тоже были проблемы с выдвиганием - скорее всего в css проблемы. Скопировал код из статьи - стало выдвигаться. Может кому поможет
22.05.2014 20:56:35 Сергей отвечает:
Это само собой разумеется. Я CSS не просто так выложил :)

Ответить на комментарий


04.12.2013 23:26:02 Александр:
не могу поставить нормально:(
вот страничка: http://faneralipetsk.ru/
подскажите что не так, ход действий:
1) вставил хтмл код в index.php сразу после боди
2) создал файл callback.php и вставил в него код php
3) в стили добавил все что написано выше из CSS
4) этот код:
if($_POST['check']=='fd13vv'){
  include 'callback.php';
}

вставил так же в index.php

Вопросы:

куда вставлять эти коды, в какие места, странички?
1)
if(isset($_COOKIE['mail'])){
  $thanks = '<p align="center" style="color:green;font-size:26px">Спасибо за Ваше обращение!</p>';
  setcookie('mail', "", time() - 3600);
}

2)
<?php
if(!empty($thanks)){
  echo $thanks;
}
?>

3)

function addClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)return;if(el.className=="")el.className=cls;else el.className+=" "+cls}function hasClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)return true}function removeClass(el,cls){for(var c=el.className.split(" "),i=c.length-1;i>=0;i--)if(c[i]==cls)c.splice(i,1);el.className=c.join(" ")}
function openn(obj){var next=obj.nextSibling;var style=window.getComputedStyle?getComputedStyle(obj,""):obj.currentStyle;if(parseInt(style.left)<0)var open="leftOpened";else var open="rightOpened";if(hasClass(obj,open)){removeClass(obj,open);removeClass(next,open)}else{addClass(obj,open);addClass(next,open)}};


Я практически не шарю в программирование, подскажите, буду признателен)
04.12.2013 23:55:15 Александр отвечает:
с кодом №3 разобрался, надо было просто его обнести <script></script>, вставил выше body, и все стало выезжать, но вот при отправке белый экран, куда вставить коды №1 и №2, я так и не понял, и надо ли что прописывать где? пути и тд
05.12.2013 09:18:02 Сергей отвечает:
Здравствуйте, в статье написаны ответы на все Ваши вопросы.
1) код 1 вставлять сразу после if($_POST['check']=='fd13vv'){
include 'callback.php';
}

2) Цитата: "там, где вы хотите вывести текст благодарности"

callback.php должен быть в той же папке, что и index.php, если у вас так, то никакие пути прописывать не надо, только в CSS.

"при отправке белый экран" - включите вывод ошибок PHP и посмотрите, что пишет.
06.12.2013 08:09:41 Александр отвечает:
Как это сделать)? вывести код ошибок PHP
06.12.2013 08:50:16 Александр отвечает:
mail('email@mail.ru', 'Callback', 'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его сообщение: '.$mess,"Content-type:text/html;charset=utf-8");
а в этом коде вместо email@mail.ru нужно указать свой майл?
06.12.2013 09:11:20 Сергей отвечает:
1) Ошибки включаются либо в панели хостинга, либо можете попробовать первой строчкой index.php добавить PHP код:
error_reporting(E_ALL);
Одно другому не мешает.

2) да, ввести свой Email.
06.12.2013 09:57:49 Александр отвечает:
ошибок пишет что нет, майл указал, если путь к callback.php в изменить, левый поставить, то при отправке страничка хотя бы обновляется, а так просто все пустое, получается проблема в callback.php? ну там вроде все как в теме указал. Ну подскажите уже, второй день с ним ковыряю уже))
06.12.2013 16:32:17 Сергей отвечает:
Удалите строку
header("Location: ${_SERVER['REQUEST_URI']}");
И ещё раз проверьте на ошибки. Должны быть. И если они появятся, то скорее всего нужно будет просто удалить пробелы (где они есть) из начала строк в callback.php

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

Напишите, чем всё закончилось :)
06.12.2013 18:50:38 Александр отвечает:
Видно я тупень, не получается не хрена)
06.12.2013 20:35:13 Сергей отвечает:
Советую всё удалить, прочитать внимательно статью (ещё раз) и попробовать всё с самого начала. Я с момента написания данной статьи уже множество раз использовал этот же код.
17.12.2013 12:18:30 Борис отвечает:
Подскажите что за ошибка при отправки "Parse error: syntax error, unexpected T_VARIABLE in X:\home\localhost\www\angl\callback.php on line 3"
17.12.2013 15:58:13 Сергей отвечает:
Добрый день. Не видя кода, подсказать не могу. Раньше были проблемы с пробелами в начале строк в callback.php, но уже их быть не должно.

Однако не видя кода, всё что я могу посоветовать - это попробуйте удалить пробелы из начала каждой строки в callback.php, если они у вас есть.
22.12.2013 16:35:56 Мавлид отвечает:
Та же история, как у Александра. Когда добавляю код HTML в раздел body (в самом начале) - появляется прямо на верху сайта форма обратной связи. Но как только добавляю >>if($_POST['check']=='fd13vv'){
>> include 'callback.php';
>>}
сразу белый экран.
Callback.php на месте, в корне рядом с index.php. Как можно выяснить в чем дело?
22.12.2013 23:21:15 Сергей отвечает:
Добрый вечер.
1) Форма наверху сайта из-за того, что вы, видимо, забыли скопировать CSS.
2) Как я и говорил Александру, проблема оказалась из-за пробелов в начале строки. JavaScript плагин подсветки кода на место обычного пробела ставил неразрывной, что приводило к ошибке. Теперь всё должно работать, я поудалял пробелы сам. Теперь придётся в каждой статье так делать, плохой плагин попался :(

Кстати, ещё белый экран после отправки сообщения может быть, если у вас не Joomla, но вы скопировали эту строку:
defined('_JEXEC') or die; // добавили защиту Joomla
23.12.2013 16:55:05 Мавлид отвечает:
Сергей, спасибо за статью и ответы.
Вчера почти сразу разобрался и написал, странно что второй пост не сохранился.
Дело действительно было в пробелах.
А почему css не подхватывалась я так и не понял, разобрал по строкам (красоту навел) - и заработало.
Кстати, еще не сработала строка
>> var next=obj.nextSibling;
Почему-то на какой-то объект text ссылку выкидывал.
Поменял на nextElementSibling - сработало.

Ответить на комментарий


21.12.2013 21:37:57 Yarl:
Здравствуйте. Пытаюсь поставить Ваш код на лендинг, форму подключил, но она не отправляет сообщения. Пробовал вставлять php код в отдельный php файл и подключать его include`ом, вставлять весь в html файл-ничего е работает. подскажите, пожулуйста, что я делаю не так
21.12.2013 22:35:39 Сергей отвечает:
Добрый вечер. Не могу так сказать - мало данных. В html файл..? Может в этом проблема? Хоть инклуд, хоть нет - файл должен иметь расширение .php
За исключением случаев, когда вы специально перенастроили сервер для отыгрыша PHP кода в HTML файлах.

Ответить на комментарий


28.01.2014 23:44:08 Иван:
А вот совсем чайнику объяснить можете?
Последнее что понял и сделал это добавил в /templates/шаблон/index.php строчки про включение колбэка.
Дальше дремучий лес. Куда вставлять "Далее сразу после предыдущих строк делаем проверку на куки, которые мы посылаем только после успешной отправки письма"
и что делать со следующими 4-мя кусками кода пункты ниже "Оформление feedback form"???
как я уже говорил совсем чайник.
31.01.2014 01:07:12 Виктор отвечает:
А как вставлять в обычный не Джоомла сайт?
31.01.2014 09:28:51 Сергей отвечает:
По аналогии, отличий никаких.
31.01.2014 18:04:23 Иван отвечает:
смысл отвечать на мой коммент сторонним сообщением????
а уж тем более отвечать в ветке моего комента на сторонние вопросы вместо ответа на мой???!!
31.01.2014 18:09:54 Виктор отвечает:
Иван, извини, я не хотел тебя обидеть!!! Сергей, я не знаю куда вставлять:
if($_POST['check']=='fd13vv'){
include 'callback.php'; ?????

у меня нет файла index.php
01.02.2014 13:20:22 Сергей отвечает:
Не могу подсказать ничего конкретного, я же и приблизительно не представляю структуру и код Вашего сайта :)
Могу только сказать, что этот блог тоже не на Джумле (я сам придумал структуру и написал код с нуля), но никаких существенных отличий при установке этой формы обратной связи нет.
Элементарных знаний PHP вполне хватит чтобы установить эту форму на абсолютно любой сайт, который написан на PHP.

Ответить на комментарий


06.02.2014 20:50:30 Наталья:
Спасибо наиогромнейшее!!!
Ваш ресурс очень качественный, вся информация полезная!!!
И очень помогает в работе!
06.02.2014 21:42:19 Сергей отвечает:
И Вам большое спасибо за отзыв :)

Ответить на комментарий


13.02.2014 18:25:05 Роман:
Спасибо! Все работает ссупер!
13.02.2014 23:55:59 Сергей отвечает:
Спасибо за комментарий. Рад, что всё работает. Совместными усилиями с читателями мы вылизали эту статью :)
14.02.2014 13:41:26 Андрей отвечает:
Супер))) и е надо покупать платные решения)) спасибо автору

Ответить на комментарий


24.02.2014 11:51:46 Виталий:
Добрый день. Прошу сообщить ваша замечательная форма будет работать в Joomla 3.2.2?
24.02.2014 15:53:32 Сергей отвечает:
Здравствуйте. Форма не привязана к CMS, она будет работать и на OpenCart, и на WordPress, и на любой Джумле.

Ответить на комментарий


25.02.2014 20:37:38 Наталья:
Подскажите пожалуйста, как сделать комментарии , как вот эти?
25.02.2014 21:13:30 Сергей отвечает:
Здравствуйте, всё зависит от того, на какой CMS Ваш сайт. Эти комментарии я делал специально под этот блог, так что подсказать не могу.

Если вы используете Joomla, то популярный и бесплатный компонент - Jcomments.
02.03.2014 13:14:00 Наталья отвечает:
Спасибо!

Ответить на комментарий


25.04.2014 09:22:48 Александр:
Делаю все так же как и у вас, но получаю слудущую ошибку:

Not Found

The requested URL /< was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

И в браузерной строке отображается http://название сайта/<?php%20echo%20$_SERVER[REQUEST_URI];%20?>

В чем проблема? Я делаю на joomla 2.5
25.04.2014 09:54:03 Сергей отвечает:
Странно, у Вас не обрабатывается PHP. Вы делали в файлах с разрешением .php?
17.07.2014 02:05:05 Юрий отвечает:
Аналогичная ситуация.
Делал в файлах с расширением .php
17.07.2014 17:46:44 Юрий отвечает:
Если сделать все как у Вас написано, то при нажатии "Отправить!" в адресной строке мы видим:
мойсайт.ru/<?php echo $_SERVER['REQUEST_URI'] ?>

Помогите разобраться, как исправить!!!

Если атрибут action="" оставить пустым, то письмо приходит на почту, правда отправитель указан такой: php-sender-мойсайт.ru@undeliver.mirohost.net
17.07.2014 20:25:33 Сергей отвечает:
Попробуйте вручную написать <?php echo $_SERVER['REQUEST_URI'] ?>, не копируя.
А вообще можете оставить пустым, это не влияет на поле отправитель.

Ответить на комментарий


03.07.2014 15:43:48 Татьяна:
Добрый день, Сергей.
Подскажите, пожалуйста, в чем может быть проблема: форму подключила, но сообщения не отправляются. Никаких ошибок не выдает, просто форма сворачивается.
03.07.2014 19:07:14 Сергей отвечает:
Добрый день. К сожалению, мало информации, чтобы я мог ответить. Нужно смотреть.
03.07.2014 22:43:33 Татьяна отвечает:
Сайт http://excelitas.ru
04.07.2014 13:52:09 Татьяна отвечает:
Сергей, какие данные необходимы, чтобы можно было что-то сказать?
04.07.2014 14:08:22 Сергей отвечает:
На первый взгляд не нашёл в чём причина, нужен доступ к ФТП. Вышлите его на мою почту.
25.07.2014 04:54:52 Максим отвечает:
Здравствуйте, та же проблема.
• Письма не доходят.
• Вскакивала ошибка "Not Found The requested URL /< was not found on this server.", я оставил action="" пустым, ошибка перестала выскакивать.

Адрес сайта: http://440270.funplane.web.hosting-test.net/

Ответить на комментарий


07.11.2014 01:46:46 Виталий:
Интересно, а где в форме "Обратной связи" кнопка "Отправить"?
08.11.2014 10:31:43 Сергей отвечает:
Пройдите защиту от спама и увидите.

Ответить на комментарий


17.11.2014 20:46:52 Никита:
Здравствуйте!
Сначала хочу поблагодарить Автора за столь подробную инструкцию и за Ваши труды! :)

Возник вопрос. Создал каталог товара (небольшой, буквально 3 товара на главной), под каждым товаром есть кнопка "заказать". Нажимаем на кнопку, появляется модальное окно с такими вот полями:
"Имя";
"Телефон";
"Количество" [Наименование товара]. В каждом модальном окне указано своё наименование.

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

То есть, человек нажал на "Заказать" Товар 1, в письме надо чтобы это отобразилось, что это первый товар.
Пример письма:
Имя: Сигизмунд
Телефон: 1234567
Количество товара: 10 [Товар 1].

Подскажите, пожалуйста, как это реализовать?
23.11.2014 14:02:59 Сергей отвечает:
Здравствуйте. В 2ух словах этого не рассказать. Используйте jQuery для таких целей, очень мощная и в то же время простая библиотека.

У меня изучение с нуля jQuery для решения подобных задач заняло буквально пару дней, естественно, нужно хотя бы небольшое понимание чистого JavaScript.
24.11.2014 18:36:59 Никита отвечает:
Вопрос не в вызове модального окна, его я реализовал через bootstrap. Вопрос в том, что товары использует одно и тоже окно, но надо, чтобы в письме указывалось какой именно товар клиент заказывает.
24.11.2014 22:11:50 Сергей отвечает:
Это делается через jQuery или javaScript, как я и писал выше. По клику на "Заказать" достаёте .closest() родительский элемент, в нём ищите название через .find(), помещете в скрытый инпут модального окна: <input type="hidden" name="product" value=""> и дальше при отправке форме получаете $_POST['product'].

Ответить на комментарий


30.04.2015 17:02:17 Хим:
Сделал всё, как описано. Спасибо за статью. Но сообщения не приходят (адрес получателя, естественно исправил). Подскажите, что может быть не так ещё.
P. S. Joomla! 3.x
01.05.2015 10:17:29 Сергей отвечает:
Всё что угодно. Нужно тестировать:
1) закомментируйте header("Location: ${_SERVER['REQUEST_URI']}"); в файле callback.php
2) поставьте die; в конце файла callback.php
3) включите полный вывод ошибок PHP
4) отправляйте почту и смотрите на ошибки.

Либо вместо пунктов 1-3 можно смотреть в логи сервера.
Если ошибок нет, значит либо вы не включили их отображение, либо PHP не заходит в if... тестируйте.
23.05.2015 18:51:08 Оля отвечает:
Сделала обычную форму с колбек.пхп, но она реально ничего не отправляет
06.07.2015 14:26:09 Олег отвечает:
Можно не париться больше созданием формы обратного звонка. Вот один самых выгодных скриптов обратного звонка для сайта — это goodbeep.com Вызов клиента обратного звонка происходит за 15 секунд, а стоимость разговора всего от 1,16 руб. минута. Но, можно и не платить, достаточно в графике работы убрать все галки, тогда виджет будет слать все телефоны на почту. У сервиса есть возможность настраивать дизайн и писать свой текст в форме.

Ответить на комментарий


25.05.2015 19:17:45 Александр:
Здравствуйте Сергей. Подскажите, а как сделать, чтобы форма выезжала сверху вниз, из-под ссылки в шапке? Понимаю, что тут надо Java править. Не подскажите с чего начать, я имею ввиду изучение JavaScript?
26.05.2015 17:16:52 Александр отвечает:
Кстате, Сергей. Когда переставляю форму на правую сторону, пропадает эффект выдвигания, почему бы это?
P.S. У Вас сайт на CMS сделан?
06.06.2015 14:44:25 Сергей отвечает:
1) Я начинал учить здесь: learn.javascript.ru, потом перешёл на jQuery, который учил по видеоурокам.
2) Нет, сайт сделан не на CMS, я написал его на чистом PHP. В планах польностью переписать его с нуля на фреймворке, думаю это будет Yii 2 или Laravel 5

Ответить на комментарий


26.09.2015 21:48:38 Богдан:
удаляя textarea и проверку на него, скрипт просто не выполняется никак вообще.

Ответить на комментарий


02.12.2015 16:44:36 Валерий:
Подскажите все сделал как написано, почитал комментарии и проверил что могло быть не так, но не работает, на почту ни чего не доходит
04.12.2015 22:26:03 Сергей отвечает:
1) смотрите логи ошибок сервера
2) проверьте папку спам.
3) проверьте что приходит в массив POST и доходит ли код до отправки почты.

Ответить на комментарий


20.12.2015 00:56:45 Алексей:
Спасибо за пост, Вы молодец, ну на опенкарте 2.0 у меня не вышло реализовать=(((

Ответить на комментарий


14.04.2016 17:49:24 Руслан:
А как разместить форму справа? Что нужно изменить?
15.04.2016 10:39:07 Руслан отвечает:
А еще бы сделать чтобы форма убиралась, когда кликаешь мимо нее
15.04.2016 19:34:38 Сергей отвечает:
В статье написано что нужно сделать, что разместить форму справа.

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

Ответить на комментарий


12.05.2016 15:19:36 jack:
Класс cls расшифруйте абревиатуру.
12.05.2016 19:33:49 Сергей отвечает:
class

Ответить на комментарий

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-