Форма Обратной Связи
#1
Отправлено 20 Апрель 2016 - 18:45
Необходимо сделать форму обратной связи с полями как на прилагаемом рисунке, адаптированной для мобильной версии (см. рисунок). При заполнении поля "телефон" должны быть подсказки как в примере. Должна быть возможность вставлять эту форму на других страницах сайта. Цвет фона в примере случайный, может быть однотонным. Помогите пожалуйста.
#2
Отправлено 21 Апрель 2016 - 01:45
</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
Отправлено 21 Апрель 2016 - 08:06
Но в этом случае форма показывается на всех страницах сайта, даже в новостях. А нужно только на некоторых страницах с товаром. Может быть возможно добавлять форму записью какой-то переменной и т.д.?
По самой форме: 1. Левая и правая граница полей ввода формы немного шире чем сама страница.Фон под формой - хорошо, но сами ячейки немного шире правой и левой границы страницы. 2. При вводе записи в форму не видно курсора в ячейке ввода как и самого текста. Текст появляется только если перейти в другую ячейку ввода. 3. В форме телефона нет подсказки параметров ввода номера. 4. В поле время звонка нет текстовой подсказки. 5. В мобильной версии ячейки расположены горизонтально, должны расположиться вертикально друг под другом, как в образце.
Собственно образец формы на сайте внизу страницы: http://www.mosokna.r...vye-okna/rehau/
Буду очень благодарен за поправки.
#4
Отправлено 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; }
Цитата
в шаблоне 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="параметры ввода"/>
и "параметры ввода" изменяйте на свой текст.
Цитата
<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
Отправлено 21 Апрель 2016 - 12:29
Юля123 (21 Апрель 2016 - 11:27) писал:
Спасибо, все получилось.
1. Дело в том, что сейчас еще не все страницы готовы где должна показываться форма. Я могу самостоятельно прописывать условия?
2. По поводу подсказки ввода телефонного номера. Я имел ввиду можно ли сделать чтобы при клике в поле ввода телефона появлялись ячейки для ввода цифр в нужном количестве, как на этом сайте (форма внизу страницы)?
В остальном все отлично. Спасибо
#6
Отправлено 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
Отправлено 21 Апрель 2016 - 12:42
Юля123 (21 Апрель 2016 - 12:35) писал:
далее в шаблоне 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
Отправлено 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
Отправлено 31 Январь 2017 - 17:39
1. Как реализовать на данных страницах http://store-system.ru/page/Servis и http://store-system.ru/page/Opt возможность добавления карточек товаров как в каталоге?
2. Каким образом продублировать отображение формы обратной связи с администрацией на определённых страницах сайта? (с помощью кода выше не получается, так как не смогли найти тот код, который нужно заменить) Аккаунт SL 386608
#10
Отправлено 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
Отправлено 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 - имена страниц, на которых выводим форму
Каким образом? Полную ссылку или само имя страницы? Перепробовали почти все возможные варианты, но форма не появляется.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных