Универсальная форма обратной связи — feedBackForm

Вариант по-умолчанию

Обработчик PHP внизу статьи. Подходит для всех вариантов.

Вариант по-умолчанию — HTML

Содержимое скрыто под спойлер. Показать
<div class="feedBackWrapper">
  <h3 class="form-h3">Заказать обратный звонок</h3>
  <table>
    <tbody>
      <tr>
        <td class="fbw-title">Имя<span style="color:red;">*</span>:</td>
        <td><input type="text" placeholder="Имя" class="isrequired fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">Номер телефона<span style="color:red;">*</span>:</td>
        <td><input type="text" placeholder="Телефон" class="isrequired fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">E-mail:</td>
        <td><input type="text" placeholder="E-mail" class="fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">Цвет:</td>
        <td>
          <label><input type="checkbox" placeholder="Цвет" title="Синий">Синий</label>
          <label><input type="checkbox" placeholder="Цвет" title="Зеленый">Зеленый</label>
          <label><input type="checkbox" placeholder="Цвет" title="Красный">Красный</label>
        </td>
      </tr>
      <tr>
        <td class="fbw-title">Вкус:</td>
        <td>
          <label><input type="radio" name='radio1' placeholder="Вкус" title="Сладкий">Сладкий</label>
          <label><input type="radio" name='radio1' placeholder="Вкус" title="Соленый">Соленый</label>
          <label><input type="radio" name='radio1' placeholder="Вкус" title="Горький">Горький</label>
        </td>
      </tr>
      <tr>
        <td class="fbw-title">Комментарий:</td>
        <td><textarea placeholder="Комментарий" class="fbw-text form-control"></textarea></td>
      </tr>
    </tbody>
  </table>
  <div class="ajax-trigger">
    <button class="ajaxgo ajaxgo_insite">Отправить</button>
    <div class="successmsg"></div>
  </div>
</div>
Скрыть

Вариант по-умолчанию — CSS

