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


Открытая Форма Заказа


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

#1 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 21 Сентябрь 2013 - 14:58

Привет уважаемые модераторы, скажите пожалуйста, как сделать открытую форму как тут http://fabrika-sobitiy.ru/

forma.jpg

#2 support 2.0

support 2.0

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

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

Отправлено 21 Сентябрь 2013 - 16:35

Просмотр сообщенияKorolev Andrey (21 Сентябрь 2013 - 14:58) писал:

Привет уважаемые модераторы, скажите пожалуйста, как сделать открытую форму как тут http://fabrika-sobitiy.ru/

Прикрепленный файл forma.jpg
Вы можете воспользоваться этой нструкцией

#3 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 22 Сентябрь 2013 - 09:24

Просмотр сообщенияsupport 2.0 (21 Сентябрь 2013 - 16:35) писал:

Вы можете воспользоваться этой нструкцией

Нет, то что предлагаете вы совершенно не подходит. Нужна открытая форма без капчи.

Неужели нельзя такую реализовать, не может быть такого...

#4 miyako

miyako

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

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

Отправлено 23 Сентябрь 2013 - 01:37

Просмотр сообщенияKorolev Andrey (22 Сентябрь 2013 - 09:24) писал:

Нет, то что предлагаете вы совершенно не подходит. Нужна открытая форма без капчи.

Неужели нельзя такую реализовать, не может быть такого...

Есть форма Обратной связи шаблона Связь с администрацией. http://forum.storela...ией/#entry85184

#5 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 23 Сентябрь 2013 - 13:39

Просмотр сообщенияmiyako (23 Сентябрь 2013 - 01:37) писал:

Есть форма Обратной связи шаблона Связь с администрацией. http://forum.storela...ией/#entry85184

Да, смотрите вот сайт http://s1005725.storeland.ru/   там в белом прямоугольнике над таймером надо сделать форму заказа:

Вот так:

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

  • forma333.jpg


#6 Vaccina

Vaccina

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

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

Отправлено 24 Сентябрь 2013 - 05:42

Вы можете использовать следующий код формы

<div>
<style>
.form-feedback {
	position: relative;
}
.form-feedback > div {
	left: 70px;
overflow: hidden;
position: absolute;
top: 100px;
width: 345px;
text-align: center;
}
.form-feedback .input {
	border: 2px #000 solid;
width: 330px;
height: 30px;
margin-bottom: 20px;
padding-left: 10px;
}
.form-feedback .button_med {
	width: 200px;
height: 40px;
border-radius: 12px;
background: #611770;
color: #ccc;
font-size: 18px;
}
</style>
<div class="form-feedback">
<div>
  <form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
	  <div>
	   {ANTISPAM_CODE}
		  <input type="hidden" name="hash" value="{HASH}" />
		  <input id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" placeholder="Имя" maxlength="50" class="input required" /><br /><br />
		  <input id="feedback_message" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" value="{FORM_FEEDBACK_MESSAGE}" placeholder="Телефон" class="input required" /><br /><br />
	<input id="feedback_еmail" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" placeholder="Почта" maxlength="255" class="input required email" /><br /><br />
		  <input class="more-link" type="submit" class="button_med" value="ЗАКАЗАТЬ"/>
	  </div>
	</form>
  </div>
</div>
</div>

вам необходимо его вставить перед изображением

<img src="http://s1005725.storeland.net/forma.png">

в шаблоне "HTML".

#7 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 24 Сентябрь 2013 - 23:35

Просмотр сообщенияVaccina (24 Сентябрь 2013 - 05:42) писал:

Вы можете использовать следующий код формы

<div>
<style>
.form-feedback {
position: relative;
}
.form-feedback > div {
left: 70px;
overflow: hidden;
position: absolute;
top: 100px;
width: 345px;
text-align: center;
}
.form-feedback .input {
border: 2px #000 solid;
width: 330px;
height: 30px;
margin-bottom: 20px;
padding-left: 10px;
}
.form-feedback .button_med {
width: 200px;
height: 40px;
border-radius: 12px;
background: #611770;
color: #ccc;
font-size: 18px;
}
</style>
<div class="form-feedback">
<div>
<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
	 <div>
	 {ANTISPAM_CODE}
		 <input type="hidden" name="hash" value="{HASH}" />
		 <input id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" placeholder="Имя" maxlength="50" class="input required" /><br /><br />
		 <input id="feedback_message" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" value="{FORM_FEEDBACK_MESSAGE}" placeholder="Телефон" class="input required" /><br /><br />
<input id="feedback_еmail" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" placeholder="Почта" maxlength="255" class="input required email" /><br /><br />
		 <input class="more-link" type="submit" class="button_med" value="ЗАКАЗАТЬ"/>
	 </div>
</form>
</div>
</div>
</div>

вам необходимо его вставить перед изображением

<img src="http://s1005725.storeland.net/forma.png">

в шаблоне "HTML".

Вставил, формы нет...

#8 Vaccina

Vaccina

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

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

Отправлено 25 Сентябрь 2013 - 02:45

Вам необходимо было вставить код перед изображением

<img src="http://s1005725.storeland.net/forma.png">

вы вставили код перед блоком
<div style="position: absolute; top: 560px; right: 15px; z-index: 225;">
<img src="http://s1005725.storeland.net/forma.png">
</div>

измените положение кода, вставив его перед изображением.

#9 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 25 Сентябрь 2013 - 22:27

Просмотр сообщенияVaccina (25 Сентябрь 2013 - 02:45) писал:

Вам необходимо было вставить код перед изображением

<img src="http://s1005725.storeland.net/forma.png">

вы вставили код перед блоком
<div style="position: absolute; top: 560px; right: 15px; z-index: 225;">
<img src="http://s1005725.storeland.net/forma.png">
</div>

измените положение кода, вставив его перед изображением.

поля не активны...

#10 Vaccina

Vaccina

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

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

Отправлено 26 Сентябрь 2013 - 01:48

Найдите в коде кнопку

<input class="more-link" type="submit" class="button_med" value="ЗАКАЗАТЬ"/>

и замените её на

<input type="submit" class="button_med" value="ЗАКАЗАТЬ"/>

Цитата

поля не активны...

Проблема в перекрывающем блоке

<div style="position: absolute; top: 250px; right: 10px; z-index: 44422;">
   <img src="http://design.sharzh8.ru/GRANICA_2.png">
</div>

Не совсем понятно предназначение данного блока, а так же такие значения слоев (z-index). Вам необходимо или удалить данный блок, или уменьшить z-index или задать клссу

.form-feedback {
position: relative;
}

z-index: выше.

#11 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 29 Сентябрь 2013 - 13:29

Спасибо.

Скажите, у меня есть кнопка ЗАКАЗАТЬ ЗВОНОК, как сделать, чтобы при нажатии на неё всплывала форма заказа, как открытая форма заказа уже имеющаяся?

#12 Сake

Сake

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

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

Отправлено 01 Октябрь 2013 - 03:14

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

<div class="form-feedback">

и заменить на

<div class="form-feedback" id="form-feedback">

после вашей ссылке обратного завонка

<a href="yandex.ru"><img src="http://s1005725.storeland.net/zakazat_obr_zvonok2.png"></a>

необходимо сменить адрес href="yandex.ru" на href="#form-feedback" тем самым установив якорь на странице.

#13 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 02 Октябрь 2013 - 22:37

Просмотр сообщенияСake (01 Октябрь 2013 - 03:14) писал:

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

<div class="form-feedback">

и заменить на

<div class="form-feedback" id="form-feedback">

после вашей ссылке обратного завонка

<a href="yandex.ru"><img src="http://s1005725.storeland.net/zakazat_obr_zvonok2.png"></a>

необходимо сменить адрес href="yandex.ru" на href="#form-feedback" тем самым установив якорь на странице.


Якорь не годится, нужна именно всплывающая форма заказа на кнопке ЗАКАЗАТЬ ЗВОНОК

#14 Сake

Сake

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

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

Отправлено 03 Октябрь 2013 - 03:29

Добавьте идентификатор вашей кнопке как это говорилось ранее http://forum.storela...аза/#entry92558

чтобы получилось так

<a href="#form-feedback"><img src="http://s1005725.storeland.net/zakazat_obr_zvonok2.png"></a>

после в файл main.js добавьте

$(function() {
   $('a[href="#form-feedback"]').click(function() {
	  $.nyroModalManual({
		content: $('.form-feedback').clone().children('div').css('top', '30px').parent(),
		width: 500,
		height: 300
	  });
	  return(false);
   });
});

далее в файл стилей main.css добавьте

div#nyroModalFull {
	z-index: 100000 !important;
}


