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


Форма Обратной Связи


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

#1 Ast

Ast

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

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

Отправлено 20 Апрель 2016 - 18:45

Аккаунт SL-368333

Необходимо сделать форму обратной связи с полями как на прилагаемом рисунке, адаптированной для мобильной версии (см. рисунок). При заполнении поля "телефон" должны быть подсказки как в примере.  Должна быть возможность вставлять эту форму на других страницах сайта. Цвет фона в примере случайный, может быть однотонным.  Помогите пожалуйста.

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

  • forma-desktop.jpg
  • forma-mob.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Апрель 2016 - 01:45

В шаблоне HTML после:
</div>
			  {% ENDIF %}
			  <!-- /END Вы смотрели -->
			</div>
			{% ENDIF %}
		  </div>
		</div>
	  </div>
	  <!-- /END Основная часть сайта -->

расположите:
<div id="content" class="wrap">
		  <div class="row">
			<div id="main" class="col-xs-12 col-main">
   <form method="post" action="{CALLBACK_URL}" class="callbackForm index form-box" enctype="multipart/form-data">
   <h2>Оформите заявку на бесплатный замер ваших окон!</h2>
	  <input type="hidden" name="hash" value="{HASH}" />
	  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}" />
	  {ANTISPAM_CODE}
	  <div class="callback-form">
		<div>
		  <label for="callback_person" class="required">Имя<em>*</em></label>
		  <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required inputText"/>
		</div>
  <div>
		  <label for="callback_email">Email</label>
		  <input id="callback_email" type="text" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" maxlength="255" class="inputText"/>
		</div>
		<div>
		  <label for="callback_phone" class="required">Телефон<em>*</em></label>
		  <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText"/>
		</div>
		<div>
		  <label for="callback_comment">Время звонка</label>
		  <input id="callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" maxlength="255" class="inputText"/>
		</div>
  <div class="clear"></div>
	  </div>
	  <button type="submit" title="Отправить" class="button">Отправить</button>
	</form>
<div>
<div>
<div>

В main.css до:
/******************************************************************************
  Animation
******************************************************************************/
.sns-producttabs .sns-pdt-content .pdt-content .item-animate {opacity: 0;filter:alpha(opacity = 0);}

вставьте:
.callbackForm.index {
	background: #4A7DBF;
	padding: 1% 2.5%;
}
.callbackForm.index h2 {
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
}
.callbackForm.index .callback-form{
  float:none;
}
.callbackForm.index .callback-form > div {
	width: 20%;
	margin: 0 2%;
	color: #fff;
	float: none;
	display: inline-block;
}
.callbackForm.index .callback-form > div label {
	color: #fff;
}
.callbackForm.index .callback-form > div input {
	width: 100%;
}
.callbackForm.index .button {
	margin: 20px auto 0;
	display: block;
	float: none;
	clear: both;
}


#3 Ast

Ast

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

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

Отправлено 21 Апрель 2016 - 08:06

Сделал.
Но в этом случае форма показывается на всех страницах сайта, даже в новостях. А нужно только на некоторых страницах с товаром. Может быть возможно добавлять форму записью какой-то переменной и т.д.?
По самой форме: 1. Левая и правая граница полей ввода формы немного шире чем сама страница.Фон под формой - хорошо, но сами ячейки немного шире правой и левой границы страницы. 2. При вводе записи в форму не видно курсора в ячейке ввода как и самого текста. Текст появляется только если перейти в другую ячейку ввода. 3. В форме телефона нет подсказки параметров ввода номера. 4. В поле время звонка нет текстовой подсказки. 5. В мобильной версии ячейки расположены горизонтально, должны расположиться вертикально друг под другом, как в образце.
Собственно образец формы на сайте внизу страницы: http://www.mosokna.r...vye-okna/rehau/
Буду очень благодарен за поправки.

#4 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 21 Апрель 2016 - 11:27

 Ast (21 Апрель 2016 - 08:06) писал:

Сделал.
Но в этом случае форма показывается на всех страницах сайта, даже в новостях. А нужно только на некоторых страницах с товаром. Может быть возможно добавлять форму записью какой-то переменной и т.д.?
По самой форме: 1. Левая и правая граница полей ввода формы немного шире чем сама страница.Фон под формой - хорошо, но сами ячейки немного шире правой и левой границы страницы. 2. При вводе записи в форму не видно курсора в ячейке ввода как и самого текста. Текст появляется только если перейти в другую ячейку ввода. 3. В форме телефона нет подсказки параметров ввода номера. 4. В поле время звонка нет текстовой подсказки. 5. В мобильной версии ячейки расположены горизонтально, должны расположиться вертикально друг под другом, как в образце.
Собственно образец формы на сайте внизу страницы: http://www.mosokna.r...vye-okna/rehau/
Буду очень благодарен за поправки.