Содержимое скрыто под спойлер. Показать
.feedBackWrapper {
  border: 0;
  margin: 0;
  padding:0 25px;
}
.feedBackWrapper table {
  width:100%;
}
.feedBackWrapper td {
  padding: 0;
  vertical-align: middle;
}
.feedBackWrapper .fbw-title {
  font-size: 16px;
  white-space: nowrap;
  padding-right: 10px;
  width:150px;
}
.feedBackWrapper .form-h3 {
  text-align: center;
  margin-top: 15px;
}
.feedBackWrapper .ajaxgo {
  padding: 5px 40px;
  background: #FFC200;
  background: -moz-linear-gradient(top,  #ffd65e 0%, #ffc200 43%, #fcb400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(43%,#ffc200), color-stop(100%,#fcb400));
  background: -webkit-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: -o-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: -ms-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: linear-gradient(to bottom,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#fcb400',GradientType=0 );
  font-size: 18px;
  border-radius: 3px;
  cursor:pointer;
  outline: none;
  border:0;
  border-bottom: 3px solid #D3A000;
}
.feedBackWrapper .ajaxgo:focus {
  outline:1px dashed #ccc;
}
.feedBackWrapper .ajaxgo:hover {
  background: #FFC200;
}
.feedBackWrapper .ajaxgo:active {
  border: 0;
  margin-top: 3px;
  outline:none;
}
.feedBackWrapper .ajaxgo-wr{
  height: 38px;
  padding-top:25px;
  text-align:center;
  margin-bottom: 25px;
  position: relative;
}
.feedBackWrapper .fbw-text{
  margin: 6px 0;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #ccc;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:100%;
  font-family:inherit;
}
.feedBackWrapper .fbw-text:focus {
  border-color: #66afe9 !important;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
}
.feedBackWrapper .ajax-trigger {
  text-align: center;
  padding: 1px;
}
Скрыть

Вариант по-умолчанию — JS

Содержимое скрыто под спойлер. Показать
$(document).ready(function(){
$(document.body).on("click", ".ajaxgo .ajaxgo_insite", send);

$(document.body).on("focus", "input", function(){$(this).css("border","");});

function send(){
  var wr = $(this).parents(".feedBackWrapper");
  var validate = true;
  wr.find(".isrequired").each(function(){
    if(!$(this).val().length){validate = false; $(this).css("border","1px solid #D22")}
  });
  if (validate){
    var need = {};
    need['header'] = "Контактная информация";
    need['fields'] = [];
    wr.find("input, select, textarea").each(function(){
        var fieldElement = {};
        //Checkbox, Radio
        //Ожидаемая семантика: <input type="checkbox" placeholder="Цвет" title="Синий"> / <input type="radio" name='radio1' placeholder="Вкус" title="Сладкий">
        if($(this).attr('type') == 'checkbox' || $(this).attr('type') == 'radio'){
            if($(this).prop('checked') == true){
                fieldElement['type'] = $(this).attr("type");
                fieldElement['title'] = $(this).attr("placeholder");
                fieldElement['value'] = $(this).attr("title");
                need['fields'][need['fields'].length] = fieldElement;
            }
                return true;
        }
        fieldElement['type'] = $(this).attr("type") || 'text';
        fieldElement['title'] = $(this).attr("placeholder");
        fieldElement['value'] = $(this).val();
        need['fields'][need['fields'].length] = fieldElement;
    });
    output = JSON.stringify(need);
    $.ajax({
      type: "POST",
      data: {data1: output},
      url:'js/mail.php',
      dataType:'json',
      success: function(data){
        wr.find(".ajaxgo.ajaxgo_insite").hide();
        wr.find(".successmsg").html(data.result);
        wr.find(".successmsg").fadeIn(300).css("display","inline-block");
      },
      error: function (xhr, ajaxOptions, thrownError){
        console.log(xhr.responseText);
      }
    });
  }
}
});
Скрыть

Форма с загрузкой по клику

Обработчик PHP внизу статьи. Подходит для всех вариантов.

Содержимое скрыто под спойлер. Показать
<a href="js/mail.php?formtitle=Заказать%20звонок&formsubmit=Жду%20звонка!&mailtitle=Заказать%20звонок&postfix_class=yoyo" class="call_back_form_trigger">Заказать звонок</a>
<script>$('.call_back_form_trigger').fancybox({type: 'ajax'});</script>
Скрыть

Форма с загрузкой файлов

Форма с загрузкой файлов — HTML

Содержимое скрыто под спойлер. Показать
<div class="feedBackWrapper">
  <h3 class="form-h3">Заказать обратный звонок</h3>
  <table>
    <tbody>
      <tr>
        <td class="fbw-title">Имя<span style="color:red;">*</span>:</td>
        <td><input type="text" placeholder="Имя" class="isrequired fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">Комментарий:</td>
        <td><textarea placeholder="Комментарий" class="fbw-text form-control"></textarea></td>
      </tr>
      <tr>
        <td class="fbw-title">Фото<span style='color:red;'>*</span>:</td>
        <td>
          <div class="upload_image_fbw_wr">
            <div class="inputforupload-description">Описание ожидаемого файла</div>
            <input type="file" class="inputforupload isrequired">
            <div class="inputforupload-name hidden">Имя файла.jpg</div>
              <div class="inputforupload-tip">Форматы: .jpg .jpeg .png; Размер не более 10 Мб</div>
            <input type="text" placeholder="Фото 1" class="fbw-text" style="display:none;">
          </div>
        </td>
      </tr>
      <tr class="add_foto_fbw_row">
        <td></td>
        <td><div class="add_foto_fbw">Еще одно фото</div></td>
      </tr>
    </tbody>
  </table>
  <div class="ajax-trigger">
    <button class="ajaxgo ajaxgo_insite">Отправить</button>
    <div class="successmsg"></div>
  </div>
</div>
Скрыть

Форма с загрузкой файлов — CSS

Содержимое скрыто под спойлер. Показать
.upload_image_fbw_wr {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.inputforupload-tip {
  /* padding-top: 5px; */
  /* border-top: 1px solid #ccc; */
  /* margin-top: 5px; */
  display: none;
  font-size: 12px;
}
.inputforupload-tip.inputforupload-error {
  color: #FB0606;
  font-size: 12px;
  display: block;
}
.add_foto_fbw {
  display: inline;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.35);
  font-family: "Roboto Condensed";
  font-size: 16px;
  cursor: pointer;
}
.add_foto_fbw:hover {
  border-bottom: 1px solid rgb(8, 144, 222);
  box-shadow: 0 1px rgb(8, 144, 222);
}
.inputforupload-description {
  padding: 0 0 5px;
}
.feedBackWrapper {
  border: 0;
  margin: 0;
  padding:0 25px;
}
.feedBackWrapper table {
  width:100%;
}
.feedBackWrapper td {
  padding: 0;
  vertical-align: middle;
}
.feedBackWrapper .fbw-title {
  font-size: 16px;
  white-space: nowrap;
  padding-right: 10px;
  width:150px;
}
.feedBackWrapper .form-h3 {
  text-align: center;
  margin-top: 15px;
}
.feedBackWrapper .ajaxgo {
  padding: 5px 40px;
  background: #FFC200;
  background: -moz-linear-gradient(top,  #ffd65e 0%, #ffc200 43%, #fcb400 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(43%,#ffc200), color-stop(100%,#fcb400));
  background: -webkit-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: -o-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: -ms-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  background: linear-gradient(to bottom,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#fcb400',GradientType=0 );
  font-size: 18px;
  border-radius: 3px;
  cursor:pointer;
  outline: none;
  border:0;
  border-bottom: 3px solid #D3A000;
}
.feedBackWrapper .ajaxgo:focus {
  outline:1px dashed #ccc;
}
.feedBackWrapper .ajaxgo:hover {
  background: #FFC200;
}
.feedBackWrapper .ajaxgo:active {
  border: 0;
  margin-top: 3px;
  outline:none;
}
.feedBackWrapper .ajaxgo-wr{
  height: 38px;
  padding-top:25px;
  text-align:center;
  margin-bottom: 25px;
  position: relative;
}
.feedBackWrapper .fbw-text{
  margin: 6px 0;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #ccc;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  width:100%;
  font-family:inherit;
}
.feedBackWrapper .fbw-text:focus {
  border-color: #66afe9 !important;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
}
.feedBackWrapper .ajax-trigger {
  text-align: center;
  padding: 1px;
}
Скрыть

Форма с загрузкой файлов — JS

Содержимое скрыто под спойлер. Показать

var copyTable = ""+$(".upload_image_fbw_wr").parents("tr").html()+"";
$(".add_foto_fbw").click(function(){
  var t = $(this);
  t.parents(".feedBackWrapper").find(".add_foto_fbw_row").before(copyTable);
  var itemnum = $(".upload_image_fbw_wr").length;
  $(".upload_image_fbw_wr").each(function(){
    t.parents("tr").find(".fbw-title").html("Фото "+$(this).index()+1 +":");
    t.find(".fbw-text").attr("placeholder","Фото "+$(this).index()+1 +":");
  });
  $(".upload_image_fbw_wr").last().parents("tr").find(".fbw-title").html("Фото "+itemnum+"*:");
  $(".upload_image_fbw_wr").last().find(".fbw-text").attr("placeholder","Фото "+itemnum);
});
$(document.body).on("change", ".inputforupload", function(){
    var t = $(this);
    if(t[0].files[0] !== undefined){
    var re = /(\.jpeg|\.jpg|\.png)$/i;
    if(re.exec(t[0].files[0].name) && t[0].files[0].size < 10000000){
      var data = new FormData();
      data.append('file_attach', t[0].files[0]);
      var fileName = t[0].files[0].name;
          
      $.ajax({
        url: 'js/mail.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, 
        contentType: false, 
        beforeSend: function(){
          t.siblings(".fa-spinner").removeClass("hidden");
          t.siblings(".inputforupload-tip").html("Форматы: .jpg .jpeg .png; Размер не более 10 Мб");
          t.siblings(".inputforupload-tip").removeClass("inputforupload-error");
        },
        success: function(data, textStatus, jqXHR){
          console.log(data);
          
          if(typeof data.error == 'undefined'){
            // Success so call function to process the form
            t.siblings(".inputforupload-tip").html("Файл загружен успешно!");
            t.siblings(".inputforupload-tip").show();
            t.siblings(".inputforupload-description").remove();
            t.siblings(".inputforupload-tip").removeClass("inputforupload-error");
            t.siblings(".fa-spinner").addClass("hidden");
            t.addClass("hidden");
            t.siblings(".inputforupload-name").html(fileName);
            t.siblings(".fbw-text").val(data.onlyfilename);
            t.siblings(".inputforupload-name").removeClass("hidden");    
            t.siblings(".inputforupload-name").attr("data-filename", data.onlyfilename);
            t.siblings(".inputforupload-name").addClass("extension-"+data.extension);
            t.parents(".upload_image_fbw_wr").css("border","");
          }else{
            // Handle errors here
            t.siblings(".inputforupload-tip").addClass("inputforupload-error");
            
            t.siblings(".fa-spinner").addClass("hidden");
            
            console.log('ERRORS: ' + data.error);
          }
        },
        error: function(xhr, textStatus, errorThrown){
          // Handle errors here
          console.log('ERRORS: ' + textStatus);
          console.log(xhr.responseText);
          // STOP LOADING SPINNER
          //t.siblings(".fa-spinner").hide(300);
          t.siblings(".inputforupload-tip").html("Ошибка:(");
          t.siblings(".inputforupload-tip").addClass("inputforupload-error");
          t.val("");
        }
      });
    }else{
      //console.log(t[0].files[0].size);
      t.siblings(".inputforupload-tip").html("Форматы: .jpg .jpeg .png; Размер не более 10 Мб");
      t.siblings(".inputforupload-tip").addClass("inputforupload-error");
      t.val("");
    }
  }
});

Обработчик PHP внизу статьи. Подходит для всех вариантов.

Скрыть

Обработчик PHP для всех вышеописанных вариантов:

Содержимое скрыто под спойлер. Показать
<?php
$secret_foldername = "form_upload_files_7y3t789h";
$sitename = $_SERVER['HTTP_HOST'];
// Загрузка фйлов на сервер
if(isset($_GET['files'])){
  $data = array();
  $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  $randomString = '';
  for ($i = 0; $i < 5; $i++) {
      $randomString .= $characters[rand(0, strlen($characters) - 1)];
  }
  $error = false;
  $files = array();
  $dateForFile = date('Y-m-d-H-i-s');
  $uploaddir = $_SERVER['DOCUMENT_ROOT'].'/'.$secret_foldername.'/';
  
  if (!file_exists($uploaddir)) {
    if(!mkdir($uploaddir, 0755, true)){
      $error = "Ошибка создания папки \"".$uploaddir."\". Код - dir01";
    }
  }
  if(!$error){
    foreach($_FILES as $file){
      $path_info = pathinfo($file['name']);
      $onlyfilename = $dateForFile."-".$randomString."-".basename($file['tmp_name'].".".$path_info['extension']);
      $newfilename = $uploaddir.$onlyfilename;
        
      if(move_uploaded_file($file['tmp_name'], $newfilename)){
        $files[] = $uploaddir .$file['name'];
      }
      else{
        switch($file['error']){
          case 0: $error = "Произошла ошибка. Код - 0"; break;
          case 1: $error = "Ошибка. Превышен лимит размера файла. Код - 1"; break;
          case 2: $error = "Ошибка. Превышен лимит размера файла. Код - 2"; break;
          case 3: $error = "Произошла ошибка при загрузке файла. Код - 3"; break;
          case 4: $error = "Произошла ошибка при загрузке файла. Код - 4"; break;
          case 5: $error = "Произошла ошибка при загрузке файла. Код - 5"; break;
          case 6: $error = "Произошла ошибка при загрузке файла. Код - 6"; break;
          case 7: $error = "Произошла ошибка при загрузке файла. Код - 7"; break;
          case 8: $error = "Произошла ошибка при загрузке файла. Код - 8"; break;
        }
      }
    }
  }
  $data = ($error) ? array('error' => $error) : array('files' => $files, 'filename' => $newfilename,'onlyfilename' => $onlyfilename, 'extension' => $path_info['extension']);
  echo json_encode($data);
}


// Обработчик запроса AJAX при отправке формы
if($_SERVER['REQUEST_METHOD'] == 'POST' AND !empty($_POST['data1'])){
    $key = json_decode($_POST['data1'], true);
    if($key){
    $message = "<h1>".strip_tags($key['header'])."</h1>\r\n";
    $message .= "<table><tbody>";
    foreach($key['fields'] as $v){
      if(!$v['title']){
        continue;
      }
      if(stristr($v['title'], 'Файл')){
        if(!empty($v['value'])){
          $message .= "<tr><td><strong>".strip_tags($v['title']).": <strong></td><td><a href='http://".$sitename."/".$secret_foldername."/".strip_tags($v['value'])."'>Скачать файл</a></td></tr>\r\n";
        }
      }else{
        $message .= "<tr><td><strong>".strip_tags($v['title']).":<strong> </td><td>".strip_tags($v['value'])."</td></tr>\r\n";
      }
    }
    $message .= "</tbody></table>";
    }else{
        $message = "<h1>".strip_tags($key['header'])."</h1>\r\n";
        $message .= "<p>На сервере не работает json_decode. Возможно проблема связана с настройкой PHP: MagicQuotes. Необходимо обратиться в техподдержку хостинга.<br>А пока данные в сыром виде:</p>\r\n";
        $message .= $_POST['data1'];
    }
    $to      = 'info@'.$sitename; // Укажите свой почтовый ящик
    $subject = 'Заявка с сайта '.$sitename;
    $subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
    $headers  = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type: text/html; charset=utf-8" . "\r\n";
    $headers .= "From: Wincub informer <info@".$sitename.">". "\r\n";
    
    if (mail($to, $subject, $message, $headers)){
      echo '{"result":"Спасибо! Ваша заявка принята!"}';
    }
    else{
      echo '{"result":"Ошибка.."}';
    }
}else{
//Генерация формы:

// ПРИМЕР ВЫЗОВА:
// <a href="js/mail.php?formtitle=Заказать%20звонок&formsubmit=Жду%20звонка!&mailtitle=Заказать%20звонок&postfix_class=yoyo" class="call_back_form_trigger">Заказать звонок</a>
// <script>$('.call_back_form_trigger').fancybox({type: 'ajax'});</script>

  // можно отдавать разные варианты формы if($_GET['fbtype'] == 1){}
  //Настройки формы:
  $formtitle = "Заказать обратный звонок";
  $formsubmit = "Отправить";
  $mailtitle = "Контактная информация";
  $postfix_class = "FBajaxloadedform";
  
  if(!empty($_GET['formtitle'])){$formtitle = strip_tags($_GET['formtitle']);}
  if(!empty($_GET['formsubmit'])){$formsubmit = strip_tags($_GET['formsubmit']);}
  if(!empty($_GET['mailtitle'])){$mailtitle = strip_tags($_GET['mailtitle']);}
  if(!empty($_GET['postfix_class'])){$postfix_class = strip_tags($_GET['postfix_class']);}
?>
<style>
.feedBackWrapper.<?php echo $postfix_class; ?> {
border: 0;
margin: 0;
padding:0 25px;
}
.feedBackWrapper.<?php echo $postfix_class; ?> table {
    width:100%;
}
.feedBackWrapper.<?php echo $postfix_class; ?> td {
padding: 0;
vertical-align: middle;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .fbw-title {
font-size: 16px;
white-space: nowrap;
padding-right: 10px;
width:150px;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .form-h3 {
text-align: center;
margin-top: 15px;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajaxgo {
padding: 5px 40px;
background: #FFC200;
background: -moz-linear-gradient(top,  #ffd65e 0%, #ffc200 43%, #fcb400 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(43%,#ffc200), color-stop(100%,#fcb400));
background: -webkit-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
background: -o-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
background: -ms-linear-gradient(top,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
background: linear-gradient(to bottom,  #ffd65e 0%,#ffc200 43%,#fcb400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#fcb400',GradientType=0 );
font-size: 18px;
border-radius: 3px;
cursor:pointer;
outline: none;
border:0;
border-bottom: 3px solid #D3A000;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajaxgo:focus {
outline:1px dashed #ccc;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajaxgo:hover {
background: #FFC200;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajaxgo:active {
border: 0;
margin-top: 3px;
outline:none;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajaxgo-wr{
height: 38px;
padding-top:25px;
text-align:center;
margin-bottom: 25px;
position: relative;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .fbw-text{
margin: 6px 0;
box-sizing: border-box;
padding: 6px;
border: 1px solid #ccc;
outline: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
width:100%;
font-family:inherit;
}
.feedBackWrapper.<?php echo $postfix_class; ?> .fbw-text:focus {
border-color: #66afe9 !important;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,1);
}
.feedBackWrapper.<?php echo $postfix_class; ?> .ajax-trigger {
text-align: center;
padding: 1px;
}
</style>
<div class="feedBackWrapper <?php echo $postfix_class; ?>">
  <h3 class="form-h3"><?php echo $formtitle; ?></h3>
  <table>
    <tbody>
      <tr>
        <td class="fbw-title">Имя<span style="color:red;">*</span>:</td>
        <td><input type="text" placeholder="Имя" class="isrequired fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">Номер телефона<span style="color:red;">*</span>:</td>
        <td><input type="text" placeholder="Телефон" class="isrequired fbw-text form-control"></td>
      </tr>
      <tr>
        <td class="fbw-title">E-mail:</td>
        <td><input type="text" placeholder="E-mail" class="fbw-text form-control"></td>
      </tr>
      <?php /*
      <tr>
        <td class="fbw-title">Цвет:</td>
        <td><label><input type="checkbox" placeholder="Цвет" title="Синий">Синий</label><label><input type="checkbox" placeholder="Цвет" title="Зеленый">Зеленый</label><label><input type="checkbox" placeholder="Цвет" title="Красный">Красный</label></td>
      </tr>
      <tr>
        <td class="fbw-title">Вкус:</td>
        <td><label><input type="radio" name='radio1' placeholder="Вкус" title="Сладкий">Сладкий</label><label><input type="radio" name='radio1' placeholder="Вкус" title="Соленый">Соленый</label><label><input type="radio" name='radio1' placeholder="Вкус" title="Горький">Горький</label></td>
      </tr>
      */ ?>
      <tr>
        <td class="fbw-title">Комментарий:</td>
        <td><textarea placeholder="Комментарий" class="fbw-text form-control"></textarea></td>
      </tr>
    </tbody>
  </table>
  <div class="ajax-trigger">
    <button class="ajaxgo <?php echo $postfix_class; ?>"><?php echo $formsubmit; ?></button>
    <div class="successmsg"></div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(document.body).on("click", ".ajaxgo.<?php echo $postfix_class; ?>", send<?php echo $postfix_class; ?>);
$(document.body).on("focus", "input", function(){$(this).css("border","");});
function send<?php echo $postfix_class; ?>(){
  var wr = $(this).parents(".feedBackWrapper.<?php echo $postfix_class; ?>");
  var validate = true;
  wr.find(".isrequired").each(function(){
    if(!$(this).val().length){validate = false; $(this).css("border","1px solid #D22")}
  });
  if (validate){
    var need = {};
    need['header'] = "<?php echo $mailtitle; ?>";
    need['fields'] = [];
    wr.find("input, select, textarea").each(function(){
      var fieldElement = {};
      //Checkbox, Radio
      //Ожидаемая семантика: <input type="checkbox" placeholder="Цвет" title="Синий"> / <input type="radio" name='radio1' placeholder="Вкус" title="Сладкий">
      if($(this).attr('type') == 'checkbox' || $(this).attr('type') == 'radio'){
        if($(this).prop('checked') == true){
          fieldElement['type'] = $(this).attr("type");
          fieldElement['title'] = $(this).attr("placeholder");
          fieldElement['value'] = $(this).attr("title");
          need['fields'][need['fields'].length] = fieldElement;
        }
        return true;
      }
      fieldElement['type'] = $(this).attr("type") || 'text';
      fieldElement['title'] = $(this).attr("placeholder");
      fieldElement['value'] = $(this).val();
      need['fields'][need['fields'].length] = fieldElement;
    });
    output = JSON.stringify(need);
    $.ajax({
      type: "POST",
      data: {data1: output},
      url:'<?php echo $_SERVER['PHP_SELF']; ?>',
      dataType:'json',
      success: function(data){
        wr.find(".ajaxgo").hide();
        wr.find(".successmsg").html(data.result);
        wr.find(".successmsg").fadeIn(300).css("display","inline-block");
      },
      error: function (xhr, ajaxOptions, thrownError){
        console.log(xhr.responseText);
      }
    });
  }
}
});
</script>
<?php
 }
?>
Скрыть

Похожие статьи

jQuery.Maskedinput js - документация на русском с примерами

Маска для ввода телефона +7(___)___-__-__

Отключить автозаполнение input

Настройка Webpack - несколько точек входа и разделение на чанки

Пример перевода с помощью Yandex Translate API

Универсальная форма обратной связи — feedBackForm

Как контролировать кэш CSS и скриптов

Слайдер Slick slider в контенте ресурса

Как поменять версию PHP, используемую в командной строке на Windows

Как поменять язык в Faker

Транслитерация URL в Laravel. Примеры str_slug()

Простое логирование

Курсы валют с cbr.ru на PHP

Как сделать переменную не реактивной в Vue

Bxslider отображение картинок после полной загрузки слайдера

Разные фишки, заготовки

Получить вложенный массив из плоского

Laravel Excel - Базовый экспорт

Namespace на примерах - Как понять пространства имен в PHP

Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

Как сделать middleware в Laravel 6 - простой пример

Примеры работы с API

Как обработать POST данные в PHP

Примеры использования Vuex

Выполнить код после асинхронного запроса axios во Vue

Загрузить файл для постобработки

Как вызвать метод из другого компонента Vue

Заготовки JavaScript

Получить время выполнения PHP скрипта. Решение в 3 строки кода

Получить курсы валют с cbr.ru на PHP с кэшированием результатов

Экспорт маршрутов из Laravel в JSON файл

Связать значения инпутов через jQuery (биндинг)

Рекурсивно вложенный компонент Vue

Фиксированная сортировка массива на основе хэша

Настроить Axios чтобы принимал только JSON

Вывести список всех файлов на сервере (и размер файла)

Использование async/await в JavaScript с Vue.js

Js-beautify - библиотека для форматирования HTML, CSS, JS

Использование Promise.all с примерами на VueJs

Создание цикла асинхронных вызовов во Vue.js

Манипуляция с HTML во Vue.js и cash-dom

Наш сайт использует куки, нажмите «ОК» если вы не против
OK