Форма обратной связи для сайта html + ajax

@IRIP · Регистрация: 18.04.2015

Студворк — интернет-сервис помощи студентам

Есть html сайт на нем уже встроены верстальщиком формы но так и не доделана возможность отправки на почту. Есть замечательная инструкция https://www.cyberforum.ru/blog... g2149.html, но к сожалению, архив не распаковывается.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="popup-box" id="popup-box-1">
    <div class="close"></div>
    <div id="ContactForm111">
        <form id="contact111" method="post" action="kontakt_form.htmll#" name="contact11">
            <input id="tov-name23" style="visibility: hidden; display: none;"
            
                    type="text"   
                    value="попап форма"
                    name="page11"
            >
            <input id="tov-name123" style="visibility: hidden; display: none;"
 
                    type="text"   
                    value="1"
                    name="form11"
            >
            <input id="name111" class="inp" type="text" name="name11"  placeholder="Ваше имя*">
            <input id="phone111" class="inp" type="text" name="phone11"  placeholder="Ваш телефон*">
            <input id="send111" class="sendbutton button" type="submit" value="Отправить" >
              <div class="inpobrddiv"><input type="checkbox" checked="checked"  name="inpobrd" id="inpobrd11" /><label for="inpobrd11">Нажимая на кнопку, вы даете согласие на обработку своих персональных данных</label></div>
            <div id="errorMessage111" class="errorM" >
                <p class="error"></p>
            </div>
        </form>
    </div>
    <div class="ContactSend111" id="ContactSend111">
            <p>
            Письмо отправлено!
            </p>
 
    </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function () {
$('form:not(.lc_widjet_form)').submit(function(){
var data = $(this).serialize(); bhag_leadga(data);
});
    $("input[name='page11']").remove();
    $("input[name='form11']").remove();
 
});
</script>

@mrtoxas · 06.02.2019, 14:57

Сообщение от IRIP

но к сожалению, архив не распаковывается

send_form.zip

@IRIP · 08.02.2019, 00:52 **[ТС]**

Столкнулся с проблемой

на каждой странице сайта своя форма обратной связи

name="contact3"
name="contact11"
name="contact315"

и т.п.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
                            <form id="contact10" method="post" action="index1071.html#" name="contact3">
                                <input id="tov-name" style="visibility: hidden; display: none;"
                                
                                        type="text"   
                                        value="Отзывы"
                                        name="page11"
                                >
                                <input id="tov-name1" style="visibility: hidden; display: none;"
        
                                        type="text"   
                                        value="1"
                                        name="form11"
                                >
                                <input id="name10" class="inp" type="text" name="name11"  placeholder="Ваше имя*">
                                <input id="phone10" class="inp" type="text" name="phone11"  placeholder="Ваш телефон*">
  <div class="inpobrddiv"><input type="checkbox" checked="checked"  name="inpobrd" id="inpobrd1" /><label for="inpobrd1">Нажимая на кнопку, вы даете согласие на обработку своих персональных данных</label></div>
                                <input id="send10" class="sendbutton button" type="submit" value="Отправить" >
                                <div id="errorMessage10" class="errorM" >
                                    <p class="error"></p>
                                </div>
                            </form>

@IRIP · 10.02.2019, 11:53 **[ТС]**

сделано

Добавлено через 1 час 26 минут
mrtoxas, вроде все сделал по инструкции
но видимо какие-то скрипты конфликтуют

скажите, как это можно исправить?

Добавлено через 3 минуты
вот пример моей формы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="contact10" method="post" action="https://dezzakaz.com/send_form/send.php" name="contact3">
    <input id="tov-name" style="visibility: hidden; display: none;" type="text" value="главная" name="page11">
    <input id="tov-name1" style="visibility: hidden; display: none;" type="text" value="1" name="form11">
    <input id="name10" class="inp" type="text" name="name11" placeholder="Имя*">
    <input id="phone10" class="inp" type="text" name="phone11" placeholder="Телефон*">
    <div class="inpobrddiv">
        <input type="checkbox" checked name="inpobrd" id="inpobrd1"><label for="inpobrd1">Нажимая на кнопку, вы даете согласие на обработку своих персональных данных</label>
    </div>
    <input id="send10" class="sendbutton button" type="submit" value="Уничтожить вредителей">
    <div id="errorMessage10" class="errorM">
        <p class="error"></p>
    </div>
</form>

а это пример формы

Добавлено через 2 минуты
---------------

форма из примера

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="/send_form/send.php" method="post" class="send_form" enctype="multipart/form-data">
    <div class="form_title">Форма отправки Ajax!</div>
 
    <div class="text_title">Имя:</div>
    <input type="text" class="form_field" name="Имя[1]" placeholder="Имя" />
 
    <div class="text_title">E-mail:</div>
    <input type="text" class="form_field" name="E-mail[1]" placeholder="E-mail" />
 
    <div class="text_title">Телефон:</div>
    <input type="text" class="form_field" name="Телефон[0]" placeholder="Телефон" />
 
    <input type="checkbox" class="checkbox" name="Согласен с условиями[][1]" value="" checked style="display: none;" />
    <label><input type="checkbox" class="checkbox" name="Согласен с условиями[][1]" value="Принять условия" /><font>Принимаю условия!</font></label></div>
 
    <input type="submit" class="sub_form" name="submit" value="Отправить" />
 
</form>

