Форма обратной связи для сайта 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;
      }
    }
  }
}

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

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