Добро пожаловать в наше сообщество!
skripters.net - небольшой форум для вэб-мастеров на котором вам предоставляется широкий выбор скриптов, плагинов, стилей и много чего еще для запуска собственного проекта: интернет-магазина, форума, корпоративного сайта, продающего лендинга. Здесь вы найдете много решений по заработку в интернет. Сможете продать или купить нужное вам решение для старта своего веб-проекта. Опытные пользователи проконсультируют вас если вы вначале пути, подскажут как лучше, помогут в установке и настройке.
1. Для регистрации доступна только одна почтовая служба - GMAIL
2. Если после регистрации вы не получили письмо - проверьте папку СПАМ
Статус
В этой теме нельзя размещать новые ответы.

ⓜⓨⓤⓢⓛⓘ

Модератор
Developer
Регист
21 Май 2018
Сообщения
658
Реакции
659
Помогите пожалуйста, нужна форма для сайта (нашел), но нужно немного под себя сделать!

Снимок.PNG

Вот форма:

HTML:
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flat Modal Window</title>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- КНОПКА-->
<div class="page-wrapper">
  <a class="btn trigger" href="#">Открыть форму</a>
</div>

<!-- МОДАЛЬНОЕ ОКНО-->
<div class="modal-wrapper">
  <div class="head"></div>
  <div class="modal">
    <div class="content">
        <div class="good-job">
          <p style="padding: 20px 0 0;color: gray;margin: 0;font-size: 14px;">ОСТАВЬТЕ СВОИ ДАННЫЕ И МЫ С ВАМИ СВЯЖЕМСЯ</p>
          <div class="text">
            <p>и мы удешевим решение вашей задачи без потери качества</p>
          </div>
          <form class="form_modal_window" action="">
            <input type="text" name="name" placeholder="Ваше имя" required>
            <input type="email" name="email" placeholder="Ваш email" required>
            <input type="phone" name="phone" placeholder="Ваш телефон" required>
            <input class="form_sub" name="sub" type="submit" value="ОТПРАВИТЬ">
          </form>
          <div id="erconts"></div>
        </div>
    </div>
  </div>
</div>

<!--СКРИПТ ДЛЯ МОДАЛЬНОГО ОКНА-->
  <script  src="js/index.js"></script>

<!--AJAX СКРИПТ ДЛЯ ФОРМЫ-->
  <script>
      $(document).ready(function() {
          $('.form_sub').click(function(){
              $.ajax({
                  type: "POST", //указываем что метод отправки POST
                  url:"form.php", // указываем адрес обработчика
                  data:$('.form_modal_window').serialize(), //указываем данные которые будут передаваться обработчику
                /* Мы указываем id формы - $('#callbacks'), и методом serialize() забираем значения всех полей. */
                  error:function(){$("#erconts").html("Произошла ошибка!");},
                /* если произойдет ошибка в элементе с id erconts выведется сообщение*/
                  beforeSend: function() {
                      $("#erconts").html("<p style='color: orangered;'>Отправляем данные...</p>");
                  },
                  success: function(result){
                    /* В случае удачной обработки и отправки выполнится следующий код*/
                      $('#erconts').html(result);
                      checkThis();
                  }
              });
              return false;
          });
      });
  </script>
</body>
</html>

CSS:
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.page-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
}
a.btn {
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 0;
  background: #e2525c;
}
.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background: rgba(0, 0, 0, 0.5);
}
.modal-wrapper.open {
  opacity: 1;
  visibility: visible;
}
.modal {
  width: 500px;
  display: block;
  margin: 30% 0 0 -250px;
  position: relative;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: #fafafa;
}
.modal-wrapper.open .modal {
  margin-top: -200px;
  opacity: 1;
}
.head{
  width: 100%;
  height: 100%;
  margin: 0 0 14px;
  padding: 5px 30px;
  overflow: hidden;
  position: absolute;
}
.btn-close {
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;
}
.modal .content {
  padding: 0 0 20px 0;
}
.good-job {
  text-align: center;
  font-family: 'Montserrat', Arial,       Helvetica, sans-serif;
  color: #e2525c;
}
.good-job .fa-thumbs-o-up {
  font-size: 60px;
}
.good-job h1 {
  font-size: 45px;
}
.form_modal_window{
  max-width: 70%;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.modal .content .text{
  background: url("../Bright-Purple-Wallpaper-59-images.jpg");
  color: #fff;
  padding: 10px;
  margin: 20px 0;
}
.modal .content .text h2{
  margin:0;
  font-size: 35px;
}
.modal .content .text p{
  margin:0;
  font-size: 14px;
}
.modal-wrapper{
  margin: 0 0 20px 0;
}
.modal .content form input {
  color: #000;
  padding: 15px;
  border: none;
  margin-bottom: 15px;
  box-shadow: 0px 1px 3px 1px #e9e9e9;
  font-size: 15px;
}
.modal .content form input[type=submit]{
  padding: 10px 40px;
  max-width: 200px;
  margin: auto;
  border-radius: 54px;
  color: #fff;
  background: #f7b231;
  background: -moz-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: -webkit-linear-gradient(top, #ffc281 0%, #ff8c97 100%);
  background: linear-gradient(to bottom, #ffc281 0%, #ff8c97 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-yellow', endColorstr='$color-pink', GradientType=0);
  font-size: 15px;
  text-shadow: 0px 0px 6px #e54242;
  display: inline-block;
  border: none;
  outline: none;
}

JavaScript:
$( document ).ready(function() {
  $('.trigger').on('click', function() {
      $('.modal-wrapper').toggleClass('open');
      $('.page-wrapper').toggleClass('blur-it');
      return false;
  });
  $('.head').on('click', function (){
      $('.modal-wrapper').removeClass('open');
  })
});

PHP:
<?php
/*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["phone"];


/*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
if($name=="" or $email=="" or $tel==""){
    echo "Заполните все поля";
}

else{
    /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
    $to = "[email protected]"; /* Адрес, куда отправляем письма*/
    $subject = "Письмо с обратной связи"; /*Тема письма*/
    $headers = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: <[email protected]>\r\n";/*ОТ КОГО*/

    /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
    $message .= "Имя пользователя: ".$name."\n";
    $message .= "Почта: ".$email."\n";
    $message .= "Телефон: ".$tel."\n";

    /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/
    //print_r($message);

    $send = mail($to, $subject, $message, $headers);

    /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
    if ($send == "true")
    {
        echo "<p style='color: green;'>Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n</p>";
    }
    /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
    else
    {
        echo "<p style='color: red;'>Не удалось отправить, попробуйте снова!</p>";
    }
}
?>

Что нужно от формы:
- Убрать полностью е-маил с обработчика php и с html - что бы было только "Имя и телефон".
- И сделать так что бы "кнопка вызова формы" работала с любой кнопки:
К примеру у меня есть кнопка "<div class="zakaz_zvonka">Заказать звонок</div>" я ее закрыл в доп. тег (Я так понял) в <div class="page-wrapper">здесь моя кнопка </div>и форма будет работать.
- И отправка без перезагрузки страницы при возможности - как организовать, так как в демо при отправке этой формы страница просто перезагружается
 

xproton

Пользователь
Регист
16 Ноя 2022
Сообщения
0
Реакции
0
PHP:
$("#editCommit" ).on( "click", function( event ) { 



    $.ajax({

        async: true,

        type: "GET",

         url: 'getResults2.php?ID=<?php echo $IDD;? >',

        dataType: "json",

        success: function (json) {

            let person = new Object();

          person. ONT = json[0];

            createJSTrees(person);

            console.log(person);

        },

        error: function (xhr, ajaxOptions, thrownError) {

            alert(xhr.status);

            alert(thrownError);

        }

    });







         });
 

bargas

Пользователь
Регист
21 Ноя 2022
Сообщения
5
Реакции
1
Держи

HTML:
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flat Modal Window</title>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- КНОПКА-->
<div class="page-wrapper">
  <a class="btn trigger" href="#">Открыть форму</a>
</div>

<!-- МОДАЛЬНОЕ ОКНО-->
<div class="modal-wrapper">
  <div class="head"></div>
  <div class="modal">
    <div class="content">
        <div class="good-job">
          <p style="padding: 20px 0 0;color: gray;margin: 0;font-size: 14px;">ОСТАВЬТЕ СВОИ ДАННЫЕ И МЫ С ВАМИ СВЯЖЕМСЯ</p>
          <div class="text">
            <p>и мы удешевим решение вашей задачи без потери качества</p>
          </div>
          <form class="form_modal_window" action="">
            <input type="text" name="name" placeholder="Ваше имя" required>
            <input type="phone" name="phone" placeholder="Ваш телефон" required>
            <input class="form_sub" name="sub" type="submit" value="ОТПРАВИТЬ">
          </form>
          <div id="erconts"></div>
        </div>
    </div>
  </div>
</div>

<!--СКРИПТ ДЛЯ МОДАЛЬНОГО ОКНА-->
  <script  src="js/index.js"></script>

<!--AJAX СКРИПТ ДЛЯ ФОРМЫ-->
  <script>
      $(document).ready(function() {
          $('.form_sub').click(function(){
              $.ajax({
                  type: "POST", //указываем что метод отправки POST
                  url:"form.php", // указываем адрес обработчика
                  data:$('.form_modal_window').serialize(), //указываем данные которые будут передаваться обработчику
                /* Мы указываем id формы - $('#callbacks'), и методом serialize() забираем значения всех полей. */
                  error:function(){$("#erconts").html("Произошла ошибка!");},
                /* если произойдет ошибка в элементе с id erconts выведется сообщение*/
                  beforeSend: function() {
                      $("#erconts").html("<p style='color: orangered;'>Отправляем данные...</p>");
                  },
                  success: function(result){
                    /* В случае удачной обработки и отправки выполнится следующий код*/
                      $('#erconts').html(result);
                      checkThis();
                  }
              });
              return false;
          });
      });
  </script>
</body>
</html>

PHP:
<?php
/*ПОМЕЩАЕМ ДАННЫЕ ИЗ ПОЛЕЙ В ПЕРЕМЕННЫЕ*/
$name = $_POST["name"];
$tel = $_POST["phone"];


/*ЗДЕСЬ ПРОВЕРЯЕМ ЕСЛИ ХОТЯ БЫ ОДНО ИЗ ПОЛЕЙ НЕ ЗАПОЛНЕНО МЫ ВОЗВРАЩАЕМ СООБЩЕНИЕ*/
if($name=="" or $tel==""){
    echo "Заполните все поля";
}

else{
    /*ЕСЛИ ВСЕ ПОЛЯ ЗАПОЛНЕНЫ НАЧИНАЕМ СОБИРАТЬ ДАННЫЕ ДЛЯ ОТПРАВКИ*/
    $to = "[email protected]"; /* Адрес, куда отправляем письма*/
    $subject = "Письмо с обратной связи"; /*Тема письма*/
    $headers = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: <[email protected]>\r\n";/*ОТ КОГО*/

    /*ВО ВНУТРЬ ПЕРЕМЕННОЙ $message ЗАПИСЫВАЕМ ДАННЫЕ ИЗ ПОЛЕЙ */
    $message .= "Имя пользователя: ".$name."\n";
    $message .= "Телефон: ".$tel."\n";

    /*ДЛЯ ОТЛАДКИ ВЫ МОЖЕТЕ ПРОВЕРИТЬ ПРАВИЛЬНО ЛИ ЗАПИСАЛИCM ДАННЫЕ ИЗ ПОЛЕЙ*/
    //print_r($message);

    $send = mail($to, $subject, $message, $headers);

    /*ЕСЛИ ПИСЬМО ОТПРАВЛЕНО УСПЕШНО ВЫВОДИМ СООБЩЕНИЕ*/
    if ($send == "true")
    {
        echo "<p style='color: green;'>Ваше сообщение отправлено. Мы ответим вам в ближайшее время.\r\n</p>";
    }
    /*ЕСЛИ ПИСЬМО НЕ УДАЛОСЬ ОТПРАВИТЬ ВЫВОДИМ СООБЩЕНИЕ ОБ ОШИБКЕ*/
    else
    {
        echo "<p style='color: red;'>Не удалось отправить, попробуйте снова!</p>";
    }
}
?>
 
  • Мне нравится
Реакции: MRX
Статус
В этой теме нельзя размещать новые ответы.
Сверху