Добавлено через 22 минуты
может все дело в этих скриптах?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript">
// функция передачи формы AJAX посредством "ajaxForm", связана с плагином: jquery.form.js
jQuery(function() {
var FormId = jQuery('.send_form:eq(0)'); // получаем class формы: eq(1)-какая форма на странице по счету, счет от "0", то есть "eq(0)"-первая, "eq(1)"-вторая и тд.
var bar = jQuery('.bar:eq(0)'); // получаем class прогресс-бара
var percent = jQuery('.percent:eq(0)'); // получаем class прогресс-бара
var status = jQuery('.status:eq(0)'); // вывод результатов
 
// получаем class формы <form>, сериализуем массив и отправляем в PHP файл
  FormId.ajaxForm({
    beforeSubmit: validate, // указывает на дополнительную валидацию script, false или true с "function validate()"
    beforeSend: function() { // функция работает до отправки
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) { // функция работает во время отправки
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
// изменение цвета прогресс-бара при загрузке в формате background-color: rgb(255, 255, 255)
        bar.css('background-color','rgb('+Math.ceil((100+(percentComplete*1.5)))+','+Math.ceil(255-(percentComplete))+','+Math.ceil((80+(percentComplete/1.4)))+')');
    },
    success: function() { // функция работает после отправки
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
// вывод результатов после отправки с файла PHP
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
  });
});
</script>
 
<script type="text/javascript">
// функция валидации на js-скрипте /\ пример /\
function validate() {
  jQuery('input:text[name *= 1]').each(function () {
        if(jQuery(this).val() == '') {
          jQuery(this).addClass("error");
        } else {
          jQuery(this).removeClass('error');
        return true;
        }
    });
}
</script>

@IRIP · 10.02.2019, 12:05 **[ТС]**

Не привязывается к кнопке "отправить"

на моем сайте

и в образце

@IRIP · 10.02.2019, 15:47 **[ТС]**

Видимо дело в кнопке и еще чем-то

поменял

<input id="send10" class="sendbutton button" type="submit" value="Уничтожить вредителей">

на

<input type="submit" class="sub_form" name="submit" value="Отправить">

форма отправилась, правда с перезагрузкой страницы

Добавлено через 58 секунд
письмо пришло, но без данных (имя, телефон и т.п.)

Добавлено через 52 минуты
в консоли пишет

index.html%3Fp=91.html:2329 Uncaught ReferenceError: bhag_leadga is not defined
at HTMLFormElement.<anonymous> (index.html%3Fp=91.html:2329)
at HTMLFormElement.dispatch (jquery.min.js:3)
at HTMLFormElement.v.handle (jquery.min.js:3)
(anonymous) @ index.html%3Fp=91.html:2329
dispatch @ jquery.min.js:3
v.handle @ jquery.min.js:3
form2.js:121 Uncaught ReferenceError: Comagic is not defined
at HTMLInputElement.<anonymous> (form2.js:121)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.v.handle (jquery.min.js:3)
(anonymous) @ form2.js:121
dispatch @ jquery.min.js:3
v.handle @ jquery.min.js:3
index.html%3Fp=91.html:2329 Uncaught ReferenceError: bhag_leadga is not defined
at HTMLFormElement.<anonymous> (index.html%3Fp=91.html:2329)
at HTMLFormElement.dispatch (jquery.min.js:3)
at HTMLFormElement.v.handle (jquery.min.js:3)

Добавлено через 7 минут
закомментировал form2.js

Добавлено через 2 часа 32 минуты
----------------------------
В общем, по факту, застрял вот на чем

у меня в формах на сайте поле "телефон" имеет значение

<input id="phone10" class="inp" type="text" name="phone11" placeholder="Телефон*">

а в скрипте

<input type="text" class="form_field" name="Телефон[0]" placeholder="Телефон" />

на сколько я понимаю, если в name есть [0] - то тогда передается, если нет, не передается
как отключить?

Добавлено через 1 минуту
Валидация осуществляется в файле valid_form.php

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// проверка/валидация формы
foreach ($post as $Name => $tempValue) { // разбираем массив POST на переменные и массив
    foreach ($tempValue as $vKey => $vValue) { // получаем переменные: "name" поля input, "value" поля input, $Key = ключ для валидации с <input name="Name[0 или 1]">
    // если есть массив, идем дальше
        if(is_array($vValue)) { // если с формы пришел массив, то есть [] <input name="одинаковое[][1]"> , то включаем эту часть кода
         foreach ($vValue as $Key => $aValue) { // получаем переменные: key, value поля <input name="одинаковое[][$Key 0 или 1]" value="">
          $vValue = $aValue; // переназначаем переменную с учетом массива
        }
      count($tempValue[$Key]) ? $vKey = 0 : $vKey = 1; // здесь для проверки назначаем в соответствии ключа с формы: [$Key 0 или 1]
      }
        
    $i++; // для получения $pattern_? , номер поля с формы для шаблона валидации
     $Value = htmlspecialchars(trim($vValue)); // преобразовуем специальные символы в HTML сущности и удаляем пробелы по бокам
    if($vKey == 1) { // если ключ 1 - проверяем форму, 0 - нет проверки, приходит с  <input name="Name[$Key 0 или 1]">
      if($Value == '') { // проверка формы на пустоту
        $errors[] = "Вы не ввели: ".$Name;
       } else if (!preg_match(${'pattern_'.$i} ? ${'pattern_'.$i} : '/(.*?)/iu', $Value)) { // если форма не пуста, валидация полей по шаблону $pattern_? '/^... $/i'
          $errors[] = "phone1: ".$Name;
      }
    }
  }
}

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@IRIP 514 / 146 / 28 Регистрация: 18.04.2015 Сообщений: 1,904 Записей в блоге: 16
	10.02.2019, 12:05 [ТС]
	Не привязывается к кнопке "отправить" на моем сайте и в образце Миниатюры 0

Опции темы