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


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


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

#1 Ast

Ast

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

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

Отправлено 02 Декабрь 2016 - 13:43

Аккаунт SL-393872
Здравствуйте.
Необходимо сделать копию формы обратной связи как на сайте аккаунта SL-368333 внизу страниц над футером (как на скане).
Пробовал скопировать эту форму в новый шаблон, но получается криво. Помогите пожалуйста.
Спасибо большое.

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

  • forma.jpg


#2 MikDark

MikDark

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

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

Отправлено 06 Декабрь 2016 - 16:28

Просмотр сообщенияAst (02 Декабрь 2016 - 13:43) писал:

Аккаунт SL-393872
Здравствуйте.
Необходимо сделать копию формы обратной связи как на сайте аккаунта SL-368333 внизу страниц над футером (как на скане).
Пробовал скопировать эту форму в новый шаблон, но получается криво. Помогите пожалуйста.
Спасибо большое.

Здравствуйте. Изменения Вам внесли

#3 Ast

Ast

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

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

Отправлено 06 Декабрь 2016 - 16:38

Просмотр сообщенияMikDark (06 Декабрь 2016 - 16:28) писал:

Здравствуйте. Изменения Вам внесли

Спасибо большое, но форма выходит за границы сайта вправо, и не работают обязательные поля. Форма отправляется и пустая. Как поправить чтобы было как в оригинале?

#4 MikDark

MikDark

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

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

Отправлено 06 Декабрь 2016 - 17:40

Просмотр сообщенияAst (06 Декабрь 2016 - 16:38) писал:

Спасибо большое, но форма выходит за границы сайта вправо, и не работают обязательные поля. Форма отправляется и пустая. Как поправить чтобы было как в оригинале?

Форму мы поправили. Для проверки полей, в main.js добавьте:
// Возврашаем пользователя на страницу с которой был сделан обратный звонок
  $('.callbackredirect').val(document.location.href);
// Валидаторы для Имени и телефона
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\- ]{7,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;}



#5 Ast

Ast

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

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

Отправлено 06 Декабрь 2016 - 18:31

Просмотр сообщенияMikDark (06 Декабрь 2016 - 17:40) писал:

Форму мы поправили. Для проверки полей, в main.js добавьте:
// Возврашаем пользователя на страницу с которой был сделан обратный звонок
$('.callbackredirect').val(document.location.href);
// Валидаторы для Имени и телефона
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\- ]{7,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;}


1. Сейчас форма по центру хорошо но поля формы уехали влево
2. В скрипт запись добавил, но форма все равно срабатывает пустая, а в правом верхнем углу сайта выскакивает предупреждение об ошибке "На сайте есть 1JS ошибка".

#6 MikDark

MikDark

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

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

Отправлено 06 Декабрь 2016 - 18:39

Просмотр сообщенияAst (06 Декабрь 2016 - 18:31) писал:

1. Сейчас форма по центру хорошо, но нужно уменьшить ширину полей (ячеек) формы, чтобы они тоже не выходили за ширину сайта как на скрине. Как сделать?
2. В скрипт запись добавил, но форма все равно срабатывает пустая, а в правом верхнем углу сайта выскакивает предупреждение об ошибке "На сайте есть 1JS ошибка".

Перед добавленный кодом в main.js вставьте еще, пожалуйста
  $('.callbackForm').submit(validCallBack);


#7 Ast

Ast

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

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

Отправлено 06 Декабрь 2016 - 19:16

Просмотр сообщенияMikDark (06 Декабрь 2016 - 18:39) писал:

Перед добавленный кодом в main.js вставьте еще, пожалуйста
$('.callbackForm').submit(validCallBack);

Сделал, результат не изменился.
И поля формы уехали влево.

#8 Ast

Ast

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

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

Отправлено 07 Декабрь 2016 - 14:31

Просмотр сообщенияMikDark (06 Декабрь 2016 - 18:39) писал:

Перед добавленный кодом в main.js вставьте еще, пожалуйста
$('.callbackForm').submit(validCallBack);

1. Поля формы уехали влево
2. Между формой и футером есть зазор, нужно чтобы форма примыкала к футеру.
3. Форма отправляется с пустыми полями
4. Осталось предупреждение об ошибке "На сайте есть 1JS ошибка"
5. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим.

помогите пожалуйста доработать форму. Спасибо

#9 Ast

Ast

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

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

Отправлено 09 Декабрь 2016 - 08:49

Просмотр сообщенияAst (07 Декабрь 2016 - 14:31) писал:

1. Поля формы уехали влево
2. Между формой и футером есть зазор, нужно чтобы форма примыкала к футеру.
3. Форма отправляется с пустыми полями
4. Осталось предупреждение об ошибке "На сайте есть 1JS ошибка"
5. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим.

помогите пожалуйста доработать форму. Спасибо

Еще актуально, помогите пожалуйста доработать форму

#10 MikDark

MikDark

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

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

Отправлено 09 Декабрь 2016 - 11:16

Просмотр сообщенияAst (09 Декабрь 2016 - 08:49) писал:

Еще актуально, помогите пожалуйста доработать форму

Проверьте, пожалуйста, сейчас обязательность полей, если все хорошо, то поправим внешний вид

#11 Ast

Ast

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

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

Отправлено 09 Декабрь 2016 - 11:27

Просмотр сообщенияMikDark (09 Декабрь 2016 - 11:16) писал:

Проверьте, пожалуйста, сейчас обязательность полей, если все хорошо, то поправим внешний вид
Да, обязательные поля работают хорошо.

#12 Ast

Ast

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

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

Отправлено 12 Декабрь 2016 - 09:56

Остался внешний вид:
1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333

Спасибо большое!

#13 Ast

Ast

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

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

Отправлено 13 Декабрь 2016 - 10:35

Друзья, осталось поправить немного внешний вид. Помогите пожалуйста доделать:

1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333

Спасибо большое!

#14 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 13 Декабрь 2016 - 11:07

Просмотр сообщенияAst (13 Декабрь 2016 - 10:35) писал:

Друзья, осталось поправить немного внешний вид. Помогите пожалуйста доделать:

1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333

Спасибо большое!
Здравствуйте, Вам внесли изменения и создали бекапы.

#15 Ast

Ast

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

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

Отправлено 13 Декабрь 2016 - 11:21

Просмотр сообщенияИрина345 (13 Декабрь 2016 - 11:07) писал:

Здравствуйте, Вам внесли изменения и создали бекапы.

Спасибо, все отлично, но синий фон формы стал узкий, а должен быть на всю ширину экрана как фон футера.

#16 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 13 Декабрь 2016 - 11:30

Просмотр сообщенияAst (13 Декабрь 2016 - 11:21) писал:

Спасибо, все отлично, но синий фон формы стал узкий, а должен быть на всю ширину экрана как фон футера.
Очистите кеш браузера.

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

  • QIP Shot - Screen 1011.png


#17 Ast

Ast

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

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

Отправлено 13 Декабрь 2016 - 11:39

Просмотр сообщенияИрина345 (13 Декабрь 2016 - 11:30) писал:

Очистите кеш браузера.
Спасибо огромное, все отлично!

#18 Ast

Ast

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

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

Отправлено 16 Март 2017 - 14:23

Аккаунт SL-406567

Здравствуйте
Помогите пожалуйста скопировать эту форму на аккаунт SL-406567 (изначально оригинал формы на аккаунте SL-368333)
Копия должна быть полной как по дизайну так и по функционалу - обязательные поля для заполнения.
Спасибо большое!

#19 metry

metry

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

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

Отправлено 17 Март 2017 - 10:51

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->HTML и

найдите строку:
<!-- /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 id="form">Введите Ваш текст</h2>
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="return_to" value="/page/sent" />
<!--<input class="callbackredirect" type="hidden" name="return_to" value="/page/sent" />-->
{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 999-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="buttonzakaz" onclick="yaCounter37712305.reachGoal('form_up'); return true;">Отправить заявку</button>
</form>
</div>
</div>
</div>

далее зайдите в Редактор шаблонов-->main.css
найдите:

#content {margin: 30px 0;position: relative;z-index: 0;min-height: 400px;}

замените на:

#content {margin: 30px 0;position: relative;z-index: 0;min-height: auto;}

lдалее в конце кода вставьте:



/* Форма новой заявки */
.callbackForm.index {background: #4A7DBF;padding: 1% 17%;text-align: center;}
.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%;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;color:#000;}
/* Конец формы новой заявки */
.buttonzakaz {
display: inline-block;
color: white;
text-decoration: none;
padding: .5em 2em;
outline: none;
border-width: 2px 0;
border-style: solid none;
border-color: #FDBE33 #000 #D77206;
border-radius: 6px;
background: linear-gradient(#F3AE0F, #E38916) #E38916;
transition: 0.2s;
}

@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%;}
}




Сообщение отредактировал metry: 17 Март 2017 - 20:51


#20 Ast

Ast

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

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

Отправлено 17 Март 2017 - 11:40

Просмотр сообщенияmetry (17 Март 2017 - 10:51) писал:

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->HTML и

найдите строку:
<!-- /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 id="form">{% IF PAGE_NAME=Ремонт пластиковых окон и дверей %}Вызвать мастера, получить консультацию{% ELSE %}Бесплатный замер и расчет остекления{% ENDIF %}</h2>
<input type="hidden" name="hash" value="{HASH}" />
<input type="hidden" name="return_to" value="/page/sent" />
<!--<input class="callbackredirect" type="hidden" name="return_to" value="/page/sent" />-->
{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="buttonzakaz" onclick="yaCounter37712305.reachGoal('form_up'); return true;">Отправить заявку</button>
</form>
</div>
</div>
</div>

далее зайдите в Редактор шаблонов-->main.css и в конце кода вставьте:

@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%;}
}

/* Форма новой заявки */
.callbackForm.index {background: #4A7DBF;padding: 1% 17%;text-align: center;}
.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%;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;color:#000;}
/* Конец формы новой заявки */
.buttonzakaz {
display: inline-block;
color: white;
text-decoration: none;
padding: .5em 2em;
outline: none;
border-width: 2px 0;
border-style: solid none;
border-color: #FDBE33 #000 #D77206;
border-radius: 6px;
background: linear-gradient(#F3AE0F, #E38916) #E38916;
transition: 0.2s;
}

Здравствуйте.
Форма встала хорошо, но:
1. Между формой и подвалом пустое место, а должна примыкать
2. Заявка не отправляется, кнопка не активная.
3. В мобильной версии поля формы должны стоять одно под другим. Сейчас они в ряд мелкими беспорядочными квадратами.
Посмотрите пожалуйста.




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

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