Форма Обратной Связи
#1
Отправлено 02 Декабрь 2016 - 13:43
Здравствуйте.
Необходимо сделать копию формы обратной связи как на сайте аккаунта SL-368333 внизу страниц над футером (как на скане).
Пробовал скопировать эту форму в новый шаблон, но получается криво. Помогите пожалуйста.
Спасибо большое.
#2
Отправлено 06 Декабрь 2016 - 16:28
Ast (02 Декабрь 2016 - 13:43) писал:
Здравствуйте.
Необходимо сделать копию формы обратной связи как на сайте аккаунта SL-368333 внизу страниц над футером (как на скане).
Пробовал скопировать эту форму в новый шаблон, но получается криво. Помогите пожалуйста.
Спасибо большое.
Здравствуйте. Изменения Вам внесли
#4
Отправлено 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
Отправлено 06 Декабрь 2016 - 18:31
MikDark (06 Декабрь 2016 - 17:40) писал:
// Возврашаем пользователя на страницу с которой был сделан обратный звонок $('.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
Отправлено 06 Декабрь 2016 - 18:39
Ast (06 Декабрь 2016 - 18:31) писал:
2. В скрипт запись добавил, но форма все равно срабатывает пустая, а в правом верхнем углу сайта выскакивает предупреждение об ошибке "На сайте есть 1JS ошибка".
Перед добавленный кодом в main.js вставьте еще, пожалуйста
$('.callbackForm').submit(validCallBack);
#8
Отправлено 07 Декабрь 2016 - 14:31
MikDark (06 Декабрь 2016 - 18:39) писал:
$('.callbackForm').submit(validCallBack);
1. Поля формы уехали влево
2. Между формой и футером есть зазор, нужно чтобы форма примыкала к футеру.
3. Форма отправляется с пустыми полями
4. Осталось предупреждение об ошибке "На сайте есть 1JS ошибка"
5. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим.
помогите пожалуйста доработать форму. Спасибо
#9
Отправлено 09 Декабрь 2016 - 08:49
Ast (07 Декабрь 2016 - 14:31) писал:
2. Между формой и футером есть зазор, нужно чтобы форма примыкала к футеру.
3. Форма отправляется с пустыми полями
4. Осталось предупреждение об ошибке "На сайте есть 1JS ошибка"
5. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим.
помогите пожалуйста доработать форму. Спасибо
Еще актуально, помогите пожалуйста доработать форму
#12
Отправлено 12 Декабрь 2016 - 09:56
1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333
Спасибо большое!
#13
Отправлено 13 Декабрь 2016 - 10:35
1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333
Спасибо большое!
#14
Отправлено 13 Декабрь 2016 - 11:07
Ast (13 Декабрь 2016 - 10:35) писал:
1. Поля формы поставить по центру, сейчас уехали влево
2. Между формой и футером есть зазор нужно чтобы форма примыкала к футеру
3. В мобильной версии поля формы выстраиваются по горизонтали, а нужно по вертикали одно под другим как на сайте аккаунта SL-368333
Спасибо большое!
#18
Отправлено 16 Март 2017 - 14:23
Здравствуйте
Помогите пожалуйста скопировать эту форму на аккаунт SL-406567 (изначально оригинал формы на аккаунте SL-368333)
Копия должна быть полной как по дизайну так и по функционалу - обязательные поля для заполнения.
Спасибо большое!
#19
Отправлено 17 Март 2017 - 10:51
найдите строку:
<!-- /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
Отправлено 17 Март 2017 - 11:40
metry (17 Март 2017 - 10:51) писал:
найдите строку:
<!-- /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. В мобильной версии поля формы должны стоять одно под другим. Сейчас они в ряд мелкими беспорядочными квадратами.
Посмотрите пожалуйста.
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных