Перейти к содержимому


Ещё Одна Тема Про Обратный Звонок...


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 Barmalei

Barmalei

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 174 сообщений

Отправлено 20 Март 2017 - 20:32

Добрый день.
Приношу 1000 извинений за очередную тему по созданию формы обратного звонка..:) Но, после многих часов вычитывания форума и длительных танцев с бубнами, не добившись желаемого результата - я решился задать вопрос. У меня шаблон "Сияние".

Спрошу так: можно ли сделать форму обратного звонка на базе страницы "feedback"?

Я сделал следующее: скачал callback.zip, установил его - но заменил текст callback.html на текст из формы "Связь с администрацией". Естественно, всё работает коряво)) Ссылка на форму обратного звонка: http://clear-m.ru/callback

Исходя из проделанного, у меня следующие вопросы:
1) Как сделать, чтобы при переходе по ссылке http://clear-m.ru/callback открывалось всплывающее окно с затемнением фона: наподобие появления окна быстрого перехода в корзину (рисунок 1).
2) Форма требует ввести корректный e-mail вместо номера телефона  (рисунок 2). Как сделать, чтобы можно было вводить номер телефона, вместо e-mail?
3) Как сделать, чтобы окно "Комментарии" не было обязательным для заполнения (рисунок 3)? Поля "Имя" и "Телефон" должны остаться обязательными
4) После корректного заполнения формы и нажатия кнопки "Заказать звонок", сайт перекидывает на страницу http://clear-m.ru/feedback (рисунок 4). Как сделать, чтобы этого не происходило, а надпись "Ваше сообщение успешно отправлено" появлялось в текущем окне http://clear-m.ru/callback ?

Пожалуйста, помогите!!! Очень прошу!

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 21 277 сообщений

Отправлено 21 Март 2017 - 06:02

Здравствуйте.

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

#3 Barmalei

Barmalei

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 174 сообщений

Отправлено 21 Март 2017 - 11:56

P.S. рисунки 1-4 теперь добавлены.

Просмотр сообщенияVaccina (21 Март 2017 - 06:02) писал:

Здравствуйте.

Перефразируйте пожалуйста результат. Исходя из первого пункта, форма должна быть только всплывающей, то есть, как понимаю, на сайте должна быть кнопка вроде "обратного звонка" при клике на которую форма будет всплывать, верно?
Да, будут кнопки на некоторых страницах сайта, в т.ч. на шаблоне HTML хочу разместить две кнопки обратного звонка: в шапке и подвале. А точнее, это будут не кнопки - а просто надписи "заказать обратный звонок". Форму хочу видеть всплывающей, наподобие всплывающего окна на рисунке 1.

Цитата

Исходя из остальных пунктов, зачем использовать форму обратного звонка, если внутри шаблона вы все меняете на форму из шаблона связь с администрацией, может быть лучше изначально сделать всплывающую форму связи с администрацией?
Я даже не знаю, посоветуйте Вы? Но форму связи с администрацией, на которую мы попадаем по адресу http://clear-m.ru/feedback я хочу оставить без изменений. Как можете видеть, я её (форму) маленько переделал под себя. Т.е. мне нужно отдельное окно для обратного звонка, по другому адресу.

В принципе, меня устроит так, как реализован обратный звонок на сайте http://climl.ru . НО!! После заказа обратного звонка здесь так же перебрасывается на страницу feedback (как в моём вопросе 4). Хотелось бы, чтобы не перекидывалось.

Прикрепленные изображения

  • 1.jpg
  • 2.jpg
  • 3.jpg
  • 4.jpg


#4 Barmalei

Barmalei

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 174 сообщений

Отправлено 23 Март 2017 - 19:51

Ответьте, пожалуйста..

#5 Stasya

Stasya

    Активный участник

  • Модераторы
  • 3 361 сообщений

Отправлено 24 Март 2017 - 15:04

