Форма обратной связи в всплывающем окне с затемнением фона

@Just_Alone · Регистрация: 07.10.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, есть люди которые могут помочь с формой обратной связи, там должно быть всего два пункта:
1)Ваше имя
2)Ваш номер телефона

И форма должна появляться в всплывающем окошке с затемнением.
Я почти всё сделал, но вот как сделать, чтобы приходила письмо с указанными в форме данными мне на почту?

@Justff · 07.10.2013, 18:56

либо в атрибуте action формы указать файл обработки формы, он же и будет осуществлять отправку почты с заполнеными полями, либо воспользоваться протоколом mailto:ваша_почта

@Just_Alone · 07.10.2013, 19:10 **[ТС]**

Спасибо, а вы не могли бы расписать подробнее, что, куда, что писать, насколько это возможно? Я новичок в этом деле)

@Web-ulyanov · 07.10.2013, 19:50

Just_Alone,
1.Полю с именем добавляете атрибут name = "name", полю с телефоном опять же задаем имя в примере "tele".
2. В Теге form задаем метод POST, action = my-form.php
3.Создаем файл my-form.php и добавляем туда следующий код:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?
#Переменные
$name = @ trim ($_POST['name']);
$tele = @ trim ($_POST['tele']);
#Доп.проверка заполненности полей
if (! $name or ! $tele) exit ('Необходимо заполнить все поля, вернитесь');
#Вид письма который придет на email
mail ("myemail@test.ru",
      "Сообщение с сайта (отправитель: $name)",
      " Имя:$name \n Телефон: $tele",
      "Content-type:text/plain; charset=utf-8");
#Перенаправление после отправки   
header ("Location: http://example.ru");
?>

Обратите внимание на то что письма не будут приходить с локального хостинга, а так на путь к файлу my-form.php он должен быть правильный.

@Just_Alone · 08.10.2013, 12:14 **[ТС]**

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
<form id="contact-form" method = "POST" action = "bin/my-form.php">
                    <fieldset>
                            <name = "name">
                            <input type="text" value="Ваше имя">
                            <name = "tele">
                            <input type="text" value="Телефон">
                        <br><br><span><a class="btn small" data-type="submit">Отправить</a></span></div>
                    </fieldset>
                </form>

Вот так правильно? а то у меня все равно не отправляются сообщения

@Web-ulyanov · 08.10.2013, 12:40

HTML5
1
2
3
4
5
6
7
<form id="contact-form" method = "POST" action = "bin/my-form.php">
                    <fieldset>
                            <input type="text" name ="name" value="Ваше имя">
                            <input type="text" name="tele" value="Телефон">
                        <br><br><span><a class="btn small" data-type="submit">Отправить</a></span></div>
                    </fieldset>
                </form>

Атрибут name должен находится в теге input и передавать по имени значение поля в обработчик

@Drevk0 · 12.03.2014, 09:46

Всем привет. Почитал вашу тему, у меня приблизительно такая же проблема, только вот сообщения доставляются нормально, а окошко доделать не могу. На данном этапе это все выглядит вот так - жмем на картинку, всплывает форма на прозрачном затемненном фоне, все нормально. Вводим данные и он отправляет их с формы на обработчик, а обработчик уже создает новую страницу, а это уничтожает мою прозрачность и крестик закрытия страницы начинает работать не так как надо. Можете посмотреть как это работает на главной странице моего сайта http://cnoco6-3apa6omamb.ru , значок почты в меню справа.
А вот так я хочу - чтоб после нажатия кнопки Отправить сообщение, чтоб это сообщение обрабатывалось и выдавало варианты ответа прям в том же окне, с прозрачным фоном. Узнал, что так можно сделать если форма и обработчик будут находиться в одном файле, а в action=" " отавлять пустым. Долго ковырялся, пришел вот к такому коду:

PHP/HTML
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
<center>
         <div id="fonvneshni" <?php if($_POST){echo 'style="display:block"';} ?>>
         <div id="fonsviazi">
         <div id="close" style="cursor: pointer;" onclick="document.getElementById('fonvneshni').style.display='none';"></div>
         <p style='text-align: center;' class='contact-title'>СВЯЗЬ c АДМИНИСТРАТОРОМ</p>
         
<?php
         
if (isset($_POST['name'])) {$name = $_POST['name'];
if ($name == '') {unset($name);}}
if (isset($_POST['email'])) {$email = $_POST['email'];
if ($email == '') {unset($email);}}
if (isset($_POST['text_message'])) {$text_message = $_POST['text_message'];
if ($text_message == '') {unset($text_message);}}
 
