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


Форма Онлайн Заявки


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

#1 alpha-me

alpha-me

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

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

Отправлено 27 Июнь 2015 - 15:11

Подскажите пожалуйста как сделать форму онлайн заявки на сайт с отправкой данных на почту?
Мне нужны: номер телефона; имя; текст сообщения.
SL-346105

#2 MikDark

MikDark

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

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

Отправлено 27 Июнь 2015 - 15:43

Просмотр сообщенияalpha-me (27 Июнь 2015 - 15:11) писал:

Подскажите пожалуйста как сделать форму онлайн заявки на сайт с отправкой данных на почту?
Мне нужны: номер телефона; имя; текст сообщения.
SL-346105

Здравствуйте. Уточните, где Вы хотите, чтобы отображалась кнопка вызова формы?

#3 alpha-me

alpha-me

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

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

Отправлено 27 Июнь 2015 - 15:46

Просмотр сообщенияMikDark (27 Июнь 2015 - 15:43) писал:

Здравствуйте. Уточните, где Вы хотите, чтобы отображалась кнопка вызова формы?

хочу, что бы отображалась в верхнем меню

#4 MikDark

MikDark

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

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

Отправлено 27 Июнь 2015 - 16:48

Просмотр сообщенияalpha-me (27 Июнь 2015 - 15:46) писал:

хочу, что бы отображалась в верхнем меню

1) В шаблоне HTML добавляем перед </head>:
<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

2) Далее там же ищем:
<ul class="clearfix">
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		</ul>

и меняем на:

<ul class="clearfix">
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
<li><a href="[url="http://{NET_DOMAIN}/callback?only_body=1"]http://{NET_DOMAIN}/...ck?only_body=1"[/url] class="callback fancybox.ajax">Обратный звонок</a></li>
		</ul>

3) Скачайте приложенный архив, и его содержимой залейте в раздел Сайт - Редактор шаблонов.

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

  • Прикрепленный файл  callback.zip   1,54К   55 Количество загрузок:


#5 alpha-me

alpha-me

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

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

Отправлено 27 Июнь 2015 - 19:15

Просмотр сообщенияMikDark (27 Июнь 2015 - 16:48) писал:

1) В шаблоне HTML добавляем перед </head>:
<script>
$(document).ready(function() {
$(".callback").fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>

2) Далее там же ищем:
<ul class="clearfix">
			{% FOR menu %}
			 {% FOR header %}
				{% FOR links %}
				 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			 {% ENDFOR %}
			{% ENDFOR %}
		</ul>

и меняем на:

<ul class="clearfix">
			{% FOR menu %}
			 {% FOR header %}
				{% FOR links %}
				 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			 {% ENDFOR %}
			{% ENDFOR %}
<li><a href="[url="http://{NET_DOMAIN}/callback?only_body=1"]http://{NET_DOMAIN}/...ck?only_body=1"[/url] class="callback fancybox.ajax">Обратный звонок</a></li>
		</ul>

3) Скачайте приложенный архив, и его содержимой залейте в раздел Сайт - Редактор шаблонов.

Сделал все как написано. Нажимаешь обратный звонок, выводитобратный звонок.jpg

#6 MikDark

MikDark

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

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

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

Просмотр сообщенияalpha-me (27 Июнь 2015 - 19:15) писал:

Сделал все как написано. Нажимаешь обратный звонок, выводитПрикрепленный файл обратный звонок.jpg

Изменения Вам произвели, теперь форма появляется. Уточните, какие поля нужны и возможно что хотите внешне изменить.

#7 alpha-me

alpha-me

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

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

Отправлено 27 Июнь 2015 - 19:38

Просмотр сообщенияMikDark (27 Июнь 2015 - 19:30) писал:

Изменения Вам произвели, теперь форма появляется. Уточните, какие поля нужны и возможно что хотите внешне изменить.

Работает)
Можно сделать так, чтобы осталось только: представьтесь пожалуйста, номер телефона и комментарий, а фон сделать зеленым как в шапке?

#8 Firefly

Firefly

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

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

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

Просмотр сообщенияalpha-me (27 Июнь 2015 - 19:38) писал:

Работает)
Можно сделать так, чтобы осталось только: представьтесь пожалуйста, номер телефона и комментарий, а фон сделать зеленым как в шапке?

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.required { border:1px solid red	 ;  }

