Универсальная форма обратной связи — 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
 }
?>

Скрыть

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

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

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

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

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

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

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

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

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

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

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

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