Bootstrap contact form (php + ajax)

All forms on php + ajax. If the field is not filled in or incorrectly filled in, the field is highlighted with a red border, a prompt appears below it in red, a “Check form fields” pops up under the submit button. If everything is entered correctly, after sending the form pops up under the button - "Message sent."

Tested every form, worked correctly.
Then I got Adobe Dreamweaver, and the forms stopped working correctly. Again, I checked all the handlers and senders, rewrote everything anew. Everything assumes a working condition, but the result is not working. I can reanimate only one form, and that - in half - without selecting fields and prompts under the field. If I add more processing to the next form (in ajax form-scripts.js), then it takes over all actions performed with the previous form.

Each form has its own id and a separate php sending file.

Website: http://woodartlab.ru/

HTML form code:

<form role="form" id="contactForm4" method="post" enctype="multipart/form-data" data-toggle="validator"> <div class="row"> <div class="form-group-lg col-sm-12"> <label for="name">Ваше имя:</label> <input type="text" class="form-control" id="name4" name="name4" placeholder="Имя" minlength="2" maxlength="30" required data-error="Как мы можем к вам обратиться?" > <div class="help-block with-errors"></div> </div> <div class="form-group-lg col-sm-12"> <label for="tel">Ваш контактный телефон:</label> <input type="tel" class="form-control" id="phone4" name="phone4" placeholder="+7 (XXX) XXX-XX-XX" required data-error="На какой номер вам можно перезвонить?"> <div class="help-block with-errors"></div> </div> <div class="form-group-lg col-sm-12"> <label for="email">Email адрес:</label> <input type="email" class="form-control" id="email4" name="email4" placeholder="address@domen.ru" required data-error="На какой EMAIL отправить варианты макета?"> <div class="help-block with-errors"></div> </div> <div class="form-group-lg col-sm-12"> <label for="styles4" class="control-label">Стиль обработки:</label> <select class="form-control" id="styles4" name="styles4"> <option value="Постер">Постер</option> <option value="Исторический портрет">Исторический портрет</option> <option value="Цветокоррекция и фильтры">Цветокоррекция и фильтры</option> <option value="Коллаж">Коллаж</option> <option value="Модульная картина">Модульная картина</option> </select> </div> <div class="form-group-lg col-sm-12"> <label for="sizes4" class="control-label">Размер:</label> <select class="form-control" id="sizes4" name="sizes4"> <optgroup label="Квадратные:"> <option value="10x10">10x10</option> <option value="15x15">15x15</option> <option value="20x20">20x20</option> <option value="25x25">25x25</option> <option value="30x30" >30x30</option> </optgroup> <optgroup label="Прямоугольные:"> <option value="10x10">10x15</option> <option value="15x20">15x20</option> <option value="15x25">15x25</option> <option value="15x30">15x30</option> <option value="15x40">15x40</option> <option value="15x45">15x45</option> <option value="20x25">20x25</option> <option value="20x30">20x30</option> <option value="20x40">20x40</option> <option value="20x45">20x45</option> <option value="25x30">25x30</option> <option value="25x40">25x40</option> <option value="20x45">20x45</option> <option value="30x35">30x35</option> <option value="30x45">30x45</option> </optgroup> <optgroup label="Составные/Модульные:"> <option value="Модульная/Составная - 3 шт.">3 шт.</option> <option value="Модульная/Составная - 4 шт.">4 шт.</option> <option value="Модульная/Составная - 5 шт.">5 шт.</option> <option value="Модульная/Составная - 6 шт.">6 шт.</option> <option value="Модульная/Составная - 7 шт.">7 шт.</option> <option value="Модульная/Составная - 8 шт.">8 шт.</option> <option value="Модульная/Составная - более 8 шт.">более 8 шт.</option> </optgroup> </select> </div> </div> <div class="form-group-lg col-sm-12"> <p class="small">Мы не передаем ваши контактные данные третьим лицам. Соблюдаем Политику конфиденциальности персональных данных.</p> </div> <div class="form-group-lg col-sm-12"> <button type="submit" id="form-submit4" class="btn btn-primary bg-block btn-lg">Отправить заявку</button> </div> <div id="msgSubmit4" class=" text-center hidden"></div> <div class="clearfix"></div> </form> 

Ajax handler form-scripts.js:

 //ФОРМА ПЕРВОГО ЭКРАНА// $("#contactForm").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Проверьте поля ввода."); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var name = $("#name").val(); var phone = $("#phone").val(); var email = $("#email").val(); $.ajax({ type: "POST", url: "php/form-process.php", data: "name=" + name + "&phone=" + phone + "&email=" + email, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm")[0].reset(); submitMSG(true, "Сообщение отправлено!") } function formError(){ $("#contactForm").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "h3 text-center tada animated text-success"; } else { var msgClasses = "h3 text-center text-danger"; } $("#msgSubmit").removeClass().addClass(msgClasses).text(msg); } //ФОРМА ОБРАТНОГО ЗВОНКА// $("#contactForm1").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Проверьте поле ввода."); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var phone1 = $("#phone1").val(); $.ajax({ type: "POST", url: "php/form-process1.php", data: "&phone1=" + phone1, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm1")[0].reset(); submitMSG(true, "Сообщение отправлено!") } function formError(){ $("#contactForm1").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "text-center slideInUp animated text-success"; } else { var msgClasses = "text-center text-danger"; } $("#msgSubmit1").removeClass().addClass(msgClasses).text(msg); } //ФОРМА ЗАЯВКИ ИЗ БЛОКА СТИЛИ// $("#contactForm2").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Проверьте поля ввода."); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var name2 = $("#name2").val(); var phone2 = $("#phone2").val(); var email2 = $("#email2").val(); var styles2 = $("#styles2").val(); $.ajax({ type: "POST", url: "php/form-process2.php", data: "name2=" + name2 + "&phone2=" + phone2 + "&email2=" + email2 + "&styles2=" + styles2, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm2")[0].reset(); submitMSG(true, "Сообщение отправлено!") } function formError(){ $("#contactForm2").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "text-center slideInUp animated text-success"; } else { var msgClasses = "text-center text-danger"; } $("#msgSubmit2").removeClass().addClass(msgClasses).text(msg); } //ФОРМА ПОДПИСКИ// $("#contactForm3").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Проверьте поле ввода."); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var email3 = $("#email3").val(); $.ajax({ type: "POST", url: "php/form-process3.php", data: "&email3=" + email3, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm3")[0].reset(); submitMSG(true, "Сообщение отправлено!") } function formError(){ $("#contactForm3").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "text-center slideInUp animated text-success"; } else { var msgClasses = "text-center text-danger"; } $("#msgSubmit3").removeClass().addClass(msgClasses).text(msg); } //ФОРМА ЗАЯВКИ ИЗ БЛОКА РАЗМЕРЫ $("#contactForm4").validator().on("submit", function (event) { if (event.isDefaultPrevented()) { // handle the invalid form... formError(); submitMSG(false, "Проверьте поля ввода."); } else { // everything looks good! event.preventDefault(); submitForm(); } }); function submitForm(){ // Initiate Variables With Form Content var name4 = $("#name4").val(); var phone4 = $("#phone4").val(); var email4 = $("#email4").val(); var styles4 = $("#styles4").val(); var sizes4 = $("#sizes4").val(); $.ajax({ type: "POST", url: "php/form-process4.php", data: "name4=" + name4 + "&phone4=" + phone4 + "&email4=" + email4 + "&styles4=" + styles4 + "&sizes4=" + sizes4, success : function(text){ if (text == "success"){ formSuccess(); } else { formError(); submitMSG(false,text); } } }); } function formSuccess(){ $("#contactForm4")[0].reset(); submitMSG(true, "Сообщение отправлено!") } function formError(){ $("#contactForm4").removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(); }); } function submitMSG(valid, msg){ if(valid){ var msgClasses = "h5 text-center slideInUp animated text-success"; } else { var msgClasses = "h5 text-center text-danger"; } $("#msgSubmit4").removeClass().addClass(msgClasses).text(msg); } 

PHP sender (in this case, form-proccess4.php for # contactForm4):

 <?php $errorMSG = ""; // NAME if (empty($_POST["name4"])) { $errorMSG = "Укажите ваше имя "; } else { $name4 = $_POST["name4"]; } // PHONE if (empty($_POST["phone4"])) { $errorMSG = "Укажите телефон для связи"; } else { $phone4 = $_POST["phone4"]; } // EMAIL if (empty($_POST["email4"])) { $errorMSG .= "Укажите email, на который мы вышлем макет"; } else { $email4 = $_POST["email4"]; } // STYLES if (empty($_POST["styles4"])) { $errorMSG .= "Укажите желаемый стиль фотообработки"; } else { $styles4 = $_POST["styles4"]; } // SIZES if (empty($_POST["sizes4"])) { $errorMSG .= "Укажите желаемый размер"; } else { $sizes4 = $_POST["sizes4"]; } $EmailTo = "myemail@gmail.com"; $Subject = "ЗАЯВКА НА МАКЕТ (форма блока размеры)"; // prepare email body text $Body = ""; $Body .= "Имя: "; $Body .= $name4; $Body .= "\n"; $Body .= "Телефон: "; $Body .= $phone4; $Body .= "\n"; $Body .= "Email: "; $Body .= $email4; $Body .= "\n"; $Body .= "Стиль обработки: "; $Body .= $styles4; $Body .= "\n"; $Body .= "Размер: "; $Body .= $sizes4; $Body .= "\n"; // send email $success = mail($EmailTo, $Subject, $Body, "From:".$email4); // redirect to success page if ($success && $errorMSG == ""){ echo "success"; }else{ if($errorMSG == ""){ echo "Что-то пошло не так... :("; } else { echo $errorMSG; } } ?>