if (isset($name) && isset($email) && isset($text_message))
 {
     $name = htmlspecialchars(trim($name));
     $email = htmlspecialchars(trim($email));
     $text_message = htmlspecialchars(trim($text_message));
     $name = htmlentities(trim($name));
     $email = htmlentities(trim($email));
     $text_message = htmlentities(trim($text_message));
     
if(!preg_match("/[A-Za-zА-Яа-яЁё]/i", $name)){{
 {
     echo "
     <form action='' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       <td class='error'>Не правильный формат E-mail!</td>
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form>
       " ;} [B][COLOR="YellowGreen"]return false;} return true;}[/COLOR][/B]
   
if(!preg_match("/[0-9a-z_]+@[0-9a-z_^\.]+\.[a-z]{2,3}/i", $email)){{
 {
     echo "
     <form action='' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       <td class='error'>Имя должно состоять только из букв!</td>
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form>
       " ; } return false;} return true; }
    
       $address = "mail.cnoco6-3apa6omamb.ru";
       $sub = "Вам пришло письмо с сайта Способы Заработка";
       $mes = "Автор: $name \nE-mail: $email \n\nТекст сообщения:\n$text_message";
       $verify = mail ($address,$sub,$mes,"Content-type:text/plain; charset = Windows-1251\r\nFrom:$email");
        
if ($verify == 'true')
 {
 
     echo "
     <form action='' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       <td class='message'>Ваше сообщение отправлено</td>
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form>
       " ;}
    
   else
 {
     echo "
     <form action='' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       <td class='error'>Ошибка!!!</td>
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form>" ; } }
    
   else
     
 {
     
     echo "
     <form action='' method='post'>
       <table align='center' border='0'>
       <tbody>
       <tr>
       <td class='lable'><b>*Ваше имя:</b><br>
       <input name='name' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr>
       <td class='lable'><b>*Ваш e-mail:</b><br>
       <input name='email' style='width:320px; height:15px; margin-top:5px;' class='input' type='text'></td></tr>
       <tr>
       <td></td></tr>
       <tr><td class='lable'><b>*Сообщение:</b><br>
       <textarea name='text_message' style='width:320px; height:180px; margin-top:5px;' cols='40' rows='10' class='input'></textarea></td></tr>
       <tr>
       <td class='error'>Вы заполнили не все поля!</td>
       </tr>
       <tr>
       <td align='center' style='padding-top:10px;'>
       <input name='mail_submit' type='submit' value='Отправить сообщение'>
       </td></tr>
       </tbody>
       </table>
       </form>
       " ; }  ?>
 
</div></div>
       <a href="#" class="images" title="Связь с администратором" onclick="document.getElementById('fonvneshni').style.display='block';"></a></center>

Но когда дело касается имени или почты, если задаешь не верные данные, то дойдя до return, он просто выворачивает страницу на изнанку, срезая подчистую всю середину и низ сайта. С чем это может быть связано?

Ну и еще он открывается сразу с фразы "Вы заполнили не все поля!", т.е. изначальное пустое поле не появляется, а срразу идет проверка.

П.С. уважаемая администрация, если ссылка на мой сайт претит вашим правилам, которые я не удосужился дочитать, просьба не удалять заданный мной вопрос, а можете удалить ссылку или дать мне знать, чтоб я сам это сделал.

@dolte · 12.03.2014, 10:33

Воспользуйтесь ajax'ом

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function send_zvonok() { //Ajax отправка формы
var msg = $("#zvonokform").serialize();
$.ajax({
type: "POST",
url: "/send_zvonok.php",
data: msg,
success: function(data) {
alert("Сообщение отправлено");
},
error:  function(xhr, str){
alert("Возникла ошибка!");
}
});
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
<form id="zvonokform" method="post" action="javascript:void(0);" onsubmit="send_zvonok()"> 
            <input type="text" placeholder="Ваше имя" id="your_name" name="your_name" style="font-family:Verdana;" />
            <br/>
            <input type="text" placeholder="Телефон" id="your_phone" name="your_phone" style="font-family:Verdana;" /> 
            <br/>
            <input type="text" placeholder="Удобное время для звонка" id="your_time" name="your_time" style="font-family:Verdana;"/> 
            <br/>
            <textarea placeholder="Дополнительная информация" id="your_info" name="your_info" style="font-family:Verdana;"></textarea>
            <br/>
            <input type="submit" id="sendbut" class="send_zvon" name="send_zvon" value="Отправить" />
        </form>

PHP
1
2
3
4
5
6
7
8
9
10
    $fromhere = "Заявка на звонок";
    $your_name = $_POST['your_name'];
    $your_time = $_POST['your_time'];
    $your_phone = $_POST['your_phone'];
    $your_info = $_POST['your_info'];
        $emailTo = 'ваша почта'; 
        $body = "Имя: $your_name \n\nТелефон: $your_phone \n\nВремя для связи: $your_time \n\nДоп.Инфо: $your_info";
        $headers = "Content-Type: text/plain; charset=utf-8\r\n".'From: :'.$fromhere.' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $emailTo;
        mail($emailTo, $your_name, $body, $headers);
        $emailSent = true;

@Drevk0 · 12.03.2014, 17:32

Ну, что вы за люди, чуть что сразу Аяксы, всякие сторонние программы начинают приплетать. У меня нет времени на данный момент на изучение новых талмудов, я сайт то не успеваю развивать. Потому я хочу найти решение лишь с применением РНР, если здесь появятся гуру, которые мне в этом помогут буду благодарен, а если нет, то я рано или поздно все равно этот код доведу до ума и все будет работать, просто время жалко. Ведь посмотри на него - он же на 80% уже готов, я просто не пойму, почему возврат при ошибке сносит пол страницы, я сейчас даже закину на сервер страницу с этим не доделанным кодом, может так будет проще сообразить будет. Название ее cnoco6-3apa6omamb.ru/ndex1.php

Добавлено через 3 часа 11 минут
index1.php неправильно записал, если не догадались))

@Drevk0 · 17.03.2014, 04:53

Как-то тихо уже длительное время, нет видимо мастеров РНР=)

Добавлено через 10 часов 1 минуту
Вася еще ладно отправил просто слово Хеллоу, да работает, все дошло, а один вирус даже швырнул, человек вот с этой почтой E-mail: kgquzqw@fremails.com=) Такие проверяльщики мне не нужны=)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Just_Alone 0 / 0 / 0 Регистрация: 07.10.2013 Сообщений: 6

	Форма обратной связи в всплывающем окне с затемнением фона 07.10.2013, 18:31. Показов 5121. Ответов 9 Метки нет (Все метки) Здравствуйте, есть люди которые могут помочь с формой обратной связи, там должно быть всего два пункта: 1)Ваше имя 2)Ваш номер телефона И форма должна появляться в всплывающем окошке с затемнением. Я почти всё сделал, но вот как сделать, чтобы приходила письмо с указанными в форме данными мне на почту? 0

@Justff 48 / 87 / 11 Регистрация: 12.08.2013 Сообщений: 474
	07.10.2013, 18:56
	либо в атрибуте action формы указать файл обработки формы, он же и будет осуществлять отправку почты с заполнеными полями, либо воспользоваться протоколом mailto:ваша_почта 0

@Just_Alone 0 / 0 / 0 Регистрация: 07.10.2013 Сообщений: 6
	07.10.2013, 19:10 [ТС]
	Спасибо, а вы не могли бы расписать подробнее, что, куда, что писать, насколько это возможно? Я новичок в этом деле) 0

@Drevk0 0 / 0 / 0 Регистрация: 12.03.2014 Сообщений: 3
	12.03.2014, 17:32
	Ну, что вы за люди, чуть что сразу Аяксы, всякие сторонние программы начинают приплетать. У меня нет времени на данный момент на изучение новых талмудов, я сайт то не успеваю развивать. Потому я хочу найти решение лишь с применением РНР, если здесь появятся гуру, которые мне в этом помогут буду благодарен, а если нет, то я рано или поздно все равно этот код доведу до ума и все будет работать, просто время жалко. Ведь посмотри на него - он же на 80% уже готов, я просто не пойму, почему возврат при ошибке сносит пол страницы, я сейчас даже закину на сервер страницу с этим не доделанным кодом, может так будет проще сообразить будет. Название ее cnoco6-3apa6omamb.ru/ndex1.php Добавлено через 3 часа 11 минут index1.php неправильно записал, если не догадались)) 0

@Drevk0 0 / 0 / 0 Регистрация: 12.03.2014 Сообщений: 3
	17.03.2014, 04:53
	Как-то тихо уже длительное время, нет видимо мастеров РНР=) Добавлено через 10 часов 1 минуту Вася еще ладно отправил просто слово Хеллоу, да работает, все дошло, а один вирус даже швырнул, человек вот с этой почтой E-mail: kgquzqw@fremails.com=) Такие проверяльщики мне не нужны=) 0