#15 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 04 Октябрь 2013 - 14:47

Сделал тень на кнопки "Сделать заказ", там где 6 тарифов:

.m4 a img:hover {
		-moz-box-shadow: 2px 2px 10px #414141;  
		-webkit-box-shadow: 2px 2px 10px #414141;  
		box-shadow: 2px 6px 20px #414141;   filter: progid:DXImageTransform.Microsoft.Shadow(color='#414141', Direction=145, Strength=3);
		border-radius: 1px;
}


и код кнопки:

<div class="m4" style="position: absolute; width:980px; text-align: center; top: 4953px; right: -263px; z-index: 25;">
<img src="http://s1005725.storeland.net/knopka_zakazat.png">
  </div>


Почему она не выделяется тенью?

#16 ne_yana

ne_yana

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

  • Модератоpы
  • 1 190 сообщений

Отправлено 04 Октябрь 2013 - 17:41

Просмотр сообщенияKorolev Andrey (04 Октябрь 2013 - 14:47) писал:

Сделал тень на кнопки "Сделать заказ", там где 6 тарифов:

.m4 a img:hover {
	 -moz-box-shadow: 2px 2px 10px #414141;
	 -webkit-box-shadow: 2px 2px 10px #414141;
	 box-shadow: 2px 6px 20px #414141; filter: progid:DXImageTransform.Microsoft.Shadow(color='#414141', Direction=145, Strength=3);
	 border-radius: 1px;
}


и код кнопки:

<div class="m4" style="position: absolute; width:980px; text-align: center; top: 4953px; right: -263px; z-index: 25;">
<img src="http://s1005725.storeland.net/knopka_zakazat.png">
</div>


Почему она не выделяется тенью?

Добрый вечер, чтобы у кнопок появилась тень, необходимо в конец файла main3.css добавить
.m4 img {
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


#17 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 08 Октябрь 2013 - 12:23

Модераторы, скажите как закруглить края полей формы?

Сайт: http://s1040687.storeland.ru/


чтобы было как на примере:

forma_kak.jpg

#18 ne_yana

ne_yana

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

  • Модератоpы
  • 1 190 сообщений

Отправлено 08 Октябрь 2013 - 13:15

Просмотр сообщенияKorolev Andrey (08 Октябрь 2013 - 12:23) писал:

Модераторы, скажите как закруглить края полей формы?

Сайт: http://s1040687.storeland.ru/


чтобы было как на примере:

Прикрепленный файл forma_kak.jpg

Добрый день, если Вы хотели добиться эффекта приведенного ниже, то найдите в админке в разделе Сайт - HTML после кода
.form-feedback .button_med {
	 width: 200px;
height: 40px;
border-radius: 12px;
background: #611770;
color: #ccc;
font-size: 18px;
}

вставьте

#nyroModalWrapper {
border-radius: 34px;
}

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

  • скрин.png


#19 Landing Page

Landing Page

    ✓Веб-дизайн ✓Landing Page ✓Яндекс Директ ✓Google Adwords

  • Пользователи
  • PipPipPipPip
  • 543 сообщений
  • ГородЧебоксары

Отправлено 08 Октябрь 2013 - 13:57

Спасибо конечно, но вы не поняли. Надо закруглить поля формы, а не всю область формы. Вот эти черные поля - они с острыми углами, а нужно чтобы чуть закругленные были.

ygli.jpg




Как надо:

ygli2.jpg

#20 ne_yana

ne_yana

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

  • Модератоpы
  • 1 190 сообщений

Отправлено 08 Октябрь 2013 - 14:06

Просмотр сообщенияKorolev Andrey (08 Октябрь 2013 - 13:57) писал:

Спасибо конечно, но вы не поняли. Надо закруглить поля формы, а не всю область формы. Вот эти черные поля - они с острыми углами, а нужно чтобы чуть закругленные были.

Прикрепленный файл ygli.jpg




Как надо:

Прикрепленный файл ygli2.jpg

В том же разделе найдите
.form-feedback .input {
		border: 2px #000 solid;
width: 330px;
height: 30px;
margin-bottom: 20px;
padding-left: 10px;
}
и замените на
.form-feedback .input {
border: 2px #000 solid;
width: 330px;
height: 30px;
margin-bottom: 20px;
padding-left: 10px;
border-radius: 6px;
}





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

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


    Bing (1)