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

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

Валидация заполненных полей осуществляется средствами jQuery, плюс дополнительно можно добавить проверки на php

Так выглядит форма:

HTML код формы:

Немного о коде:
  • Мы вообще не используем тег <form>, чтобы меньше привлекать внимание спамботов.
  • По умолчанию галочка с соглашением включена, чтобы не смущать посетителя неактивной кнопкой отправки. Если нужно сделать наоборот, то с чекбокса нужно удалить checked="checked", а на кнопку отправки добавить disabled="disabled". Подробнее об этой галочке можно поглядеть тут. Если она и вовсе не нужна, просто удалите чекбокс и его лабел из кода.
  • Атрибут data-validate выводит текст ошибки, если поле не заполнено.
  • Если поле для ввода не обязательное, используется класс no-validate-input-at вместо validate-input-at. В PHP нужно убрать проверку этого поля.
  • Блок result-at нужен для вывода сообщений после обработки формы сервером.
  • Скрытое поле subject-at нужно чтобы обозначить форму, если она используется на разных страницах. Например, на главной странице это будет одно значение, а в услугах другое.

CSS код формы:

Немного о коде:
  • Если на сайте не используется шрифт FontAwesome, то у класса .alert-validate::after нужно заменить content: "\f129" на крестик content: "\2718" или другой символ. И соотв. удалить сам шрифт font-family: "FontAwesome"

JS код формы (jQuery):

Немного о коде:
  • /send.php - путь к файлу, который будет отправлять почту.
  • Если поле email-at используется только для почты, нужно раскомментировать строку, чтобы проверять его валидность.

PHP код формы (send.php):

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

Обратите внимание:

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

Смотрите также:

Адаптивная reCAPTCHA

Правильное отображение капчи reCAPTCHA на малых экранах и в узких блоках

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Евгений:

    форма интересная, работает в принципе.
    но у меня на одностраничнике не хочет очищаться после отправки, остается надпись что "Ваше сообщение отправлено!". Такая же проблема и если вставить форму в модульное окно, но там хоть крестик есть чтоб закрыть форму....
    также проблема с php, на 7+ работает, на 8 не хочет.

    Ответить
  • Екатерина:

    Сообщения не приходят

    Ответить
  • Иван:

    Добрый день, сообщения не приходят,что надо поменять в коде(HTML)?

    Ответить
    • Аноним:

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

      Ответить
  • Мужик:

    Как сделать, чтобы при начале ввода символов в поле (например, email), его границы (border) становились красного цвета, а при правильном написании (согласно условиям валидации), принимали зелёный цвет?

    И, по поводу цели для Яндекс Метрики, в строке

    yaCounterNNNNNNNNNNN.reachGoal('name');

    заменить NNNNNNNNNNN на номер счётчика?

    Ответить
    • Мужик:

      С целью метрики, вроде бы разобрался. Вдруг, кому поможет:
      В Яндекс Метрике выбираем
      «Тип условия» — JavaScritp-событие
      Идентификатор цели — «совпадает», и придумаваем произвольное значение на латинице
      Полученный код цели для сайта копируем и вставляем эту строку в файл JavaScript формы после строчек:

      $frm.find(".form-at").fadeOut(500);
      $frm.find(".input-at").val("");
      Ответить
  • Мужик:

    Здравия!
    Благодарю за форму!

    Может кто-то уже сталкивался с проблемой при использовании сетки bootstrap...
    Не получается вставить в одну строку и форму, и ещё содержимое одной колонки.
    Разделение:

    <div class="container">
       <div class="row">
          <div class="col-12 col-lg-6">
          HTML—код Формы обратной связи
          </div>
    
          <div class="col-12 col-lg-6">
          HTML—код Кастомного текста
          </div>
       </div>
    </div>
    

    Проблема в том, что колонки отображаются не в одной строке, а одна над другой. И, не важно, до каких размеров уменьшаются колонки (например, одна col-4, а другая col-8) — результат прежний.

    Ответить
    • Мужик:

      «Ложная тревога» — сам косяка упорол (лишний тег проглядел), и получил 4 часа мучений (х_Х)

      Ответить
  • Олег:

    Как реализовано??? (Без E-mail)

    Ответить
  • Олег:

    Проверка отправки комментария без E-mail

    Ответить
  • Сергей:

    Всё очень здорово, письмо отправляется, но не приходит. А если раскомментить проверку на запрещённые слова, то вообще не отправляет письмо, да и проверка не срабатывает. Жаль.

    Ответить
  • Александр:

    Александр, доброго времени суток! Подскажите пожалуйста в чем может быть проблема, я скопировал весь код для СТИЛИЗОВАННОЙ РАБОЧЕЙ ФОРМЫ ОБРАТНОЙ СВЯЗИ, и установил себе на сайт, также изменил поля получателя и отправителя. Поместил html код в форму модального окна и возникли такие проблемы: 1. После нажатия на кнопку "Отправить" модальное окно не закрывается. 2. Письмо с данными на почту не приходит. Подскажите в чем может быть проблема, в какую сторону копать?

    Ответить
    • Alexander:

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

      Ответить
  • Alexander:

    Ставьте вторую переменную, например:

    $to2 = "vasha@pochta.ru";    // Куда идет письмо

    И внизу где отправка:

    mail($to2, $subject, $message, $headers);
    Ответить
  • Андрей:

    Добрый день!
    Как изменить код что бы сообщения отправлялись на несколько почтовых ящиков?

    Ответить
  • Михаил:

    Александр, добрый день!

    Разобрался по мере сил с хотелками, остается только отшлифовать внешний вид...
    Есть в правом верхнем углу КРАСНЫЙ КРЕСТИК, который закрывает форму также, как и нажатие мыши вне формы.
    Проблемы были в корректности вивисекции при сращивании ежа и ужа, взял модальное окно, на которое тыкал пальцем клиент и срастил нечто из трех разных возможностей, зато работает! Клиент никак не хотел окно во весь экран с крестиком как вот в этой ветке - https://atuin.ru/blog/prostoe-modalnoe-okno-na-js/
    Но вот тот факт, что форма не может быть "очищена" или не автообновляема - по прежнему сильно огорчает
    Хотел выложить сборку тут - но нельзя прицепить файлы, можно только нудный и длинный код тестовой странички

    Ответить
    • Alexander:

      в этой форме нет крестиков, который ее закрывает!

      Ответить
      • Михаил:

        А я его вставил просто, по просьбе заказчика
        Получилось очень даже интересно

        Ответить
  • Михаил:

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

    У меня вот сейчас на конкретном сайте есть несколько точек притяжения - Обратный звонок - Нужна консультация - Заказ товара и т.п.

    Пробовал ставить вариант настраиваемой формы обратной связи, получается ерунда - день-два проработает с выбраными полями:
    - обратный звонок - ФИО +телефон
    - Консультация - ФИО+телефон+почта
    ну и т.д. - но на третий обязательно все слетит и вылезает целый список возможных полей, как страничка лендинга... умучаешься крутить
    Вероятность модернизировать эту форму, чтобы на каждый пункт вызов своего окошка получался - имеет место быть?! или все же придется ковырять и скрипт-отправитель и джаву?! а только изменением полей и заглавия уже не обойтись... т.т.т.

    Ответить
    • Alexander:

      Если формы в модальном окне, я делаю 1 окно с пустым заголовком и далее кнопки вида:

      <a class="tcircleline" data-h="Заказать обратный звонок" data-description="Заказ обратного звонка с шапки сайта" onclick="openwin(this);" data-fancybox="" data-src="#offerForm" href="javascript:;">Обратный звонок </a>

      где:
      data-h - заголовок модального окна
      data-description - сообщение, что идет в тему формы
      А самая функция openwin примерно такая:

      function openwin(el) {
      	$('#offerForm input[name=subject-at]').val(el.dataset.description);
      	$('.htitle').text(el.dataset.h);
      }
      Ответить
      • Михаил:

        Спасибо, это тоже интересно!
        Но я не совсем про это
        в моем вопросе суть такова - что на каждый интересующий блок - не только своя кнопка ОТПРАВИТЬ, но и сама форма тоже своя, например для ЗВОНКА требуется только ИМЯ+ТЕЛЕФОН+ВРЕМЯ(текстом для прямо сейчас или часами 14:00- т.е. свободный ввод)
        для КОНСУЛЬТАЦИИ же важнее именно то, что указано в комби-поле КОНТАКТ (кстати - мегаполезная вещь! когда там или почта или телефон, меньше хлама на экране и можно давать контакт по своему выбору) уже требуется ИМЯ+КОНТАКТ+СООБЩЕНИЕ о сути вопроса, чтобы уже знать о чем пойдет речь
        для ЗАКАЗА товара тоже, что и для ЗВОНКА, сообщение там не так важно, хотя можно указать количество

        Ответить
        • Alexander:

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

          Ответить
          • Михаил:

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

            Ответить
          • Михаил:

            Александр, еще вылезла новая "хотелка"

            // Функция закрытия модального окна нажатием на кнопку

            $(".modal__close").on("click", function() {

            $(".modal-overlay").removeClass("modal-overlay_visible");

            });

            как корректно вставить в скрипт? нахрапиком попробовал - красный крестик в углу появился, но сколько его не тискай - толку ноль!

            Ответить
  • Михаил:

    Добрый день!

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

    Отлично влетает в любое модальное окно и хорошо работает на практике...
    Но пару косячков все же нашел (явно не все самостоятельно справятся):

    1. $headers .= "From: $from\r\n"; - заменил на более понятную и человекообразную форму "From: My_name|My_company_name<my_site@my_domain.ru>\r\n"; , а то при получении в колонке АВТОР - стоит первая часть электронного адреса только

    2. <input type="hidden" name="subject-at" value="Тема формы"> - оно так и приходит, есть смысл поставить комментарий, что можно заменить на НОВАЯ ЗАЯВКА С САЙТА или НОВЫЙ ЗАКАЗ.....

    3. Также нет комментария, что сюда:
    $to = "vasha@pochta.ru"; // Куда идет письмо
    можно/нельзя ставить дополнительные адреса (некоторые заказчики делают разницу между "избыточностью" и "отказоустойчивостью" и почта идет в два адреса в итоге, общий и контрольный

    4. И совсем плохо - не рефрешится после удачной отправки. При последующем вызове - выходит со старыми, уже однажды введенными данными... может есть смысл добавить после отправки "отправить еще одно сообщение" или на автомате обновлять при удачной отправке по истечении 4-6 секунд?!

    Ответить
    • Alexander:

      не рефрешится после удачной отправки.

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

      $frm.find(".form-at").fadeOut(500);
      $frm.find(".input-at").val("");
      Ответить
      • Михаил:

        Александр!

        у нас же простая технология этого процесса ведь

        а) однократный вызов на странице - нажал, нас..писал, отправил = пошел на другую страницу
        б) многократный вызов на странице (когда это вывод товаров, а не контакты или что-то еще специфическое) - нажал, на...ал, отправил, увидел еще что-то нужное/интересное, снова нажал - а вылезает в данный момент на сайте или те же данные что уже послал, или Ваше сообщение успешно отправлено! - т.е. не обнуляется автоматом при новом вызове, приходится F5 или Ctrl+Shift+R, кому как больше нравится
        на странице от 8 до 12 товаров, кнопка везде одна и та же, разумеется в класс добавляю нужность, но неудобно, когда не очищается автоматом.. привычка просто :))

        Ответить
  • Александр:

    Добрый день!
    Почему-то сообщения не отправляются.
    сохранил файлы css, js и php как отдельные файлы. Прописал ссылки на них:

    Конечно же сохранил в корне сайта файл send.php Однако при нажатии Кнопки ОТПРАВИТЬ ничего тне происходит. Где может быть ьошибка?

    Ответить
    • Alexander:

      В консоле должна быть указана ошибка.

      Ответить
  • Сергей:

    Александр, я не понял...:)
    Вы можете "на пальцах" объяснить?
    Куда вот это на какую страницу - где сама форма или в style.css ?

    Точно также, как и стиль вы подключили, только внизу страницы

    И куда JS код самой формы?

    Спасибо

    С уважением
    Сергей

    Ответить
    • Alexander:

      Напишите в ТГ или ВК мне, в коментах такое не рассказать 🙂

      Ответить
  • Сергей:

    Здравствуйте Александр,
    Мне очень понравилась Ваша форма, но я настоящий "чайник" :))
    Я загрузил все файлы - но я не могу понять как прописать путь в js файлу - и
    как его назвать и куда его разместить
    Форма смотрится просто замечательно - но при нажатии ничего не происходит
    я так понимаю что это из-за js файла
    Помогите пожалуйста
    Я разместил на тестовой странице - https://www.pcuxolog.ru/1.html

    С уважением
    Сергей

    Ответить
    • Alexander:

      Точно также, как и стиль вы подключили, только внизу страницы

      <!-- jquery -->
      <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

      Или скачать его к себе и подключить оттуда

      <!-- форма -->
      <script>
      	// тут скрипт из темы, в котором указать также путь для send.php
      </script>
      Ответить
  • Дмитрий:

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

    И еще, если кому нужно. Что бы при обновлении страницы чекбокс не был активным (без галочки), в строке input нужно поставить autocomplete="off", а в строке с кнопкой написать autocomplete="off" disabled="disabled", тогда и чекбокс будет без галочки и кнопка не активна по умолчанию.

    Ответить
    • Alexander:

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

      for у label удалите и все.

      Ответить
      • Дмитрий:

        Не понял. Из этой строки?
        <label for="checkbox-at">
        Confirm and send
        </label>
        а что тогда вместо for поставить? Я не особо шарю.

        Спасибо.

        Ответить
        • Alexander:
          <label>
          Confirm and send
          </label>
          Ответить
          • Дмитрий:

            Спасибо. А то я сайт слепил сам с нуля, а так и остался чайником, почти. 🙂
            У меня еще такой вопрос?
            Я вставил в форму кнопку добавления файлов, но мне для нее нужно сделать: 1. Что бы можно было отправить только один файл, не больше. 2. Чтобы писалось его название возле кнопки. 3. Ограничить размер скажем в 1Мб. 4. Как защититься от спама? Вообще, и при отправке текстовых сообщений без файлов, но к файлам требование больше, так-как могут забить почтовый ящик и он не будет работать.

            Если не сложно, помогите это сделать.

            Ответить
            • Alexander:

              С файлами там не так все просто, проще даже использовать вообще другое решение и другой отправщик, например, PHPMailer

              Ответить
              • Дмитрий:

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

  • Владимир:

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

    <?php
        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
            $to = "vasha@pochta.ru";    // Куда идет письмо
            $from = "info@my-site.ru";    // От кого идет письмо
            $name = $_POST['name-at'];
            $email = $_POST['email-at'];
            $message = $_POST['message-at'];
            $subject =    $_POST['subject-at'];
            $return_arr = array();
            $return_arr["frm_check"] = '';
            // Еще раз проверим заполненные поля формы. 
            // Эту проверку можно удалить или удалить проверку на JS
            if($name=="" || $email=="" || $message=="" || $subject=="") {
                $return_arr["frm_check"] = 'error';
                $return_arr["msg"] = "Пожалуйста, заполните все поля!";            
            }     
            // Проверка на плохие слова. Если не мучают хулиганы, можно ее удалить.
            $badwords = array('предложение', 'купить', 'раскрутка'); 
            $banstring = ($message != str_ireplace($badwords,"XX",$message))? true: false; if ($banstring) { 
                $return_arr["frm_check"] = 'error';
                $return_arr["msg"] = "Есть запрещенные слова";    
           if ($return_arr["frm_check"] != 'error') {
    	// Тут отправка на почту, ее заменить на код ниже:
    	$token = "zzzzzzz";
    	$chat_id = "zzzzzzzz";		
    	$arr = array(
    	'Тема: ' => $subject,
    	'Имя: ' => $name,
    	'Контакт: ' => $email,
    	'Сообщение: ' => $message 
    	);
    	foreach($arr as $key => $value) {
    		$txt .= "<b>".$key."</b> ".$value."%0A";
    	};
    	$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
    												
    
    }
          
            }        
            echo json_encode($return_arr);
        }
    ?>
    
    Ответить
    • Владимир:

      Все, понял, что сам дурак) вске поправил)

      Ответить
    • Владимир:

      Все здорово получилось, но на php 8 форма не пропадает после нажатия, как можно поправить? Подскажите пожалуйста.

        // Отправка формы        
                  if (check == true) {
                      $.post("../send.php", $frm.find(".form-at select, .form-at input, .form-at textarea").serialize(),
                          function(data){
                              if(data.frm_check == 'error'){ 
                                  $frm.find(".result-at").html("<div class='error-at'>Ошибка: " + data.msg + "</div>");                    
                                  } else {
                                  $frm.find(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); 
                                  $frm.find(".form-at").fadeOut(500);
                                  $frm.find(".input-at").val("");            
                              }
                          }, "json");
                          return false;
                  }
              });
      
      Ответить
    • Alexander:

      на PHP8 сейчас нет возможности проверить

      Ответить
      • Владимир:

        Ну и нафиг его, у меня не CMS, на изи перевел PHP на другую версию)

        Ответить
  • Сергей:

    Отлично! Четко и понятно. А так хочется эту форму спрятать в модальное окно. Как это сделать, не подскажете? С фенсибокс, или без него.

    Ответить
    • Сергей:

      Разобрался. создал файл formOS.html, туда перенес всю html разметку формы. Потом импортировал этот файл с формой в модальное окно, описанное у вас же здесь
      https://atuin.ru/blog/modalnye-okna-na-css/#close, вставил её там (вариант с <details>) вместо блока <p></p> вот так:

      <div class="cmt">
      <p>Текст в модальном окне</p> // убрать и заменить на <!--@import "formOS.html"-->
      </div>
      Работает прекрасно, спасибо!

      Ответить
      • Сергей:

        И все же косяк есть. Если отправить сообщение, то форма сама не закрывается. Если ее закрыть, и снова открыть (что-то хочется добавить в новом сообщении), то появляется снова сообщение: "Ваша форма отправлена". И надо вручную перезагружать станицу, чтобы форма сбросилась в исходное положение.
        Потому что в коде это нигде не делается, только очищаются поля. А html элемент details после отправки никак уже не изменяется в коде.
        Я, конечно, сделал перезагрузку страницы в JS через 4 секунды после отправки, это не сложно, но это не техничное решение. А как перезапустить форму без перезагрузки страницы?

        Ответить
        • Alexander:

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

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

          А html элемент details после отправки никак уже не изменяется в коде.

          После отправки как раз и нужно все менять, как нравится (сейчас форма схлопывается и очищается), можно включить таймер и закрыть через 2 секунды модальное окно или убрать атрибут open у details, и после этого вернуть форму в исходное положение $frm.find(".form-at").show();

          Ответить
  • Галя:

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

    Ответить
    • Alexander:

      Путь к отправщику правильно прописан, от корня?
      А так даже не знаю что еще может быть, смотреть нужно

      Ответить
  • Никита:

    Всё прописал, работает, но единственная проблема использую не локальный сервер, пишет ошибку "Сообщение не отправлено, ошибка почтового сервера!", которую в коде сами прописывали. Это значит не работает функция mail? только через PHPMailer?

    Ответить
    • Alexander:

      Все верно. не работает функция mail
      Самый простой вариант, на мой взляд, это PHPMailer

      Ответить
  • Артём:

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

    Ответить
    • Alexander:

      Заменяем:

      $frm.find(".form-at").fadeOut(500);

      На:

      setTimeout(function() {
      	$frm.find(".result-at").fadeOut(500);
      }, 2000);

      Но в таком варианте можно будет жать кнопку отправить много раз

      Ответить
      • Артём:

        Спасибо большое, сообщение работает, но не исчезает почему то

        Ответить
        • Alexander:

          Поправил код выше

          Ответить
          • Артём:

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

            Ответить
            • Alexander:

              Если

              $frm.find(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); 

              стоит, должна показываться

              Ответить
              • Артём:

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

  • Виктор:

    Добрый день, письма не приходят на майл... в логах ошибка вот такая
    [Wed Jun 29 09:15:51 2022] [warn] [client 178.208.73.8] mod_fcgid: stderr: PHP Notice: Undefined index: frm_check in /home/httpd/vhosts/comilifo.md/httpdocs/send.php on line 23, referer: http://comilifo.md.mcpre.ru/contact.html

    Ответить
    • Alexander:

      Попробуйте ниже

      $return_arr = array();

      добавить:

      $return_arr["frm_check"] = '';

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

      Ответить
      • Виктор:

        пользуюсь телеграмом, как это сделать?

        Ответить
        • Alexander:
          if ($return_arr["frm_check"] != 'error') {
          	// Тут отправка на почту, ее заменить на код ниже:
          	$token = "";
          	$chat_id = "";		
          	$arr = array(
          	'Тема: ' => $subject,
          	'Имя: ' => $name,
          	'Контакт: ' => $email,
          	'Сообщение: ' => $message 
          	);
          	foreach($arr as $key => $value) {
          		$txt .= "<b>".$key."</b> ".$value."%0A";
          	};
          	$sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
          }

          Где взять token и chat_id поищите в интернете, там много статей, как сделать телеграм бота.

          Ответить
  • Алексей:

    Сори, все гуд, сам неверно подключил

    Ответить
  • Алексей:

    В css нету класса forma. В связи с чем она отображается не так как на фото

    Ответить
  • Валерий:

    Подскажите. В чем может быть причина. При нажатии на кнопку ничего не происходит. http://valerape.beget.tech/
    Сначал пытался вставить в сайт, потом уже просто создал отдельный для настройки. Версии jquery пробовал разные.

    Ответить
    • Alexander:

      Замените

      (function ($) {

      на

      $(function() {

      Или разместите script.js ниже формы

      Ответить
      • Валерий:

        Спасибо. Сместил скрипт в конец и все заработало.

        Ответить
  • николай:

    Письма отправляются, но сообщений об отправке нет. РНР8. Как исправить? Спасибо.

    Ответить
  • Валерий:

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

    Ответить
  • Алекс:

    Приветствую. Друг, вроде всё сделал как ту указал. Но что-то не работает. Жму на отправить и ничего не происходит. Вот тут: ссылка
    Подскажи плиз, в чем я не прав?

    Ответить
      • Алекс:

        я вставляю код

        <скрипт src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></скрипт>

        перед </head> Всёравно не работает. Почта то приходит, но после нажатия кнопки отправить не появляется сообщение об отправке, как у вас. Посоветуйте плиз как подключить библиотеку и какую версию, чтобы работало.

        зы: "скрипт" в коде правильно написан, просто ваша форма комментария не пускает отправить, поэтому тут заменил.

        Ответить
        • Alexander:

          Завтра днем погляжу, отпишу что не так, хорошо?

          Ответить
        • Alexander:

          В PHP коде эта строчка есть?
          echo json_encode($return_arr);

          Ответить
          • Алекс:

            да, конечно есть. Код в точности скопирован ваш, только заменен email.

            Ответить
            • Alexander:

              Даже не знаю.. что то в php файле скорее всего.
              На ошибку форма срабатывает, а на успех - нет

              Ответить
          • Алекс:

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

            Ответить
            • Alexander:

              Смотрите PHP, что то там.
              Я сейчас взял 1 в 1 вашу форму и 1 в 1 свой PHP-файл отправщик после отправления, форма скрылась и появилось - Ваше сообщение отправлено!

              Ответить
              • Алекс:

                Заметил вот что:
                У меня на сервере стоит PHP 7.3.33 и форма не работает (письмо отправляется но после отправки не появляется сообщение об успешной отправке).
                Я поменял PHP на версию 7.4.26 и форма заработала нормально (появляется сообщение об успешной отправке). Но мой сайт (CMS Битрикс) на 7.4.26 не работает(. Может подскажете что такого в вашем коде, что не хочет обрабатываться на версии 7.3.33?

              • Alexander:

                Попробуйте

                if (!mail($to, $subject, $message, $headers)) {
                	$return_arr["frm_check"] = 'error';
                	$return_arr["msg"] = "Сообщение не отправлено, ошибка почтового сервера!";	
                }

                Заменить на:

                if (!mail($to, $subject, $message, $headers)) {
                	$return_arr["frm_check"] = 'error';
                	$return_arr["msg"] = "Сообщение не отправлено, ошибка почтового сервера!";	
                } else {
                	$return_arr["frm_check"] = 'success';
                }
  • Виктор:

    Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!

    Ответить
  • Виктор:

    Подскажите пожалуйста как изменить надпись Ваше сообщение отправлено. В коде js меняю на Message sent но всеравно на руском остается. Спасибо!

    Ответить
  • Валера:

    Интересно как же заставить работать одновременно две формы, и почему не срабатывают две..?

    Ответить
    • Alexander:

      В JS нужно немного поменять, через each сделать форму.
      Никак не соберусь обновить тут коды...

      Ответить
      • Валера:

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

        Ответить
        • Alexander:

          Если на коммерческой основе, то хоть сейчас:)

          Ответить
      • Алекс:

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

        Ответить
        • Alexander:

          Обновил коды в статье, попробуйте.
          А с PHP помогло решение?

          Ответить
          • Алекс:

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

            Ответить
          • Алекс:

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

            Ответить
            • Alexander:

              Под HTML кодом описание

              Ответить
  • Naum:

    Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.

    Ответить
    • Alexander:

      Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат.
      Например:
      height: 50px; - высота верхних полей и кнопки
      min-height: 170px; - высота поля с доп. инфой

      Ответить
  • Михаил:

    День добрый.

    Вопрос такой: как вставить в js код - цель на отправку формы метрики?

    Ответить
    • Alexander:

      Когда форма отправлена:

      $(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); 
      $(".form-at").fadeOut(500);
      $(".input-at").val("");

      Ниже ставим:

      yaCounterNNNNNNNNNNN.reachGoal('name');
      Ответить
  • пудж:

    всё работает по кайфу

    Ответить
  • Альберт:

    Добрый день!
    Спасибо за крутое решение... долго искал

    Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы

    Спасибо

    Ответить
    • Alexander:

      Я про отправку файлов не писал в блоге, но можно почитать тут например.
      Или лучше использовать что то более профессиональное - PHPMailer

      Ответить
  • Александр:

    Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.

    Ответить
    • Николай:

      То же самое , при нажатии на кнопку ничего не происходит. Css и Js подключены в html форме

      Ответить
      • Alexander:

        Нужно результат видеть, я же не могу угодать почему оно не работает

        Ответить
        • Николай:

          Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит.
          Файл стилей и файл скрипта прописаны (отлинкованы)

          Ответить
          • Alexander:

            Когда все прописано, работает как на примере.
            Ошибки какие-нибудь есть в консоле?

            Ответить
            • Andrey:

              Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found - файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?

              Ответить
              • Alexander:

                Если 404, то это не запрет php
                Скиньте результат сюда или в ВК/Телеграм

  • Рушан:

    Добрый день! А файл jQuery как назвать необходимо?

    Ответить
    • Alexander:

      Как угодно, главное чтобы код был на сайте

      Ответить