Просмотр сообщенияBarmalei (21 Март 2017 - 11:56) писал:

P.S. рисунки 1-4 теперь добавлены.


Да, будут кнопки на некоторых страницах сайта, в т.ч. на шаблоне HTML хочу разместить две кнопки обратного звонка: в шапке и подвале. А точнее, это будут не кнопки - а просто надписи "заказать обратный звонок". Форму хочу видеть всплывающей, наподобие всплывающего окна на рисунке 1.


Я даже не знаю, посоветуйте Вы? Но форму связи с администрацией, на которую мы попадаем по адресу http://clear-m.ru/feedback я хочу оставить без изменений. Как можете видеть, я её (форму) маленько переделал под себя. Т.е. мне нужно отдельное окно для обратного звонка, по другому адресу.

В принципе, меня устроит так, как реализован обратный звонок на сайте http://climl.ru . НО!! После заказа обратного звонка здесь так же перебрасывается на страницу feedback (как в моём вопросе 4). Хотелось бы, чтобы не перекидывалось.
Здравствуйте. В шаблоне HTML найдите строку
{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}
и сразу после нее вставьте блок
!-- Обратный звонок -->
		   
			  <a class="button button3" href="#fancybox-callback" title="Обратный звонок"><i class="fa fa-phone"></i><span class="hide">Обратный звонок</span></a>
			  <div id="fancybox-callback" style="display:none">
				<h4 class="title">Обратный звонок</h4>
				<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/>
				  <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				  {ANTISPAM_CODE}
				  <div class="callback-input">
					<input id="callback_person" class="inputText callback_person required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Ваше имя" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off">
				  </div>
				  <div class="callback-input">
					<input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off">
				  </div>
				  <button type="submit" title="Отправить" class="button button3">Отправить</button>
				</form>
			  </div>
Далее в этом же шаблоне найдите
</head>
и перед ней добавьте блок
<!-- Обратный звонок в шапке -->
  <script>
  $(document).ready(function(){
	$(".callback > a.button").click(function(){
	$(this).nyroModalManual({
		  minWidth: 310, // Minimum width
		  minHeight: 210, // Minimum height
		  gallery: null // Gallery name if provided
	});
	})
  })
  </script>
  <!-- /END Обратный звонок в шапке -->
Далее в конец файла main.js добавьте блок
// Валидаторы для Имени и телефона
function validName(){
  name = $('#callback_person').val();
  if(name != ''){
	$('.name-error').remove();
	q2 = true;
  }else{
	$('.name-error').remove();
	$('#callback_person').after('<div class="name-error">Вы не указали ваше Имя</div>');
  }
}
function validPhone(){
  tel = $('#callback_phone').val();
  check = /^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{5,10}$/.test(tel);
  if(check == true && check != ''){
	$('.phone-error').remove();
	q1 = true;
  }
  else{
	$('.phone-error').remove();
	$('#callback_phone').after('<div class="phone-error">Вы ввели неверный номер телефона</div>');
  }
}
//Проверка телефона в обратном звонке.
function validCallBack(){q1 = false;q2 = false;validName();validPhone();return q1 && q2;}
$(document).ready(function(){
  $('.callbackForm').submit(validCallBack)
  $('.callbackredirect').val(document.location.href);
})
В конец файла main.css добавьте блок
form.callbackForm .callback-input{margin-bottom:10px;}
form.callbackForm .inputText {width:300px;height: 30px;}
#nyroModalContent h4{text-transform: uppercase;color: #666;text-align: center;margin: 10px 0 20px;font-size:22px;}
.callbackForm{padding:0 10px;}
.callbackForm button{
	margin: 0 auto;
	display: block;
	background: #3a9e78;
	padding: 10px 30px;
	color: #fff;
	border: none;
	font-size: 15px;
}
#nyroModalTitle{display:none;}
.button.button3{font-size: 12px;position: absolute;left: 20%;}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных