HTML форма обратной связи с использованием Ajax и PHP

logo

MailSub

MailSub — это html форма обратной связи для небольших сайтов и лендингов.

Используя MailSub вы сможете разместить любое количество html форм на странице. В своей форме вы сможете использовать любое количество самых разных полей. Скрипт поддерживает создание форм обратной связи с вложением и может отправлять письмо посетителю сайта.

Работает с php 5.5 и выше.

Данный скрипт использует библиотеку PHPMailer. Ознакомиться с PHPMailer можно по ссылке: cсылка на Github

Содержание:

Видео

Подключение

Файл настроек

Форма обратной связи с вложением

Отправка сообщения посетителю

Отправка через SMTP

Файл script.js

Скачать MailSub

Donate

Видео

Подключение

В архиве находится папка "feedback". Ее нужно расположить в корне сайта. Файл "script.js" подключаем к странице с формой (не забываем подключить jQuery). Папку "feedback" можно переименовать и расположить в любой директории. Для этого поправьте "action" формы - укажите точный путь до файла "mail.php"


                <!-- Форма -->
                <form action="/feedback/mail.php" data-form="form">
                ...
                </form>
                ...
                <!-- JS -->
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                <script src="script.js"></script>
            

Пример формы

Ниже пример формы с несколькими полями и textarea. У каждой формы есть скрытые поля: имя сайта, тема сообщения для администратора, и страница на которой располагается форма.


                <!-- Форма -->
                <form action="/feedback/mail.php" data-form="form">
    
                    <!-- Скрытые обязательные поля -->
                    <input type="hidden" name="site_name" value="Site-name">
                    <input type="hidden" name="mail_subject" value="Форма обратной связи">
                    <input type="hidden" name="page" value="Страница формы, форма в шапке">
        
                    <!-- Поля формы -->
                    <h3>Форма</h3>
                    <input type="text" name="user_name" placeholder="Имя">
                    <input type="text" name="user_email" placeholder="Email">
                    <textarea name="message" placeholder="Введите сообщение"></textarea>
        
                    <button type="submit">Отправить форму</button>
        
                </form>
            

Разместите в форме любое количество инпутов. Но у каждого "input" должен быть обязательно атрибут "name" (кроме "input type=file"). Атрибут "name" можно назвать произвольно. Присваиваете полям любые классы и идентификаторы.

Какие файлы изменить?

Файл настроек

В папке "feedback" находится файл с настройками - "settings.php". В файле содержится:

Внимательно ознакомьтесь со всеми настройками. Измените их по необходимости. Email администратора изменяется в этом файле.

Форма обратной связи с вложением

Ниже приведен пример формы с вложением для сайта. Скрипт поддерживает мультизагрузку файлов и до трех полей "type=file". Атрибут "name" для инпута с файлом указывать не нужно. Настройки для формы с вложением находятся в "feedback/settings.php". Такая форма с отправкой файлов на почту подойдет для большинства простых сайтов.

Добавим в тег "form" атрибут "enctype".


                <!-- Форма -->
                <form action="/feedback/mail.php" enctype="multipart/form-data" data-form="form">
    
                    <!-- Скрытые обязательные поля -->
                    <input type="hidden" name="site_name" value="Site-name">
                    <input type="hidden" name="mail_subject" value="Форма обратной связи">
                    <input type="hidden" name="page" value="Страница формы, форма в шапке">
        
                    <!-- Поля формы -->
                    <h3>Форма</h3>
                    <input type="file" multiple="multiple">
                    <input type="file" multiple="multiple">
                    <input type="file" multiple="multiple">
        
                    <button type="submit">Отправить форму</button>
        
                </form>
            

Отправка сообщения посетителю

Скрипт умеет отправлять письмо посетителю сайта, если тот оставил свой email. По умолчанию эта опция отключена. Включите ее в файле настроек "settings.php"


                // разрешить отправку сообщения посетителю
                // чтобы отправлять поменяйте на true
                const MAIL_CLIENT = false;
            

Письмо посетителю не отправится, если изменить атрибут "name". Не меняйте его.


                <input type="text" name="user_email" placeholder="Email">
            

Дизайн письма и его содержимое можно изменить в файле "feedback/email_client.tpl".

Отправка через SMTP

Отправка через SMTP отключена и скрипт отправляет сообщение стандартным способом. Включаем отправку через SMTP в "feedback/settings.php". Настройки SMTP для вашей почты можно найти в интернете. Если на вашем хостинге есть почтовый ящик, используйте его. Настройки SMTP уточняйте в службе поддержки вашего хостинга.


                //###############################################################
                //  Настройки SMTP
                //###############################################################
                
                // включаем отправку SMTP
                // Чтобы включить поменяйте на true
                const SMTP_ON = false;
                
                // SMTP сервер
                // пример: 'smtp.mail.ru'
                const SMTP_SERVER = 'smtp.mail.ru';
                
                // ваша почта
                // пример: 'username@mail.ru'
                const USER_NAME = 'username@mail.ru';
                
                // пароль от почты
                const PASSWORD = '45Ghfd24H';
                
                // протокол шифрования
                // пример: 'ssl'
                const SMTP_SECURE = 'ssl';
                
                // SMTP порт
                const SMTP_PORT = 465;
            

Файл script.js

В файле "script.js" присутствует проверка незаполненных полей у "input type=text". Если проверка не нужна, закомментируйте ее.


                //проверка незаполненных полей
                form.find('input[type="text"]').each( function(){
                    if ($(this).val() == '') {
                        alert('Зaпoлнитe пoлe "'+$(this).attr('placeholder')+'"!');
                        error = true;
                    }
                });
            

Также присутствует валидация email. Если она не нужна, закомментируйте ее.


                // валидация email
                if (!error) {
                    if(form.find('input[name="user_email"]').length){
                        var pattern = /^([a-z0-9_\.-])+[@][a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
                        var email = form.find('input[name="user_email"]').val();
                        if(!(pattern.test(email))){
                            alert('Формат email неправильный');
                            error = true;
                        }
                    }
                }
            

Есть возможность добавить свои собственные эффекты и анимации во время отправки.


                ...    
                beforeSend: function(data) { // сoбытиe дo oтпрaвки, можно добавить свой эффект
                    form.find('button[type="submit"]').attr('disabled', 'disabled'); // нaпримeр, oтключим кнoпку
                },
                ...
                complete: function(data) { // сoбытиe пoслe любoгo исхoдa, убираем добавленные эффекты
                    form.find('button[type="submit"]').prop('disabled', false); // включим кнoпку oбрaтнo
                }
            

Скачать MailSub

Скачать MailSub

Посмотреть на Github