Как реализовать возможность сокрытия формы Обратного Звонка?

@delphinchit · Регистрация: 21.08.2014

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

Всем привет!

Написал такую форму "бесплатная консультация":

Как реализовать возможность сокрытия формы Обратного Звонка?

HTML5
1
2
3
4
5
6
7
8
9
10
<div id="feedback-form"><h3>Бесплатная консультация!</h3>
<p>&nbsp;</p>
<form method="post" action="mail.php">
Ваше имя:
<input type="text" name='name' required="required" placeholder="Как к Вам обращаться" x-autocompletetype='name'>
Телефон:
<input type='tel' name='faga' required="required" placeholder="+7(3952) 616-719" x-autocompletetype='tel'>
<input type='submit' value='Получить консультацию'>
</form>
</div>

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
#feedback-form {
  max-width: 250px;
  padding: 2%;
  border-radius: 3px;
  background: #FF0;
  color: #009;
  position: fixed;
  right: 10px; 
  bottom: 30%;
}
 
#feedback-form [required] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2%;
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0,0,0,.05) inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:hover {
  box-shadow: 0 0 0 1px #7eb4ea inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form [required]:focus {
  outline: none;
  box-shadow: 0 0 0 1px #7eb4ea inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5);
  transition: .2s linear;
}
#feedback-form [type="submit"] {
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  background: #009;
  color: #FFF;
}
#feedback-form [type="submit"]:hover {
  background: #5c90c2;
}
#feedback-form [type="submit"]:focus {
  box-shadow: 0 1px 1px #009, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}
#feedback-form1 {
  max-width: 400px;
  padding: 2%;
  border-radius: 3px;
  background: #f1f1f1;
  color: #009;
}
#feedback-form1 [required] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2%;
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0,0,0,.05) inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form1 [required]:hover {
  box-shadow: 0 0 0 1px #7eb4ea inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 transparent;
}
#feedback-form1 [required]:focus {
  outline: none;
  box-shadow: 0 0 0 1px #7eb4ea inset, 0 1px 2px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243,.5);
  transition: .2s linear;
}
#feedback-form1 [type="submit"] {
  padding: 2%;
  border: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
  background: #669acc;
  color: #fff;
}
#feedback-form1 [type="submit"]:hover {
  background: #5c90c2;
}
#feedback-form1 [type="submit"]:focus {
  box-shadow: 0 1px 1px #009, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);
}

подскажите как сделать что бы эта форма появлялась по нажатию кнопки?

@saggid · 21.08.2014, 20:26

Самый примитивный вариант

Добавить немного CSS:

HTML5
1
2
3
4
5
6
7
#feedback-form {
cursor: pointer;
}
 
form[action="mail.php"] {
    display: none;
}

Добавить немного JS:

JavaScript
1
2
3
$('#feedback-form').on('click',function(){
    $('form[action="mail.php"]').toggle();
});

Добавлено через 4 часа 1 минуту
Либо добавь кнопку и уже для неё напиши JS код:

JavaScript
1
2
3
$('#button').on('click',function(){
    $('#feedback-form').toggle();
});

Тогда при нажатии на неё твоя форма будет появляться-исчезать)
Ну и естественно, всё это работает на jQuery, поэтому подключи его к сайту тоже.

@delphinchit · 26.08.2014, 15:14 **[ТС]**

Спасибо конечно , но не работает ...
Подключил Jquery хотя я с ним не умею работать...

JavaScript
1
2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-2.1.1.min.js"></script>

Вставил и первый

JavaScript
1
2
3
4
5
<script type="text/javascript">
$('#feedback-form').on('click',function(){
    $('form[action="mail.php"]').toggle();
});
</script>

и второй вариант

JavaScript
1
2
3
4
<script type="text/javascript">
$('#button').on('click',function(){
    $('#feedback-form').toggle();
});</script>

CSS
1
2
3
4
5
6
7
#feedback-form {
cursor: pointer;
}
 
form[action="mail.php"] {
display: none;
}

Результат можете посмотреть по ссылке: http://it-baikal.ru/1.html

@delphinchit · 26.08.2014, 15:40 **[ТС]**

CSS пришлось убрать так как портил форму по всему сайту
там получается такая кнопка

при нажатии на которую не происходит не каких действий
Я думаю что это связано с привязкой к mail.php - который просто отправляет данные формы

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
42
43
44
45
46
47
48
49
50
51
52
53
54
<?
if($_POST['name']){ 
 
  $znach = array(
 
    1 => $_POST['name'],
 
    2 => $_POST['faga'],
 
    3 => $_POST['pismo'],
 
    4 => $_POST['govnosite'],
 
  );
 
  mail("хххххх@bk.ru", "Заявка на контекст".$_SERVER['HTTP_REFERER'], $znach[2]." - телефон | Контактное лицо: ".$znach[1]."| e-mail: ".$znach[3]." | сайт: ".$znach[4]);
 
  mail("ххххх@mail.ru", "Заявка на контекст".$_SERVER['HTTP_REFERER'], $znach[2]." -  телефону! Контактное лицо: ".$znach[1].".  e-mail: ".$znach[3].", сайт: ".$znach[4]);  
 
}
 
Header("Refresh: 5; URL=".$_SERVER['HTTP_REFERER']); 
 
?>
 
 
 
<!DOCTYPE html>
 
<title><? print "$znach[1], данные успешно отправлены!"; ?></title>
 
<meta content='text/html; charset=windows-1251' http-equiv='Content-Type'/>
 
<meta name="robots" content="noindex"/>
<table width="500" border="1" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><div align="center"><h1><? print "$znach[1]"; ?>, Ваша заявка получена!<br>
Мы позвоним Вам в течении двух часов. </h1></div></td>
  </tr>
<td><p><h2>Через 5 секунд Вы автоматически вернетесь на предыдущую страницу</h2></p></td><tr>
</table>
 
 
 
<script> // нажав на label посетитель вернётся на предыдущую страницу, где заполнял форму
 
document.getElementsByTagName('label')[0].onclick = function() {
 
  window.location.href="<? print $_SERVER['HTTP_REFERER']; ?>"
 
}
 
</script>
<

@saggid · 30.08.2014, 14:48

Да уж, автор... Хорошо бы тебе не писать "не работает", типа это я такой невежда, а самому сначала изучить основы работы с JS и библиотекой jQuery. Конечно оно у тебя не будет работать, если ты не знаешь элементарные основы.

Оставь только первый JS:

JavaScript
1
2
3
$('#feedback-form').on('click',function(){
    $('form[action="mail.php"]').toggle();
});

Но чтобы он корректно заработал, его необходимо обернуть в специальную функцию, чтобы этот код выполнился только после полной загрузки всех DOM элементов. Я думал, что ты добавишь этот код в самый низ своего шаблона, поэтому не стал оборачивать код в эту обертку. Но так как ты ставишь код на самом верху страницы, то его следует написать так:

JavaScript
1
2
3
4
5
$( document ).ready(function() {
  $('#feedback-form h3').on('click',function(){
      $('form[action="mail.php"]').toggle();
  });
});

Код на PHP здесь не причем. Я хотел сделать так, чтобы при клике по заголовку бесплатной консультации отображалась и скрывалась твоя форма.

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .