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


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


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

#21 metry

metry

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

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

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

Просмотр сообщенияAst (17 Март 2017 - 11:40) писал:

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

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

#22 Ast

Ast

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

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

Отправлено 17 Март 2017 - 21:08

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

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

#23 Ast

Ast

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

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

Отправлено 19 Июнь 2018 - 09:29

Здравствуйте. Аккаунт SL-393872

Помогите пожалуйста убрать лишние поля в форме внизу страниц. Нужно оставить только поле "Телефон" и кнопку "Отправить". Остальные поля убрать. Размер и цвет фона формы оставляем как есть.

В десктопной верстке поле и кнопка должны быть на одной линии, в мобильной верстке кнопка "Отправить" должна быть под полем "Телефон".

Поле "Телефон" оставляем обязательным для заполнения.
Скрин как должно быть прилагаю. Спасибо большое.

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

  • zaiavka.jpg


#24 Ирина345

Ирина345

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

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

Отправлено 19 Июнь 2018 - 11:05

Просмотр сообщенияAst (19 Июнь 2018 - 09:29) писал:

Здравствуйте. Аккаунт SL-393872

Помогите пожалуйста убрать лишние поля в форме внизу страниц. Нужно оставить только поле "Телефон" и кнопку "Отправить". Остальные поля убрать. Размер и цвет фона формы оставляем как есть.

В десктопной верстке поле и кнопка должны быть на одной линии, в мобильной верстке кнопка "Отправить" должна быть под полем "Телефон".

Поле "Телефон" оставляем обязательным для заполнения.
Скрин как должно быть прилагаю. Спасибо большое.
Здравствуйте, при работе с данной формой, необходимо учитывать, что поля Имя и Телефон, являются обязательными полями для заполнения.
Поэтому поле Имя можно скрыть, но оно автоматически будет заполняться тестовой информацией.
Что бы удалить лишние поля, найдите в шаблоне hTML код
<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" required />
							 </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" required />
							 </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 915 150-79-64" required />
							 </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" required />
							 </div>
				 </div>
				 <button type="submit" title="Отправить заявку" class="buttonzakaz">Отправить заявку</button>
замените на
<div class="callback-form">
								 <div style="display:none;">
								 <label for="callback_person" class="required">Имя<em>*</em></label>
								 <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="инженер" maxlength="50" class="required inputText" required />
							 </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 915 150-79-64" required />
							 </div>
					 <button type="submit" title="Отправить заявку" class="buttonzakaz">Отправить заявку</button>
						
				 </div>
далее найдите в файле style.css код
.callbackForm.index .callback-form{display: flex; justify-content: center;}
замените на
.callbackForm.index .callback-form{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

далее найдите код
.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, #F3AE0F) #F3AE0F;transition: 0.2s;}

замените на
.buttonzakaz{  display: inline-block;color: white;text-decoration: none; padding: 10px 10px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}


#25 Ast

Ast

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

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

Отправлено 19 Июнь 2018 - 11:21

Просмотр сообщенияИрина345 (19 Июнь 2018 - 11:05) писал:

Здравствуйте, при работе с данной формой, необходимо учитывать, что поля Имя и Телефон, являются обязательными полями для заполнения.
Поэтому поле Имя можно скрыть, но оно автоматически будет заполняться тестовой информацией.
Что бы удалить лишние поля, найдите в шаблоне hTML код
<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" required />
							 </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" required />
							 </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 915 150-79-64" required />
							 </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" required />
							 </div>
				 </div>
				 <button type="submit" title="Отправить заявку" class="buttonzakaz">Отправить заявку</button>
замените на
<div class="callback-form">
								 <div style="display:none;">
								 <label for="callback_person" class="required">Имя<em>*</em></label>
								 <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="инженер" maxlength="50" class="required inputText" required />
							 </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 915 150-79-64" required />
							 </div>
					 <button type="submit" title="Отправить заявку" class="buttonzakaz">Отправить заявку</button>
						
				 </div>
далее найдите в файле style.css код
.callbackForm.index .callback-form{display: flex; justify-content: center;}
замените на
.callbackForm.index .callback-form{display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

далее найдите код
.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, #F3AE0F) #F3AE0F;transition: 0.2s;}

замените на
.buttonzakaz{ display: inline-block;color: white;text-decoration: none; padding: 10px 10px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}

А, в таком случае давайте имя оставим, сделаем Имя и Телефон которые обязательные. Форма будет выглядеть так:

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

  • zaiavka2.jpg


#26 Ирина345

Ирина345

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

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

Отправлено 19 Июнь 2018 - 11:28

Просмотр сообщенияAst (19 Июнь 2018 - 11:21) писал:

А, в таком случае давайте имя оставим, сделаем Имя и Телефон которые обязательные. Форма будет выглядеть так:
Выполните инструкцию из предыдущего сообщения, а после найдите в шаблоне hTML код
<div style="display:none;">
																 <label for="callback_person" class="required">Имя<em>*</em></label>
																 <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="инженер" maxlength="50" class="required inputText" required />
														 </div>

замените на
<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" required />
														 </div>


#27 Ast

Ast

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

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

Отправлено 19 Июнь 2018 - 19:30

Просмотр сообщенияИрина345 (19 Июнь 2018 - 11:28) писал:

Выполните инструкцию из предыдущего сообщения, а после найдите в шаблоне hTML код
<div style="display:none;">
																 <label for="callback_person" class="required">Имя<em>*</em></label>
																 <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="инженер" maxlength="50" class="required inputText" required />
														 </div>

замените на
<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" required />
														 </div>

Просмотр сообщенияИрина345 (19 Июнь 2018 - 11:28) писал:

Выполните инструкцию из предыдущего сообщения, а после найдите в шаблоне hTML код
<div style="display:none;">
																 <label for="callback_person" class="required">Имя<em>*</em></label>
																 <input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="инженер" maxlength="50" class="required inputText" required />
														 </div>

замените на
<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" required />
														 </div>

Спасибо, все получилось. Только подскажите пожалуйста где регулируется длина и высота кнопки Отправить?

#28 Vaccina

Vaccina

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

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

Отправлено 20 Июнь 2018 - 02:46

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

Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.buttonzakaz{  display: inline-block;color: white;text-decoration: none; padding: 10px 10px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}

измените значение стиля padding, например:
.buttonzakaz{  display: inline-block;color: white;text-decoration: none; padding: 5px 30px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}

так она станет уже и длиннее.

#29 Ast

Ast

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

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

Отправлено 20 Июнь 2018 - 08:50

Просмотр сообщенияVaccina (20 Июнь 2018 - 02:46) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - style.css - найдите:
.buttonzakaz{ display: inline-block;color: white;text-decoration: none; padding: 10px 10px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}

измените значение стиля padding, например:
.buttonzakaz{ display: inline-block;color: white;text-decoration: none; padding: 5px 30px;
margin-top: 9px;outline: none;border-width: 2px 0;border-style: solid none;border-color: #FDBE33 #000 #D77206;border-radius: 6px;background: linear-gradient(#F3AE0F, #F3AE0F) #F3AE0F;transition: 0.2s;}

так она станет уже и длиннее.
спасибо, все отлично!




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

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