Здравствуйте, можно условиями прописать на каких страницах нужно отображать эту форму. Уточните, пожалуйста, на каких страницах она нужна.

1)  

Цитата

Левая и правая граница полей ввода формы немного шире чем сама страница.Фон под формой - хорошо, но сами ячейки немного шире правой и левой границы страницы.

Попробуйте в main.css код:

.callbackForm.index {
		background: #4A7DBF;
		padding: 1% 2.5%;
}

заменить на код:

.callbackForm.index {
	background: #4A7DBF;
	padding: 1% 17%;
	text-align: center;
}

далее после кода:

@media all and (max-width: 991px) {

добавьте код:

.callbackForm.index .callback-form > div {width: 45%;}

и после кода:
@media all and (max-width: 641px) {

добавьте код:

.callbackForm.index .callback-form > div { width: 80%;}

2)

Цитата

При вводе записи в форму не видно курсора в ячейке ввода как и самого текста. Текст появляется только если перейти в другую ячейку ввода.

в main.css найдите код:

.callbackForm.index .callback-form > div {
		width: 20%;
		margin: 0 2%;
		color: #fff;
		float: none;
		display: inline-block;
}

и замените на код:
.callbackForm.index .callback-form > div {
		width: 20%;
		margin: 0 2%;
		float: none;
		display: inline-block;
}

Цитата

3. В форме телефона нет подсказки параметров ввода номера.

в шаблоне HTMl найдите код:
				  <label for="callback_phone" class="required">Телефон<em>*</em></label>
				  <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText"/>

и замените на код:

				  <label for="callback_phone" class="required">Телефон<em>*</em></label>
				  <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText" placeholder="параметры ввода"/>


и "параметры ввода" изменяйте на свой текст.


Цитата

4. В поле время звонка нет текстовой подсказки.

				  <label for="callback_comment">Время звонка</label>
				  <input id="callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" maxlength="255" class="inputText"/>

замените на код:

				  <label for="callback_comment">Время звонка</label>
				  <input id="callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" maxlength="255" class="inputText" placeholder="текстовая подсказка"/>

текстовая подсказка - измените на нужный текст.



Цитата

5. В мобильной версии ячейки расположены горизонтально, должны расположиться вертикально друг под другом, как в образце.
описала в первом пункте изменения.

#5 Ast

Ast

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

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

Отправлено 21 Апрель 2016 - 12:29

 Юля123 (21 Апрель 2016 - 11:27) писал:

Здравствуйте, можно условиями прописать на каких страницах нужно отображать эту форму. Уточните, пожалуйста, на каких страницах она нужна.

Спасибо, все получилось.
1. Дело в том, что сейчас еще не все страницы готовы где должна показываться форма. Я могу самостоятельно прописывать условия?
2. По поводу подсказки ввода телефонного номера. Я имел ввиду можно ли сделать чтобы при клике в поле ввода телефона появлялись ячейки для ввода цифр в нужном количестве, как на этом сайте (форма внизу страницы)?

В остальном все отлично. Спасибо

#6 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 21 Апрель 2016 - 12:35

 Ast (21 Апрель 2016 - 12:29) писал:

Спасибо, все получилось.
1. Дело в том, что сейчас еще не все страницы готовы где должна показываться форма. Я могу самостоятельно прописывать условия?
2. По поводу подсказки ввода телефонного номера. Я имел ввиду можно ли сделать чтобы при клике в поле ввода телефона появлялись ячейки для ввода цифр в нужном количестве, как на этом сайте (форма внизу страницы)? http://www.mosokna.r...vye-okna/rehau/

В остальном все отлично. Спасибо


Да, так можно сделать, скачайте файл из сообщения в этой теме:http://forum.storeland.ru/index.php?/topic/16856-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd-%d0%b2%d0%b2%d0%be%d0%b4%d0%b0-%d0%bd%d0%b0%d0%bc%d0%b5%d1%80%d0%b0-%d1%82%d0%b5%d0%bb%d0%b5%d1%84%d0%be%d0%bd%d0%b0/#entry168458

далее в шаблоне HTML перед:

</head>


добавляете код:

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.maskedinput.js"></script>
<script type="text/javascript">
jQuery(function($){
$("#callback_phone").mask("+7 (999) 999-9999");
});
</script>


#7 Ast

Ast

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

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

Отправлено 21 Апрель 2016 - 12:42

 Юля123 (21 Апрель 2016 - 12:35) писал:

Да, так можно сделать, скачайте файл из сообщения в этой теме:http://forum.storeland.ru/index.php?/topic/16856-%d1%88%d0%b0%d0%b1%d0%bb%d0%be%d0%bd-%d0%b2%d0%b2%d0%be%d0%b4%d0%b0-%d0%bd%d0%b0%d0%bc%d0%b5%d1%80%d0%b0-%d1%82%d0%b5%d0%bb%d0%b5%d1%84%d0%be%d0%bd%d0%b0/#entry168458

далее в шаблоне HTML перед:

</head>


добавляете код:

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.maskedinput.js"></script>
<script type="text/javascript">
jQuery(function($){
$("#callback_phone").mask("+7 (999) 999-9999");
});
</script>
Спасибо! Работает. А что с условиями показа формы? Могу я самостоятельно прописывать на каких страницах может показываться?

#8 Юля123

Юля123

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

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 21 Апрель 2016 - 13:57

 Ast (21 Апрель 2016 - 12:42) писал:

Спасибо! Работает. А что с условиями показа формы? Могу я самостоятельно прописывать на каких страницах может показываться?

Да, Вы можете самостоятельно изменять условия, для этого Вам нужно код:

	  <div id="content" class="wrap">
		<div class="row">
			<div id="main" class="col-xs-12 col-main">
			  <form method="post" action="{CALLBACK_URL}" class="callbackForm index form-box" enctype="multipart/form-data">
   <h2>Оформите заявку на бесплатный замер ваших окон!</h2>
		  <input type="hidden" name="hash" value="{HASH}" />
		  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}" />
		  {ANTISPAM_CODE}
		  <div class="callback-form">
				 <div>
				  <label for="callback_person" class="required">Имя<em>*</em></label>
				  <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required inputText"/>
				</div>
				 <div>
				  <label for="callback_email">Email</label>
				  <input id="callback_email" type="text" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" maxlength="255" class="inputText"/>
				</div>
				<div>
				  <label for="callback_phone" class="required">Телефон<em>*</em></label>
								  <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText" placeholder="Пример: +7 495 774-24-70"/>
				</div>
				<div>
				  <label for="callback_comment">Время звонка</label>
								  <input id="callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" maxlength="255" class="inputText" placeholder="Пример: с 9 до 21"/>
				</div>
  <div class="clear"></div>
		  </div>
		  <button type="submit" title="Отправить" class="button">Отправить и получить подарок к заказу</button>
		</form>
			</div>
		</div>
	  </div>

заменить на код:

{% IF  MOD_LNAME = index || PAGE_NAME = название страницы ||  PAGE_NAME = название страницы2 || PAGE_NAME = название страницы3 %}
	  <div id="content" class="wrap">
		<div class="row">
			<div id="main" class="col-xs-12 col-main">
			  <form method="post" action="{CALLBACK_URL}" class="callbackForm index form-box" enctype="multipart/form-data">
   <h2>Оформите заявку на бесплатный замер ваших окон!</h2>
		  <input type="hidden" name="hash" value="{HASH}" />
		  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}" />
		  {ANTISPAM_CODE}
		  <div class="callback-form">
				 <div>
				  <label for="callback_person" class="required">Имя<em>*</em></label>
				  <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required inputText"/>
				</div>
				 <div>
				  <label for="callback_email">Email</label>
				  <input id="callback_email" type="text" name="form[callback_email]" value="{FORM_CALLBACK_EMAIL}" maxlength="255" class="inputText"/>
				</div>
				<div>
				  <label for="callback_phone" class="required">Телефон<em>*</em></label>
								  <input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required inputText" placeholder="Пример: +7 495 774-24-70"/>
				</div>
				<div>
				  <label for="callback_comment">Время звонка</label>
								  <input id="callback_comment" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" value="{FORM_CALLBACK_COMMENT}" maxlength="255" class="inputText" placeholder="Пример: с 9 до 21"/>
				</div>
  <div class="clear"></div>
		  </div>
		  <button type="submit" title="Отправить" class="button">Отправить и получить подарок к заказу</button>
		</form>
			</div>
		</div>
	  </div>
{%ENDIF%}

Вместо название страницы, название страницы2, название страницы3  пропишите названия контентных страниц, на которых эта форма должна присутствовать. Этим условием выберется главная страница и несколько контентных страниц, если нужно на каких-либо еще разделах магазина оставить эту форму (Каталог, страница товара, корзина), тогда опишите в каких.

#9 era-saitov.ru

era-saitov.ru

    Пользователь

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

Отправлено 31 Январь 2017 - 17:39

Здравствуйте! Помогите, пожалуйста, с двумя вопросами.
1. Как реализовать на данных страницах http://store-system.ru/page/Servis и http://store-system.ru/page/Opt возможность добавления карточек товаров как в каталоге?
2. Каким образом продублировать отображение формы обратной связи с администрацией на определённых страницах сайта? (с помощью кода выше не получается, так как не смогли найти тот код, который нужно заменить) Аккаунт SL 386608

#10 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 31 Январь 2017 - 19:47

 era-saitov.ru (31 Январь 2017 - 17:39) писал:

Здравствуйте! Помогите, пожалуйста, с двумя вопросами.
1. Как реализовать на данных страницах http://store-system.ru/page/Servis и http://store-system.ru/page/Opt возможность добавления карточек товаров как в каталоге?
2. Каким образом продублировать отображение формы обратной связи с администрацией на определённых страницах сайта? (с помощью кода выше не получается, так как не смогли найти тот код, который нужно заменить) Аккаунт SL 386608

Здравствуйте.
1) Такое реализовать, к сожалению, нельзя
2) В шаблоне Страница в самый конец вставьте

{%IF PAGE_NAME = Имя страницы 1 ||  PAGE_NAME = Имя страницы 2%}
<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
		<input type="hidden" name="hash" value="{HASH}" />
		<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
		{ANTISPAM_CODE}
		<ul class="form-list unstyled">
		  <li class="fields">
			<div class="input-box">
			  <input id="feedback_name" placeholder="Представьтесь, пожалуйста" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]"  value="{FORM_FEEDBACK_NAME}" maxlength="50"  class="inputText">
			</div>
		  </li>
		  <li class="fields">
			<div class="input-box">
			  <input id="feedback_email" placeholder="Электронная почта" type="text"  name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]"  value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="inputText email">
			</div>
		  </li>
		  <li>
			<div class="input-box">
			  <input id="feedback_phone" placeholder="Телефон" type="text" name="form[Телефон]"  value="{FORM_FEEDBACK_PHONE}" maxlength="50"  class="inputText">
			</div>
		  </li>
		  <li class="wide">
			<div class="input-box">
			  <textarea id="feedback_message" placeholder="Текст сообщения" rows="4" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="textarea">{FORM_FEEDBACK_MESSAGE}</textarea>
			</div>
		  </li>
		  <li class="file">
			<label for="feedback_file">Прикрепить файл</label>
			<div class="input-box">
			  <input id="feedback_file" type="file" name="form[assets_file]" value=""  class="inputText">
			</div>
		  </li>
		</ul>
		<div class="buttons">
		  <button type="submit" title="Отправить" class="button"><span>Отправить</span></button>
		</div>
	  </form>
{%ENDIF%}

где подставьте Имя страницы 1 и Имя страницы 2 - имена страниц, на которых выводим форму

#11 era-saitov.ru

era-saitov.ru

    Пользователь

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

Отправлено 01 Февраль 2017 - 03:35

 MikDark (31 Январь 2017 - 19:47) писал:

Здравствуйте.
1) Такое реализовать, к сожалению, нельзя
2) В шаблоне Страница в самый конец вставьте

{%IF PAGE_NAME = Имя страницы 1 || PAGE_NAME = Имя страницы 2%}
<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
	 <input type="hidden" name="hash" value="{HASH}" />
	 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
	 {ANTISPAM_CODE}
	 <ul class="form-list unstyled">
		 <li class="fields">
		 <div class="input-box">
			 <input id="feedback_name" placeholder="Представьтесь, пожалуйста" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="inputText">
		 </div>
		 </li>
		 <li class="fields">
		 <div class="input-box">
			 <input id="feedback_email" placeholder="Электронная почта" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="inputText email">
		 </div>
		 </li>
		 <li>
		 <div class="input-box">
			 <input id="feedback_phone" placeholder="Телефон" type="text" name="form[Телефон]" value="{FORM_FEEDBACK_PHONE}" maxlength="50" class="inputText">
		 </div>
		 </li>
		 <li class="wide">
		 <div class="input-box">
			 <textarea id="feedback_message" placeholder="Текст сообщения" rows="4" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="textarea">{FORM_FEEDBACK_MESSAGE}</textarea>
		 </div>
		 </li>
		 <li class="file">
		 <label for="feedback_file">Прикрепить файл</label>
		 <div class="input-box">
			 <input id="feedback_file" type="file" name="form[assets_file]" value="" class="inputText">
		 </div>
		 </li>
	 </ul>
	 <div class="buttons">
		 <button type="submit" title="Отправить" class="button"><span>Отправить</span></button>
	 </div>
	 </form>
{%ENDIF%}

где подставьте Имя страницы 1 и Имя страницы 2 - имена страниц, на которых выводим форму

Каким образом? Полную ссылку или само имя страницы? Перепробовали почти все возможные варианты, но форма не появляется.

#12 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 04 Февраль 2017 - 20:33

 era-saitov.ru (01 Февраль 2017 - 03:35) писал:

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




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

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