Как сделать кнопку обратного звонка

Как сделать кнопку обратного звонка
Как сделать кнопку обратного звонка
Как сделать кнопку обратного звонка

Привет друзья! Сегодня хочу поделиться тем, как сделать кнопку обратного звонка на сайт с всплывающим модальным окном, формой обратной связи, маской для телефона в инпуте формы, возможностью выбрать дату и время обратного звонка.

Кнопка обратного звонка – это неотъемлемый элемент коммерческого сайта. Она улучшает поведенческие характеристики веб-ресурса, с её помощью можно быстро связаться с клиентом. Весь этот несложный интерфейс коммуникации состоит из двух элементов: самой кнопки с текстом «Заказать звонок» и всплывающей формы обратной связи в модальном окне.

Форма состоит из трёх текстовых полей (инпутов), куда пользователь вводит своё имя и телефон. В поле input с type=»tel» будет маска с выводимым по умолчанию кодом страны по определённому формату.

Нажав на кнопку «Заказать звонок», пользовательт увидит вот такую аккуратную форму с полями для заполнения.

 

модальное окно с контактной формой

 

Так же я сделаю ещё один input с тайпом “datetime—local” для отображения выпадающего календаря с выбором даты и времени. Таким образом можно предоставить клиенту возможность выбрать удобное для него время звонка. Однако в html коде я закомментирую этот input, а если кому то он будет нужен, то может раскомментировать строку кода и пользоваться этим функционалом. В файлах php обработчика и в таблице стилей это поле будет подключёно.

Выглядеть это будет вот так.

 

модальная форма с выбором даты и времени обратного звонка

 

Создание кнопки обратного звонка можно разделить на семь этапов.

  1. Выбор java script плагина, отвечающего за вызов модального окна.
  2. Подключение и редактирование html и js кода.
  3. Оформление внешнего вида кнопки и формы обратной связи с помощью css стилей.
  4. Подключение php кода обработчика формы.
  5. Подключение маски для телефона.
  6. Настройка ajax – будем отправлять данные с формы без перезагрузки страницы.
  7. Подключение или отключение поля с календарём (датой и временем).

 

Выбираем плагин js

В интернете сейчас есть много решений, с помощью которых можно сделать вызов модального окна. Например, в библиотеке фреймворка bootstrap встроен плагин Modal. Чтобы его подключить нужно скачать фреймворк bootstrap. Он будет встроен в минифицированный файл bootstrap.min.js. Или скачать можно сам плагин, найдя его в разделе Настройки — Компоненты java script.

 

плагин bootstrap Modal

 

Так же модальное окно вызывается с помощью плагина fancybox

 

плагин для вызова модальных окон fancybox

 

или Remodal.

 

плагин для вызова модального окна remodal

 

Существует ещё много скриптов, вызывающих всплывающее окно на сайте. На нескольких своих проектах я использовал плагин remodal, но недавно, когда делал сайт визитку, плагины remodal и fancybox вступили в конфликт с другими js скриптами. В частности после их установки перестал работать плавный скролл на сайте.

После поисков различных решений я нашёл плагин Magnific Popup. Установив его я понял, что всё работает отлично и никаких конфликтов с другими скриптами нет. Следовательно скачиваем данный плагин с гитхаба https://github.com/dimsemenov/Magnific-Popup и в папку js своего сайта вставляем минифицированный файл jquery.magnific-popup.min.js, а в папку с css вставляем файл со стилями magnific-popup.css. Затем подключем их в html коде. Всё, файлы подключены.

Адаптируем html код плагина под свой проект

HTML код плагина берём с примеров на главной странице magnific popup http://dimsemenov.com/plugins/magnific-popup/. Можно скопировать код с раздела Popup with form или Modal Popup. Я решил взять только часть кода для «обёртки» с образца в Modal Popup потому, что контактную форму сделаю простую сам.

 

 

адаптация html кода плагина

 

Форма, что приводится в разделе Popup with form имеет много лишнего кода и перегружена всякими филдсетами, тегами ol, li и лейблами, которые занимают только лишнее место. Зачем писать «Ваше имя» в теге lable, если это можно сделать прямо в атрибуте placeholder  input?

Итак, копируем здесь же javascript код, создаём файл main.js и вставляем его сюда.

 

Чтобы в форме обратной связи показывалась кнопка крестик, для её закрытия нужно строку modal: true переделать на modal: false,
и под ней вставить эту showCloseBtn: true

В общем должен получиться такой код

 

Далее подключаем файл main.js внизу страницы с помощью тега script. А в html коде берём только код ссылки и обёртку, остальное удаляем.

 

код из magnific popup

 

Получилcя такой код:

 

Сюда я вставил ещё три тега input: один будет функционировать в качестве кнопки, другой будет скрытым, а третий закомментированный — это инпут с выводом даты и времени. Атрибут ссылки href=”#form” нацелен на id=”form” формы обратной связи. Css класс popup-modal связует форму с ajax. Здесь всё.

 

Оформляем кнопку и форму стилями css

Далее привожу пример 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

@import url("font-awesome.min.css");

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");

