Так выглядит форма:
HTML код формы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="forma"> <div class="form-at"> <div class="validate-input-at w-50" data-validate="Обязательное поле"> <input class="input-at" type="text" name="name-at" placeholder="Ваше имя" /> <span class="focus-input-at"></span> </div> <div class="validate-input-at w-50" data-validate="Обязательное поле"> <input class="input-at" type="text" name="email-at" placeholder="Ваш телефон или email" /> <span class="focus-input-at"></span> </div> <div class="validate-input-at" data-validate="Обязательное поле"> <textarea class="input-at" name="message-at" placeholder="Ваше сообщение"></textarea> <span class="focus-input-at"></span> </div> <input checked="checked" class="input-at" id="checkbox-at" type="checkbox" name="checkbox-at" onchange="document.getElementById('submit-at').disabled = !this.checked;" /> <label for="checkbox-at"> Настоящим подтверждаю, что я ознакомлен и согласен с <a href="#rules">пользовательским соглашением</a> </label> <input type="hidden" name="subject-at" value="Тема формы"> <button id="submit-at" class="form-at-btn">Отправить</button> </div> <div class="result-at"></div> </div> |
Немного о коде:
- Мы вообще не используем тег
<form>, чтобы меньше привлекать внимание спамботов. - По умолчанию галочка с соглашением включена, чтобы не смущать посетителя неактивной кнопкой отправки. Если нужно сделать наоборот, то с чекбокса нужно удалить
checked="checked", а на кнопку отправки добавитьdisabled="disabled". Подробнее об этой галочке можно поглядеть тут. Если она и вовсе не нужна, просто удалите чекбокс и его лабел из кода. - Атрибут
data-validateвыводит текст ошибки, если поле не заполнено. - Если поле для ввода не обязательное, используется класс
no-validate-input-atвместоvalidate-input-at. В PHP нужно убрать проверку этого поля. - Блок
result-atнужен для вывода сообщений после обработки формы сервером. - Скрытое поле
subject-atнужно чтобы обозначить форму, если она используется на разных страницах. Например, на главной странице это будет одно значение, а в услугах другое.
CSS код формы:
|
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
::-webkit-input-placeholder {font-size: 16px;} ::-moz-placeholder {font-size: 16px;} :-moz-placeholder {font-size: 16px;} :-ms-input-placeholder {font-size: 16px;} :focus::-webkit-input-placeholder {opacity: 0;} :focus::-moz-placeholder {opacity: 0;} :focus:-moz-placeholder {opacity: 0;} :focus:-ms-input-placeholder {opacity: 0;} .form-at { width: 100%; padding: 20px; box-sizing: border-box; overflow: hidden; font-size: 0; letter-spacing: 0; background: #f9f9f9; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 10px 18px rgba(0,0,0,0.2); } .form-at * { box-sizing: border-box; font-family: Verdana, sans-serif; } .validate-input-at, .no-validate-input-at { width: 100%; position: relative; background-color: #fff; border: 2px solid #BFE2FF; border-radius: 2px; margin-bottom: 20px; } .validate-input-at.w-50, .no-validate-input-at.w-50 { width: calc(50% - 10px); display: inline-block; } .validate-input-at.w-50:first-child, .no-validate-input-at.w-50:first-child { margin-right: 20px; } .input-at { display: block; width: 100%; background: transparent; color: #000; } input.input-at { height: 50px; padding: 0 20px 0 20px; font-size: 16px; outline: none; border: none; } textarea.input-at { min-height: 170px; padding: 18px 20px; font-size: 16px; line-height: 22px; outline: none; border: none; resize: none; } textarea.input-at:focus, input.input-at:focus { border-color: transparent; } .focus-input-at { position: absolute; display: block; width: calc(100% + 2px); height: calc(100% + 2px); top: -1px; left: -1px; pointer-events: none; border: 2px solid #337AB7; border-radius: 2px; visibility: hidden; opacity: 0; transition: all 0.4s; transform: scaleX(1.1) scaleY(1.3); } .input-at:focus + .focus-input-at { visibility: visible; opacity: 1; transform: scale(1); } .form-at-btn { position: relative; display: block; padding: 0 40px; height: 50px; background-color: #337AB7; border-radius: 2px; font-size: 16px; font-weight: bold; color: #fff; text-transform: uppercase; line-height: 1.2; transition: all 0.4s; margin: 0 auto; outline: none; border: none; cursor: pointer; } .form-at-btn:hover { background-color: #333333; } .form-at-btn[disabled] { opacity: .6; cursor: not-allowed; } .alert-validate::before { content: attr(data-validate); position: absolute; max-width: 70%; background-color: #fff; border: 1px solid #c80000; border-radius: 2px; padding: 4px 25px 4px 10px; top: 50%; transform: translateY(-50%); right: 12px; pointer-events: none; color: #c80000; font-size: 13px; line-height: 1.4; text-align: left; visibility: hidden; opacity: 0; transition: opacity 0.4s; } .alert-validate::after { content: "\f129"; font-family: "FontAwesome"; display: block; position: absolute; color: #c80000; font-size: 18px; font-weight: bold; top: 50%; transform: translateY(-50%); right: 22px; } .alert-validate:hover:before { visibility: visible; opacity: 1; } .error-at { color: red; padding: 10px 0; } .success-at { color: green; font-size: 28px; padding: 20px 0; text-align: center; } .form-at input[type=checkbox] { display:none; } .form-at input[type=checkbox] + label { display: block; position: relative; margin: 0 0 20px 34px; font-size: 13px; line-height: 24px; color: #333333; } .form-at input[type=checkbox] + label:before { box-sizing: border-box; position: absolute; content: ''; width: 26px; height: 26px; line-height: 22px; left: -34px; border: 2px solid #BFE2FF; border-radius: 2px; } .form-at input[type=checkbox]:checked + label:before{ content: '\2714'; color:#337AB7; font-size: 14px; text-align: center; font-weight: bold; border: 2px solid #337AB7; } @media (max-width: 768px) { .validate-input-at.w-50 { width: 100%; } .validate-input-at.w-50:first-child { margin-right: 0; } .alert-validate::before { visibility: visible; opacity: 1; } } |
Немного о коде:
- Если на сайте не используется шрифт FontAwesome, то у класса
.alert-validate::afterнужно заменитьcontent: "\f129"на крестикcontent: "\2718"или другой символ. И соотв. удалить сам шрифтfont-family: "FontAwesome"
JS код формы (jQuery):
|
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 51 52 53 54 55 56 57 |
$(function() { $('.forma').each(function() { var $frm = $(this); var input = $(this).find('.validate-input-at .input-at'); var butsend = $(this).find('.form-at-btn'); butsend.on('click',function(){ var check = true; for(var i=0; i<input.length; i++) { if(validate(input[i]) == false){ showValidate(input[i]); check=false; } } // Отправка формы if (check == true) { $.post("/send.php", $frm.find(".form-at select, .form-at input, .form-at textarea").serialize(), function(data){ if(data.frm_check == 'error'){ $frm.find(".result-at").html("<div class='error-at'>Ошибка: " + data.msg + "</div>"); } else { $frm.find(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); $frm.find(".form-at").fadeOut(500); $frm.find(".input-at").val(""); } }, "json"); return false; } }); $('.form-at .input-at').each(function(){ $(this).focus(function(){ hideValidate(this); }); }); }); function validate(input) { /* Если нужно проверять валидность почты, раскомментируйте строчки ниже */ /* if($(input).attr('type') == 'email' || $(input).attr('name') == 'email-at') { if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) { return false; } } */ if($(input).val().trim() == ''){ return false; } } function showValidate(input) { var thisAlert = $(input).parent(); $(thisAlert).addClass('alert-validate'); } function hideValidate(input) { var thisAlert = $(input).parent(); $(thisAlert).removeClass('alert-validate'); } }); |
Немного о коде:
- /send.php - путь к файлу, который будет отправлять почту.
- Если поле
email-atиспользуется только для почты, нужно раскомментировать строку, чтобы проверять его валидность.
PHP код формы (send.php):
|
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 |
<?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $to = "vasha@pochta.ru"; // Куда идет письмо $from = "info@my-site.ru"; // От кого идет письмо $name = $_POST['name-at']; $email = $_POST['email-at']; $message = $_POST['message-at']; $subject = $_POST['subject-at']; $return_arr = array(); $return_arr["frm_check"] = ''; // Еще раз проверим заполненные поля формы. // Эту проверку можно удалить или удалить проверку на JS if($name=="" || $email=="" || $message=="" || $subject=="") { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Пожалуйста, заполните все поля!"; } // Проверка на плохие слова. Если не мучают хулиганы, можно ее удалить. $badwords = array('предложение', 'купить', 'раскрутка'); $banstring = ($message != str_ireplace($badwords,"XX",$message))? true: false; if ($banstring) { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Есть запрещенные слова"; } if ($return_arr["frm_check"] != 'error') { $subject = "From my-site.ru: $subject"; $message = "Сообщение от " .$name. "\n Контакт: " .$email. "\n Сообщение:\n" .$message; $headers = "Content-Type: text/plain; charset=utf-8\r\n"; $headers .= "From: $from\r\n"; $headers .= "Reply-To: $from\r\n"; if (!mail($to, $subject, $message, $headers)) { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Сообщение не отправлено, ошибка почтового сервера!"; } } echo json_encode($return_arr); } ?> |
Немного о коде:
- Все основные моменты описаны в комментариях кода
- Почту, которая числится отправителем, лучше поставить свою и занести ее в белый список почтовика.
- Я поставил 1 проверку на запрещенные слова, но если с формы будут идти нежелательные письма, такие проверки можно добавить: поставить капчу, блокировать по IP или кукам и т.д. Как выглядит проверка на слова, можно увидеть вписав в сообщение формы "предложение", "купить" или "раскрутка".
- При необходимости, результаты этих проверок можно не показывать, а сообщать что форма отправлена, соотв. не отправляя письмо на почту.
Обратите внимание:
Если возникают проблемы с отправкой почты на некоторые ящики или из-за ограничений хостинга, то вместо функции mail, лучше использовать профессиональное решение, такое как PHPMailer
Добрый день, сообщения не приходят,что надо поменять в коде(HTML)?
Может много причин быть, начиная от ошибок каких то, и заканчивая попаданием почты в спам или вовсе отключенной функцией mail у хостера.
Как сделать, чтобы при начале ввода символов в поле (например, email), его границы (border) становились красного цвета, а при правильном написании (согласно условиям валидации), принимали зелёный цвет?
И, по поводу цели для Яндекс Метрики, в строке
yaCounterNNNNNNNNNNN.reachGoal('name');заменить NNNNNNNNNNN на номер счётчика?
С целью метрики, вроде бы разобрался. Вдруг, кому поможет:
В Яндекс Метрике выбираем
«Тип условия» — JavaScritp-событие
Идентификатор цели — «совпадает», и придумаваем произвольное значение на латинице
Полученный код цели для сайта копируем и вставляем эту строку в файл JavaScript формы после строчек:
$frm.find(".form-at").fadeOut(500); $frm.find(".input-at").val("");Здравия!
Благодарю за форму!
Может кто-то уже сталкивался с проблемой при использовании сетки bootstrap...
Не получается вставить в одну строку и форму, и ещё содержимое одной колонки.
Разделение:
<div class="container"> <div class="row"> <div class="col-12 col-lg-6"> HTML—код Формы обратной связи </div> <div class="col-12 col-lg-6"> HTML—код Кастомного текста </div> </div> </div>Проблема в том, что колонки отображаются не в одной строке, а одна над другой. И, не важно, до каких размеров уменьшаются колонки (например, одна col-4, а другая col-8) — результат прежний.
«Ложная тревога» — сам косяка упорол (лишний тег проглядел), и получил 4 часа мучений (х_Х)
Как реализовано??? (Без E-mail)
Проверка отправки комментария без E-mail
Всё очень здорово, письмо отправляется, но не приходит. А если раскомментить проверку на запрещённые слова, то вообще не отправляет письмо, да и проверка не срабатывает. Жаль.
четко!
Спасибо!
Александр, доброго времени суток! Подскажите пожалуйста в чем может быть проблема, я скопировал весь код для СТИЛИЗОВАННОЙ РАБОЧЕЙ ФОРМЫ ОБРАТНОЙ СВЯЗИ, и установил себе на сайт, также изменил поля получателя и отправителя. Поместил html код в форму модального окна и возникли такие проблемы: 1. После нажатия на кнопку "Отправить" модальное окно не закрывается. 2. Письмо с данными на почту не приходит. Подскажите в чем может быть проблема, в какую сторону копать?
Модальное окно и не должно закрываться.
Пустая форма при отправке выдает ошибку, что поля не заполнены, а с заполненными очищается и закрываться?
Если да, то все работает, просто письма не приходят или идут в спам.
Ставьте вторую переменную, например:
И внизу где отправка:
Добрый день!
Как изменить код что бы сообщения отправлялись на несколько почтовых ящиков?
Александр, добрый день!
Разобрался по мере сил с хотелками, остается только отшлифовать внешний вид...
Есть в правом верхнем углу КРАСНЫЙ КРЕСТИК, который закрывает форму также, как и нажатие мыши вне формы.
Проблемы были в корректности вивисекции при сращивании ежа и ужа, взял модальное окно, на которое тыкал пальцем клиент и срастил нечто из трех разных возможностей, зато работает! Клиент никак не хотел окно во весь экран с крестиком как вот в этой ветке - https://atuin.ru/blog/prostoe-modalnoe-okno-na-js/
Но вот тот факт, что форма не может быть "очищена" или не автообновляема - по прежнему сильно огорчает
Хотел выложить сборку тут - но нельзя прицепить файлы, можно только нудный и длинный код тестовой странички
в этой форме нет крестиков, который ее закрывает!
А я его вставил просто, по просьбе заказчика
Получилось очень даже интересно
Да и еще, одна светлая мысль вдогонку пришла
У меня вот сейчас на конкретном сайте есть несколько точек притяжения - Обратный звонок - Нужна консультация - Заказ товара и т.п.
Пробовал ставить вариант настраиваемой формы обратной связи, получается ерунда - день-два проработает с выбраными полями:
- обратный звонок - ФИО +телефон
- Консультация - ФИО+телефон+почта
ну и т.д. - но на третий обязательно все слетит и вылезает целый список возможных полей, как страничка лендинга... умучаешься крутить
Вероятность модернизировать эту форму, чтобы на каждый пункт вызов своего окошка получался - имеет место быть?! или все же придется ковырять и скрипт-отправитель и джаву?! а только изменением полей и заглавия уже не обойтись... т.т.т.
Если формы в модальном окне, я делаю 1 окно с пустым заголовком и далее кнопки вида:
где:
data-h - заголовок модального окна
data-description - сообщение, что идет в тему формы
А самая функция openwin примерно такая:
function openwin(el) { $('#offerForm input[name=subject-at]').val(el.dataset.description); $('.htitle').text(el.dataset.h); }Спасибо, это тоже интересно!
Но я не совсем про это
в моем вопросе суть такова - что на каждый интересующий блок - не только своя кнопка ОТПРАВИТЬ, но и сама форма тоже своя, например для ЗВОНКА требуется только ИМЯ+ТЕЛЕФОН+ВРЕМЯ(текстом для прямо сейчас или часами 14:00- т.е. свободный ввод)
для КОНСУЛЬТАЦИИ же важнее именно то, что указано в комби-поле КОНТАКТ (кстати - мегаполезная вещь! когда там или почта или телефон, меньше хлама на экране и можно давать контакт по своему выбору) уже требуется ИМЯ+КОНТАКТ+СООБЩЕНИЕ о сути вопроса, чтобы уже знать о чем пойдет речь
для ЗАКАЗА товара тоже, что и для ЗВОНКА, сообщение там не так важно, хотя можно указать количество
Таким же макаром можно все сделать, через атрибуты.
Это я к тому, чтобы не ставить 10 разных форм в модалки.
Сам не хочу! замумкаешься с индексами и привязками, не дай бог - накосячишь и вовсе не будет работать т.т.т.
Александр, еще вылезла новая "хотелка"
// Функция закрытия модального окна нажатием на кнопку
$(".modal__close").on("click", function() {
$(".modal-overlay").removeClass("modal-overlay_visible");
});
как корректно вставить в скрипт? нахрапиком попробовал - красный крестик в углу появился, но сколько его не тискай - толку ноль!
Добрый день!
Во-первых - огромное спасибо за фундаментальный труд, доступно и внятно изложеный.
Отлично влетает в любое модальное окно и хорошо работает на практике...
Но пару косячков все же нашел (явно не все самостоятельно справятся):
1. $headers .= "From: $from\r\n"; - заменил на более понятную и человекообразную форму "From: My_name|My_company_name<my_site@my_domain.ru>\r\n"; , а то при получении в колонке АВТОР - стоит первая часть электронного адреса только
2. <input type="hidden" name="subject-at" value="Тема формы"> - оно так и приходит, есть смысл поставить комментарий, что можно заменить на НОВАЯ ЗАЯВКА С САЙТА или НОВЫЙ ЗАКАЗ.....
3. Также нет комментария, что сюда:
$to = "vasha@pochta.ru"; // Куда идет письмо
можно/нельзя ставить дополнительные адреса (некоторые заказчики делают разницу между "избыточностью" и "отказоустойчивостью" и почта идет в два адреса в итоге, общий и контрольный
4. И совсем плохо - не рефрешится после удачной отправки. При последующем вызове - выходит со старыми, уже однажды введенными данными... может есть смысл добавить после отправки "отправить еще одно сообщение" или на автомате обновлять при удачной отправке по истечении 4-6 секунд?!
Не понял этот момент, форма очищается и схлопывается.
При обновлении страницы поля остаются чистыми.
Это как раз и задумано, чтобы не было никаких следующих отправок.
В JS это:
$frm.find(".form-at").fadeOut(500); $frm.find(".input-at").val("");Александр!
у нас же простая технология этого процесса ведь
а) однократный вызов на странице - нажал, нас..писал, отправил = пошел на другую страницу
б) многократный вызов на странице (когда это вывод товаров, а не контакты или что-то еще специфическое) - нажал, на...ал, отправил, увидел еще что-то нужное/интересное, снова нажал - а вылезает в данный момент на сайте или те же данные что уже послал, или Ваше сообщение успешно отправлено! - т.е. не обнуляется автоматом при новом вызове, приходится F5 или Ctrl+Shift+R, кому как больше нравится
на странице от 8 до 12 товаров, кнопка везде одна и та же, разумеется в класс добавляю нужность, но неудобно, когда не очищается автоматом.. привычка просто :))
Добрый день!
Почему-то сообщения не отправляются.
сохранил файлы css, js и php как отдельные файлы. Прописал ссылки на них:
Конечно же сохранил в корне сайта файл send.php Однако при нажатии Кнопки ОТПРАВИТЬ ничего тне происходит. Где может быть ьошибка?
В консоле должна быть указана ошибка.
Александр, я не понял...:)
Вы можете "на пальцах" объяснить?
Куда вот это на какую страницу - где сама форма или в style.css ?
И куда JS код самой формы?
Спасибо
С уважением
Сергей
Напишите в ТГ или ВК мне, в коментах такое не рассказать 🙂
Здравствуйте Александр,
Мне очень понравилась Ваша форма, но я настоящий "чайник" :))
Я загрузил все файлы - но я не могу понять как прописать путь в js файлу - и
как его назвать и куда его разместить
Форма смотрится просто замечательно - но при нажатии ничего не происходит
я так понимаю что это из-за js файла
Помогите пожалуйста
Я разместил на тестовой странице - https://www.pcuxolog.ru/1.html
С уважением
Сергей
Точно также, как и стиль вы подключили, только внизу страницы
Или скачать его к себе и подключить оттуда
В этой форме есть один нюанс, не знаю как его убрать. Галочка в checkbox нажимается по всей длине строки от чекбокса. Если знаете, подскажите пожалуйста как решить, что бы галочку можно было поставить только при наведении на квадрат.
И еще, если кому нужно. Что бы при обновлении страницы чекбокс не был активным (без галочки), в строке input нужно поставить autocomplete="off", а в строке с кнопкой написать autocomplete="off" disabled="disabled", тогда и чекбокс будет без галочки и кнопка не активна по умолчанию.
for у label удалите и все.
Не понял. Из этой строки?
<label for="checkbox-at">
Confirm and send
</label>
а что тогда вместо for поставить? Я не особо шарю.
Спасибо.
Спасибо. А то я сайт слепил сам с нуля, а так и остался чайником, почти. 🙂
У меня еще такой вопрос?
Я вставил в форму кнопку добавления файлов, но мне для нее нужно сделать: 1. Что бы можно было отправить только один файл, не больше. 2. Чтобы писалось его название возле кнопки. 3. Ограничить размер скажем в 1Мб. 4. Как защититься от спама? Вообще, и при отправке текстовых сообщений без файлов, но к файлам требование больше, так-как могут забить почтовый ящик и он не будет работать.
Если не сложно, помогите это сделать.
С файлами там не так все просто, проще даже использовать вообще другое решение и другой отправщик, например, PHPMailer
Спасибо, поищу информацию, попробую потестировать через PHPMailer. Не получится, прийдется удалять кнопку.
Здравствуйте, пытаюсь настроить работу телеграмм бота из вашей формы, но упорно ничего не получается. Если отправлять сообщения через браузерную строку, бот все отлично отправляет, а тут прямо затык какой-то, всю голову сломал, спасите пж)
<?php if ($_SERVER['REQUEST_METHOD'] == 'POST') { $to = "vasha@pochta.ru"; // Куда идет письмо $from = "info@my-site.ru"; // От кого идет письмо $name = $_POST['name-at']; $email = $_POST['email-at']; $message = $_POST['message-at']; $subject = $_POST['subject-at']; $return_arr = array(); $return_arr["frm_check"] = ''; // Еще раз проверим заполненные поля формы. // Эту проверку можно удалить или удалить проверку на JS if($name=="" || $email=="" || $message=="" || $subject=="") { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Пожалуйста, заполните все поля!"; } // Проверка на плохие слова. Если не мучают хулиганы, можно ее удалить. $badwords = array('предложение', 'купить', 'раскрутка'); $banstring = ($message != str_ireplace($badwords,"XX",$message))? true: false; if ($banstring) { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Есть запрещенные слова"; if ($return_arr["frm_check"] != 'error') { // Тут отправка на почту, ее заменить на код ниже: $token = "zzzzzzz"; $chat_id = "zzzzzzzz"; $arr = array( 'Тема: ' => $subject, 'Имя: ' => $name, 'Контакт: ' => $email, 'Сообщение: ' => $message ); foreach($arr as $key => $value) { $txt .= "<b>".$key."</b> ".$value."%0A"; }; $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); } } echo json_encode($return_arr); } ?>Все, понял, что сам дурак) вске поправил)
Все здорово получилось, но на php 8 форма не пропадает после нажатия, как можно поправить? Подскажите пожалуйста.
// Отправка формы if (check == true) { $.post("../send.php", $frm.find(".form-at select, .form-at input, .form-at textarea").serialize(), function(data){ if(data.frm_check == 'error'){ $frm.find(".result-at").html("<div class='error-at'>Ошибка: " + data.msg + "</div>"); } else { $frm.find(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); $frm.find(".form-at").fadeOut(500); $frm.find(".input-at").val(""); } }, "json"); return false; } });на PHP8 сейчас нет возможности проверить
Ну и нафиг его, у меня не CMS, на изи перевел PHP на другую версию)
Отлично! Четко и понятно. А так хочется эту форму спрятать в модальное окно. Как это сделать, не подскажете? С фенсибокс, или без него.
Разобрался. создал файл formOS.html, туда перенес всю html разметку формы. Потом импортировал этот файл с формой в модальное окно, описанное у вас же здесь
https://atuin.ru/blog/modalnye-okna-na-css/#close, вставил её там (вариант с <details>) вместо блока <p></p> вот так:
<div class="cmt">
<p>Текст в модальном окне</p> // убрать и заменить на <!--@import "formOS.html"-->
</div>
Работает прекрасно, спасибо!
И все же косяк есть. Если отправить сообщение, то форма сама не закрывается. Если ее закрыть, и снова открыть (что-то хочется добавить в новом сообщении), то появляется снова сообщение: "Ваша форма отправлена". И надо вручную перезагружать станицу, чтобы форма сбросилась в исходное положение.
Потому что в коде это нигде не делается, только очищаются поля. А html элемент details после отправки никак уже не изменяется в коде.
Я, конечно, сделал перезагрузку страницы в JS через 4 секунды после отправки, это не сложно, но это не техничное решение. А как перезапустить форму без перезагрузки страницы?
Это так и задумано, чтобы было меньше желания добавить что то в новом сообщении, а как минимум пришлось перегружать страницу.
После отправки как раз и нужно все менять, как нравится (сейчас форма схлопывается и очищается), можно включить таймер и закрыть через 2 секунды модальное окно или убрать атрибут open у details, и после этого вернуть форму в исходное положение $frm.find(".form-at").show();
Добрый день, почему-то сообщение отправляется только с главной страницы, хотя код стоит общий в подвале на всех страницах. Как думаете, с чем это связано?
Путь к отправщику правильно прописан, от корня?
А так даже не знаю что еще может быть, смотреть нужно
Всё прописал, работает, но единственная проблема использую не локальный сервер, пишет ошибку "Сообщение не отправлено, ошибка почтового сервера!", которую в коде сами прописывали. Это значит не работает функция mail? только через PHPMailer?
Все верно. не работает функция mail
Самый простой вариант, на мой взляд, это PHPMailer
Добрый вечер, форма супер, работает, подскажите пожалуйста, а возможно как то сделать, что бы после отправки просто появлялось сообщение отправлено, и форма сама не исчезала, а через не сколько секунд сама надпись исчезла?
Заменяем:
$frm.find(".form-at").fadeOut(500);На:
setTimeout(function() { $frm.find(".result-at").fadeOut(500); }, 2000);Но в таком варианте можно будет жать кнопку отправить много раз
Спасибо большое, сообщение работает, но не исчезает почему то
Поправил код выше
Теперь сообщение не показывается вообще
Если
$frm.find(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>");стоит, должна показываться
Спасибо вам большое, вы просто мастер, пользуюсь вашим сайтом давно уже, всё работает, успехов вам
Добрый день, письма не приходят на майл... в логах ошибка вот такая
[Wed Jun 29 09:15:51 2022] [warn] [client 178.208.73.8] mod_fcgid: stderr: PHP Notice: Undefined index: frm_check in /home/httpd/vhosts/comilifo.md/httpdocs/send.php on line 23, referer: http://comilifo.md.mcpre.ru/contact.html
Попробуйте ниже
добавить:
Ошибка должна пропасть, но письма вряд ли поэтому не приходят.
Если пользуетесь телеграмом, лучше туда отправку сделать или использовать PHPMailer для отправки.
пользуюсь телеграмом, как это сделать?
if ($return_arr["frm_check"] != 'error') { // Тут отправка на почту, ее заменить на код ниже: $token = ""; $chat_id = ""; $arr = array( 'Тема: ' => $subject, 'Имя: ' => $name, 'Контакт: ' => $email, 'Сообщение: ' => $message ); foreach($arr as $key => $value) { $txt .= "<b>".$key."</b> ".$value."%0A"; }; $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); }Где взять token и chat_id поищите в интернете, там много статей, как сделать телеграм бота.
Сори, все гуд, сам неверно подключил
В css нету класса forma. В связи с чем она отображается не так как на фото
Подскажите. В чем может быть причина. При нажатии на кнопку ничего не происходит. http://valerape.beget.tech/
Сначал пытался вставить в сайт, потом уже просто создал отдельный для настройки. Версии jquery пробовал разные.
Замените
(function ($) {на
$(function() {Или разместите script.js ниже формы
Спасибо. Сместил скрипт в конец и все заработало.
Письма отправляются, но сообщений об отправке нет. РНР8. Как исправить? Спасибо.
Александр, доброго времени суток.
Возможно ли сделать вызов формы при нажатии на кнопку, всплывающим окном, допустим в шапке на сайте кнопка - |Заказать звонок| Посетитель нажимает и тут всплывающее окно. Заполните форму и мы вам перезвоним. В принципе форма у нас есть на сайте всплывающая. Но хотелось бы что бы посетитель мог ввести сообщение.
Приветствую. Друг, вроде всё сделал как ту указал. Но что-то не работает. Жму на отправить и ничего не происходит. Вот тут: ссылка
Подскажи плиз, в чем я не прав?
Нужна библиотека jQuery.
я вставляю код
перед </head> Всёравно не работает. Почта то приходит, но после нажатия кнопки отправить не появляется сообщение об отправке, как у вас. Посоветуйте плиз как подключить библиотеку и какую версию, чтобы работало.
зы: "скрипт" в коде правильно написан, просто ваша форма комментария не пускает отправить, поэтому тут заменил.
Завтра днем погляжу, отпишу что не так, хорошо?
В PHP коде эта строчка есть?
echo json_encode($return_arr);
да, конечно есть. Код в точности скопирован ваш, только заменен email.
Даже не знаю.. что то в php файле скорее всего.
На ошибку форма срабатывает, а на успех - нет
я прошу прощения, что надоедаю, но может ещё будут мысли почему не работает? очень уж понравился ваш подход к формам.
Смотрите PHP, что то там.
Я сейчас взял 1 в 1 вашу форму и 1 в 1 свой PHP-файл отправщик после отправления, форма скрылась и появилось - Ваше сообщение отправлено!
Заметил вот что:
У меня на сервере стоит PHP 7.3.33 и форма не работает (письмо отправляется но после отправки не появляется сообщение об успешной отправке).
Я поменял PHP на версию 7.4.26 и форма заработала нормально (появляется сообщение об успешной отправке). Но мой сайт (CMS Битрикс) на 7.4.26 не работает(. Может подскажете что такого в вашем коде, что не хочет обрабатываться на версии 7.3.33?
Попробуйте
if (!mail($to, $subject, $message, $headers)) { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Сообщение не отправлено, ошибка почтового сервера!"; }Заменить на:
if (!mail($to, $subject, $message, $headers)) { $return_arr["frm_check"] = 'error'; $return_arr["msg"] = "Сообщение не отправлено, ошибка почтового сервера!"; } else { $return_arr["frm_check"] = 'success'; }Разобрался. Прошу прощение за панику. Форма отлично работает. Спасибо Вам!
Подскажите пожалуйста как изменить надпись Ваше сообщение отправлено. В коде js меняю на Message sent но всеравно на руском остается. Спасибо!
Интересно как же заставить работать одновременно две формы, и почему не срабатывают две..?
В JS нужно немного поменять, через each сделать форму.
Никак не соберусь обновить тут коды...
Очень ждем, а то хотел как раз сделать интеграцию с несколькими формами, а оно не фурычит, ставит еще одну форму не хотелось бы
Если на коммерческой основе, то хоть сейчас:)
может уже есть вариант формы с адаптацией чтобы можно было несколько форм на странице использовать). Пожалуйста)
Обновил коды в статье, попробуйте.
А с PHP помогло решение?
нет, не помогло. Решил просто разместить формы отдельно от сайта, на субдомене для которого установил версию PHP 7.4.26. В таком виде работает.
Подскажите пожалуйста, что в коде поменять чтобы не все поля были обязательными для заполнения. Например имя и текст сообщения обязательные, а телефон/мыло - не обязательные. Заранее огромное спасибо.
Под HTML кодом описание
Подскажите как поиграть с размерами? Форма не влазит в высоту, слишком большая, раза в 2 бы уменьшить и соответственно шрифт поменьше.
Смотрите по CSS, там даже не зная можно догадаться, проверить и поглядеть результат.
Например:
height: 50px; - высота верхних полей и кнопки
min-height: 170px; - высота поля с доп. инфой
День добрый.
Вопрос такой: как вставить в js код - цель на отправку формы метрики?
Когда форма отправлена:
$(".result-at").html("<div class='success-at'>Ваше сообщение отправлено!</div>"); $(".form-at").fadeOut(500); $(".input-at").val("");Ниже ставим:
yaCounterNNNNNNNNNNN.reachGoal('name');всё работает по кайфу
Добрый день!
Спасибо за крутое решение... долго искал
Подскажите, пожалуйста, как правильно добавить input file, чтобы и можно было получить файлы
Спасибо
Я про отправку файлов не писал в блоге, но можно почитать тут например.
Или лучше использовать что то более профессиональное - PHPMailer
Вставил всё это на свою страницу. По нажатию кнопки ничего не происходит.
Дайте ссылку
То же самое , при нажатии на кнопку ничего не происходит. Css и Js подключены в html форме
Нужно результат видеть, я же не могу угодать почему оно не работает
Как показать результат? Выполняю на openserver. При нажатии на кнопку ничего не происходит.
Файл стилей и файл скрипта прописаны (отлинкованы)
Когда все прописано, работает как на примере.
Ошибки какие-нибудь есть в консоле?
Выдает ошибку 404, типа файл не найден. При этом запрос уходит, а ответ говорит: 404 Not Found - файл сам по пути имеется, указан как со / так и без, разницы нет. Все равно ошибка 404. Есть предположение, что где-то в системе стоит запрет на открытие файлов php, как можно дать разрешение 1 файлу, send.php?
Если 404, то это не запрет php
Скиньте результат сюда или в ВК/Телеграм
Добрый день! А файл jQuery как назвать необходимо?
Как угодно, главное чтобы код был на сайте