php js html Простая форма для обратной связи

[BiZaJe]

Материал рассчитан на тех, кто хотя бы понимает HTML/CSS, немного JS и PHP, но если вы не ленивцы, то можете изучить все подробно сами.

ВВЕДЕНИЕ
​

Сейчас мы рассмотрим небольшой пример создания формы для обратной связи. Это только пример и если у вас есть желание изучать и пробовать Вы добьетесь хорошего результата сами.
Для сегодняшней темы вам понадобиться:
1 - Jquery
2 - Fancybox
3 - Веб-сервер для запуска PHP скрипта
4 - Желание двигаться дальше

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

HTML разметка
​

Для начала нам надо сделать форму для обратной связи.

​

Спойлер: тык

    <div id="feedback">
        <form id="TestForm" action="" method="post">
            <div class="form__title">
                Заполните заявку
            </div>
            <input type="text" name="name" value="Ваше имя *">
            <br>
            <input type="text" name="data" value="Какой-то текст">
            <br>
            <button id="Btn">Отправить</button>
        </form>
    </div>

Также не забываем создать ссылку чтобы открыть модальное окно на сайте

<a href="#feedback" class="header__link-button link-button modalbox">Открыть окно</a>

Индификатор (id) и классы (class) можете дать свои, но класс modalbox в ссылке должен быть обязателен! Также если вы меняете id у тега div не забудьте изменить его в ссылке в атрибуте href, также не забудьте дать id самой форме и кнопке.

CSS стили​

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

#feedback{
    display:none;
}

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

ECMASCRIPT код
​

Следующим шагом нам нужно добавить js код на свой сайт для работы модального окна

Спойлер: Тык

<script>
        $(document).ready(function(){
            $(".modalbox").fancybox(); // получаем класс
            $("#TestForm").submit(function(){ return false; }); // Получаем открытие формы
            $("#Btn").on("click", function(){ // Проверяем нажатие на отправку формы

                $("#TestForm").fadeOut("fast", function(){
                    $(this).before("<p><strong>Ваше сообщение отправлено!</strong></p>");
                    setTimeout("$.fancybox.close()", 1000);
                });
            });
        });
    </script>

Данным кодом мы откроем окно формы и проверим нажатие на кнопку отправки.

PHP скрипт​

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

Спойлер: Тык

<?php
  $Name = $_POST['name'];
  $Data = $_POST['data'];
  $Message = "Имя: $Name \nКакие-то данные: $Data";
  $SendMessage = mail("Ваша почта", $Message, "Content-type:text/plain; charset = UTF-8\r\nFrom:$Data");

  if ($SendMessage)
  {
      echo "Сообщение отправлено";
  }
  else
  {
      echo "Ой, что-то пошло не так";
  }
?>

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

2 Май 2020

ДОПОЛНЕНИЕ К ТЕМЕ​

Не забудьте в теге form в атрибуте action указать путь к php скрипту чтобы отправить данные с формы на обработку скрипту.

 

[Javekson]

Скрины результата не помешают, имхо

 

[BiZaJe]

Javekson, Сейчас прикреплю как результат работы

 

[fantom]

setTimeout("$.fancybox.close()", 1000);

Никогда, ни при каких условиях так не делайте. Тут eval в чистом виде. Создайте анонимную функцию, где и закрывайте fancybox.

 

[knik]

if ($SendMessage == 'true')

Так тоже лучше не делать.

$SendMessage = mail("Ваша почта", $Mesaage, "Content-type:text/plain; charset = UTF-8\r\nFrom:$Data");

Тут несколько ошибок:

• Название переменной с опечаткой
• Неправильный вызов функции, пропущена тема письма. Вот правильный:

$SendMessage = mail("Ваша почта", 'Тема письма', $Message, "Content-type:text/plain; charset = UTF-8\r\nFrom:$Data");

P.S. Считаю FAQ бесполезным. Много ошибок в таких простейших примерах (HTML, CSS, JS, PHP). Всё же пример должен быть идеальным

 

[BiZaJe]

knik, Конкретнее "Не правильный вызов функции", если пропущен один аргумент, это не говорит о не правильном вызове.
Окей, if($SendMessage) и if($SendMesaage == 'true') в чем разница, почему так нельзя делать, конкретнее дайте объяснение

 

[knik]

Да, прошу прощения, что не дал объяснение, хотел.

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

if($SendMesaage == 'true') это сравнение со строкой. 'true' в данном случае не булевое значение, а строковое. Так не пишут.
В процессе проверки будут бессмысленные преобразования типов, которые могут привести к неожиданным поведениям, ещё это труднее для чтения и понимания кода.

Ваш код выше сработает с любым строковым значением вместо 'true', будь то 'false' или что-то ещё:

<?php
$message = true;

if ($message == 'false') {
    echo "Сработало!\n";
}

if ($message == 'some-shit') {
    echo "И тут сработало!\n";
}

if ($message == 1) {
    echo "Ого!!! И тут сработало!\n";
}

if ($message == 2) {
    echo "И тут...\n";
}
// Все условия будут выполнены.

 

[CrazyHackGUT]

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

<?php
$message = true;

if ($message === 'false') {
    echo "Сработало!\n";
}

if ($message === 'some-shit') {
    echo "И тут сработало!\n";
}

if ($message === 1) {
    echo "Ого!!! И тут сработало!\n";
}

if ($message === 2) {
    echo "И тут...\n";
}
// Ничего не будет выполнено.

А вообще такой код в 2020 уже не пишут. И в 2019 не писали. И в 2018...

 

[knik]

Да, но зачем так городить? Когда можно просто проверить как положено, булевое значение.

Тем более, это примеры. Кто-то на примерах свой код пишет ? Копипастит и пишет.
Всё же такие примеры стоит хорошенько вылизать.

 

[BiZaJe]

knik, CrazyHackGUT, Все, понял, решил проверить, все таки да 'true' != true и условие не выполнится, ошибку допустил глупую :(, подправил указанные косяки.

 

[alabamaster1337]

Ваще можно без джквери бахнуть

Спойлер: qwe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('#btn').addEventListener('click', () => {
                const htmlForma = document.querySelector('#TestForm')
                const forma = new FormData(htmlForma);
                const url = htmlForma.getAttribute('action');
               
                fetch(url, {
                    method: 'POST',
                    body: forma
                }).then((response) => {
                    if ( response.status == 200 ) {
                        return alert('Сообщение успешно отправлено');
                    }
                    return alert('Ошибка отправки сообщения');
                })
            });
        });
    </script>
    <title>Document</title>
</head>
<body>
    <div id="feedback">
        <form id="TestForm" action="" method="post">
            <div class="form__title">
                Заполните заявку
            </div>
            <input type="text" name="name" placeholder="Ваше имя *">
            <br>
            <input type="text" name="data" placeholder="Какой-то текст">
            <br>
            <button type="button" id="btn">Отправить</button>
        </form>
    </div>
</body>
</html>