body {

background-color: #191515;

background: radial-gradient(white, #FFA9A1) repeat-y;

height: 700px;

}

.button {

    display: inline-block;

    position: relative;

    min-width: 178px;

    margin: 6px 28px;

    padding: 15px 40px;

    font-weight: 800;

    font-family: sans-serif;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #AB274F;

    transition: .15s ease-out;

    box-sizing: border-box;

    text-decoration: none;

    font-family: Alice, serif;

    text-shadow: #a58383 2px 2px 2px;

letter-spacing: 2px;

}

 

.button:hover {

    color: #ec1355!important;

}

 

.button:last-of-type {margin: 6px 28px;}

.button:before {

  content:"";

  position: absolute;

  top: -6px;

  left: 0;

  height: calc(100% + 12px);

  width: 100%;

  border: 2px solid #AB274F;

  box-sizing: border-box;

  transition: .2s ease-in-out;

}

 

.button:after {

  content:"";

  position: absolute;

  top: 0;

  left: -8px;

  height: 100%;

  width: calc(100% + 16px);

  border: 1px solid #AB274F;

  box-sizing: border-box;

  transition: .2s ease-in-out;

}

 

.button:hover:before {

  top: 0;

  left: -8px;

  height: 100%;

  width: calc(100% + 16px);

}

.button:hover:after {

  top: -6px;

  left: 0;

  height: calc(100% + 12px);

  width: 100%;

}

 

.button:hover{

    color:#AB274F;

}

 

.panel-grid-cell section {

    padding: 80px 0;

    z-index: 999;

    text-align: center;

}

 

input[type="button"]:hover,

input[type="submit"]:hover,

input[type="reset"]:hover,

button:hover,

.btn:hover {

background-color: #9ececc;

}

 

.mfp-close-btn-in .mfp-close {

    color: #999!important;

}

 

/ modal windows /

 

div > a.popup-modal.button[href="#form"] {

text-transform: uppercase;

    padding: 0.75em 2em 0.75em 2em;

    text-decoration: none;

    margin-top: 100px;

}

 

.mfp-content {

    background-image: url("../images/callback_bg.jpg")!important;

    position: relative;

    display: inline-block;

    vertical-align: middle;

    margin: 0 auto;

    text-align: center!important;

background: #2f3847;

max-width: 280px;

    z-index: 1045;

height: auto;

padding: .8%;

border-radius: 4px;

}

 

a.popup-modal-dismiss {

    position: absolute;

    top: 0;

    left: 0;

    overflow: visible;

    cursor: pointer;

    -webkit-transition: color 0.2s;

    transition: color 0.2s;

    text-decoration: none;

    color: #95979c;

    border: 0;

    background: transparent;

}

 

.mfpcontentBorder {

    max-width: 310px;

    border: 1px solid #e1e1e1;

    padding: 4% 5% 0.8%;

}

 

.fa-times:hover {

    content: "\f00d";

    color: #F7943C;

}

.fa-times{

padding: 15px 0px 0px 18px;

display: inline-block;

}

 

.putNumber, .putName, .putPhone {

    width: 210px!important;

    padding: 9px 10px!important;

    height: 40px!important;

    background: rgba(255, 255, 255, 0.62)!important;

    margin-bottom: 15px;

    border-radius: 2px!important;

    border: none!important;

    outline: none!important;

margin: 10px auto;

font-family: Alice, serif;

font-size: 18px;

}

 

input.putName:focus, input.putPhone:focus {

box-shadow: 0 0 2px 1px #FFCC00!important;

}

 

#form > input.btn {

margin-top: 10px;

}

 

p.title {

margin: 15px 10px 2px!important;

color: #e1e1e1!important;

font-family: Marck Script, cursive!important;

line-height: 1.4!important;

font-size: 22px;

}

 

#form {

     border: 1px solid #e1e1e1;

     border-radius: 4px;

}

 

input.btn {

    width: 210px;

    height: 40px;

    background: rgba(229, 115, 115, 0.78);

    margin: 10px 0px 15px!important;

    border-radius: 2px;

    border: none;

    outline: none;

    color: #fff;

    cursor: pointer;

    line-height: 1;

}

 

input.btn:hover {

    color: #000;

}

 

 

Php обработчик формы

Php обработчик формы обратной связи будет называться mail.php. На него будет нацелен ajax.

 

Скрипт маски для телефона

В файл main.js вставьте этот код
$('input[name="phone"]').mask("+38 (099) 999-99-99");
По умолчанию здесь настроен телефонный код Украины, но если вы с России или другой страны, вы можете изменить первые цифры кода на свои. Так же, что бы маска работала нужно подключить к html файлу файл maskedinput.min.js. Я его выложу в конце статьи со всеми файлами.

Ajax

Код ajax можно вставить в файл, main.js, который уже подключен. Вставляем его ниже кода плагина magnific popup. 

Если вы всё правильно сделали, то должно всё работать. Кнопку, вызывающую форму обратной связи можно изменить, прописав ей свои стили. На всякий случай выложу zip файл для скачивания с кодом кнопки обратного звонка. Пока!

0

0

1

0

Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка Как сделать кнопку обратного звонка

Читать далее:




Амперметр схема своими руками из вольтметра




Болясины своими руками




Операторы в блок схемах




Как сделать хомуты для холодной ковки




Схемы механизации штукатурных работ