Замените на:
.required { /* border:1px solid red; */ }

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Обратный звонок, замените содержимое на:
<style>
  input#callback_person {border:1px solid #000;padding:3px 0;}
  input#callback_phone {border:1px solid #000;padding:3px 0;}
  table.form td {padding: 3px 0;}
  .box {background-color: #00CD26; border-radius: 5px;}
</style>
<div class="box">
  <div class="content">
	{% IF FORM_NOTICE %}
	  <div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div>
	{% ENDIF %}
	<h1>Заказ обратного звонка</h1>
	  <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
	  <input type="hidden" name="hash" value="{HASH}" />
	  <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
	  {ANTISPAM_CODE}
	  <table class="form">
		<tr>
		  <td><label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label></td>
		  <td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
		</tr>
		<tr>
		  <td><label for="callback_phone" class="required">Телефон<em>*</em></label></td>
		  <td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
		</tr>
		<tr>
		  <td><label for="callback_comment">Комментарий</label></td>
		  <td><textarea id="callback_comment" rows="7" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" >{FORM_CALLBACK_COMMENT}</textarea></td>
		</tr>
	  </table>
	  <div class="buttons">
		<div class="left">
		  <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
		</div>
		<div class="right">
		  {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
		</div>
	  </div>
	</form>
  </div>
</div>


#9 alpha-me

alpha-me

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

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

Отправлено 28 Июнь 2015 - 14:33

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

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.required { border:1px solid red	 ; }

Замените на:
.required { /* border:1px solid red; */ }

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Обратный звонок, замените содержимое на:
<style>
input#callback_person {border:1px solid #000;padding:3px 0;}
input#callback_phone {border:1px solid #000;padding:3px 0;}
table.form td {padding: 3px 0;}
.box {background-color: #00CD26; border-radius: 5px;}
</style>
<div class="box">
<div class="content">
{% IF FORM_NOTICE %}
	 <div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div>
{% ENDIF %}
<h1>Заказ обратного звонка</h1>
	 <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
	 <input type="hidden" name="hash" value="{HASH}" />
	 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
	 {ANTISPAM_CODE}
	 <table class="form">
	 <tr>
		 <td><label for="callback_person" class="required">Представьтесь пожалуйста<em>*</em></label></td>
		 <td><input id="callback_person" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" maxlength="50" class="required"/></td>
	 </tr>
	 <tr>
		 <td><label for="callback_phone" class="required">Телефон<em>*</em></label></td>
		 <td><input id="callback_phone" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" maxlength="255" class="required input-text"/></td>
	 </tr>
	 <tr>
		 <td><label for="callback_comment">Комментарий</label></td>
		 <td><textarea id="callback_comment" rows="7" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_COMMENT}]" >{FORM_CALLBACK_COMMENT}</textarea></td>
	 </tr>
	 </table>
	 <div class="buttons">
	 <div class="left">
		 <p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>
</form>
</div>
</div>

Уже лучше! Спасибо!

Подскажите как:
1) Тексту присвоить черный цвет
2) "заказ обратного звонка" сделать по центру
3) кнопку "отправить" поставить под форму комментария
4) надпись "комментарий" поднять вверх

#10 Firefly

Firefly

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

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

Отправлено 28 Июнь 2015 - 15:38

Просмотр сообщенияalpha-me (28 Июнь 2015 - 14:33) писал:

Уже лучше! Спасибо!

Подскажите как:
1) Тексту присвоить черный цвет
2) "заказ обратного звонка" сделать по центру
3) кнопку "отправить" поставить под форму комментария
4) надпись "комментарий" поднять вверх

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Обратный звонок, найдите код:
<style>
input#callback_person {border:1px solid #000;padding:3px 0;}
input#callback_phone {border:1px solid #000;padding:3px 0;}
table.form td {padding: 3px 0;}
.box {background-color: #00CD26; border-radius: 5px;}
</style>

Замените на:
<style>
h1 {text-align:center; padding: 20px;}
input#callback_person {border:1px solid #000;padding:3px 0;}
input#callback_phone {border:1px solid #000;padding:3px 0;}
table.form td {padding: 7px 3px 7px 3px; vertical-align: top;}
.box {color: #000000; background-color: #00CD26; border-radius: 5px;}
.buttons .left {margin: 3px;}
.buttons .right {text-align: right; margin: 3px;}
button.button {border-radius: 5px; margin: 3px;}
</style>


#11 alpha-me

alpha-me

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

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

Отправлено 28 Июнь 2015 - 18:16

Просмотр сообщенияFirefly (28 Июнь 2015 - 15:38) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Обратный звонок, найдите код:
<style>
input#callback_person {border:1px solid #000;padding:3px 0;}
input#callback_phone {border:1px solid #000;padding:3px 0;}
table.form td {padding: 3px 0;}
.box {background-color: #00CD26; border-radius: 5px;}
</style>

Замените на:
<style>
h1 {text-align:center; padding: 20px;}
input#callback_person {border:1px solid #000;padding:3px 0;}
input#callback_phone {border:1px solid #000;padding:3px 0;}
table.form td {padding: 7px 3px 7px 3px; vertical-align: top;}
.box {color: #000000; background-color: #00CD26; border-radius: 5px;}
.buttons .left {margin: 3px;}
.buttons .right {text-align: right; margin: 3px;}
button.button {border-radius: 5px; margin: 3px;}
</style>

Спасибо!

Подскажите еще как сделать:
1) чтобы после отправки было написано ЗАПРОС ОБРАТНОГО ЗВОНКА УСПЕШНО ОТПРАВЛЕН В СЕРВИСНЫЙ ЦЕНТР.сервисный центр.jpg
2) чтобы после вызова формы остальные элементы сайта не съезжалиубежало.jpg

#12 alpha-me

alpha-me

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

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

Отправлено 29 Июнь 2015 - 23:01

Про меня забыли???




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

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