подскажите красивую форму обратной связи - страница 16 - Поиск компонентов, модулей, плагинов

{element label="Какая мышка нравится больше?:" type="select"}
      {option label="Серая" value="Серая" /}
      {option label="Белая" value="Белая" /}
      {option label="С большими глазами" value="С большими глазами" /}
{/element}

	$subject = $subject.' от '.$date; 

	$fp = fopen('modules/mod_simpleform2/zak.txt', 'r+'); //Открываем файл
	$nz = fgets($fp); 
	$nz++; // Добавляем 1

	$subject = $subject.' №'.$nz.' от '.$date; //Добавляем переменную в тему письма

	fseek($fp, 0); 
	fwrite($fp, $nz); //Записываем переменную $nz
	fclose($fp);  // Закрываем файл

	$new_row = $subject; // Новая переменная (содержит тему письма)
	$body = $this->getTemplate('mail_form',array('url'=>$url,'date'=>$date,'ip'=>$ip,'rows'=>$result, 'new_row'=>$new_row));

	<?php echo JTEXT::_('Form content');?>

	<?php echo $new_row;?>

<a href="#" onclick="return hs.htmlExpand(this, { contentId: 'highslide-html2' } )" class="highslide1">Задать вопрос специалисту</a>
<div class="highslide-html-content" id="highslide-html2">
	<div class="highslide-header">

<ul>
<li style="margin-top:5px;margin-left:5px;font-family:Tahoma;font-size:16px;font-size:14px;font-weight:bold;float:left;">Задать вопрос специалисту</li>
			<li class="highslide-move">
				<a href="#" onclick="return false"><img src="images/icon/move2.png"></a>
			</li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this)"><img src="images/icon/close2.png"></a>
			</li>
		</ul>
	</div>
	<div class="highslide-body">
{form}
<p>{element label="Ваше имя" type="text" class="inputtext" required="required" error="Введите ваше имя" /}</p>
<p>{element label="Ваш E-mail" type="text" class="inputtext" required="required" error="E-mail не введен или введен некорректно" regex="/^[\w\.\-]+@\w+[\w\.\-]*?\.\w{1,4}$/" /}</p>
<p>{element label="Сообщение" type="textarea" class="inputtext" required="required" error="Введите ваше сообщение" /}</p>
<p>{element label="Введите цифры<br>с картинки" class="captcha" type="captcha" required="required" error="Неверно введен проверочный код с картинки" width="110" height="40" /}</p>
<p>{element type="submit" class="button" value="Отправить" /}</p>
{/form}
</div></div>

{form}
<p>{element label="Телефон" class="form-field" type="text" required="required" error="Введите номер телефона" /}</p>
<p>{element label="Ваше имя и сообщение" class="form-field" type="textarea" required="required" error="Введите ваше имя и сообщение" /}</p>
{element type="captcha" class="inputtext" width="50" height="50" label="Проверочный код" /}</p>
<p class="submit-container">{element value="Отправить заявку" class="form-button" type="submit" /}</p>
{/form}
<style type="text/css">.simpleForm { border: 1px solid #5870e8; background: #a1d8fc; background: -webkit-gradient(linear, left top, left bottom, from(#99b1fa), to(#a1d8fc)); background: -webkit-linear-gradient(top, #99b1fa, #a1d8fc); background: -moz-linear-gradient(top, #99b1fa, #a1d8fc); background: -ms-linear-gradient(top, #99b1fa, #a1d8fc); background: -o-linear-gradient(top, #99b1fa, #a1d8fc); background-image: -ms-linear-gradient(top, #99b1fa 0%, #a1d8fc 100%); -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; font-family: 'Helvetica Neue',Helvetica,sans-serif; text-decoration: none; vertical-align: middle; padding:20px;} .form-field { border: 1px solid #8cabfa; background: #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #33312e; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; padding:5px; width:90%;} textarea.form-field{height:80px;}.form-field:focus { background: #fff; color: #45423e;} .simpleForm label { margin-bottom:5px; display:block; font-weight:bold; color: #4d4c4b; text-shadow: #fdf2e4 0 1px 0;} .simpleForm p{margin:0 0 20px;}.simpleForm p.submit-container { margin:0; text-align:right;} .form-button { border: 1px solid #447314; background: #6aa436; background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436)); background: -webkit-linear-gradient(top, #8dc059, #6aa436); background: -moz-linear-gradient(top, #8dc059, #6aa436); background: -ms-linear-gradient(top, #8dc059, #6aa436); background: -o-linear-gradient(top, #8dc059, #6aa436); background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%); -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #addc7e 0 1px 0; color: #31540c; font-family: helvetica, serif; padding: 8.5px 18px; font-size: 14px; text-decoration: none; vertical-align: middle; cursor:pointer;} .form-button:hover { border: 1px solid #447314; text-shadow: #31540c 0 1px 0; background: #6aa436; background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436)); background: -webkit-linear-gradient(top, #8dc059, #6aa436); background: -moz-linear-gradient(top, #8dc059, #6aa436); background: -ms-linear-gradient(top, #8dc059, #6aa436); background: -o-linear-gradient(top, #8dc059, #6aa436); background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%); color: #fff;} .form-button:active { text-shadow: #31540c 0 1px 0; border: 1px solid #447314; background: #8dc059; background: -webkit-gradient(linear, left top, left bottom, from(#6aa436), to(#6aa436)); background: -webkit-linear-gradient(top, #6aa436, #8dc059); background: -moz-linear-gradient(top, #6aa436, #8dc059); background: -ms-linear-gradient(top, #6aa436, #8dc059); background: -o-linear-gradient(top, #6aa436, #8dc059); background-image: -ms-linear-gradient(top, #6aa436 0%, #8dc059 100%); color: #fff;} </style>

#right .moduletable {
    position: fixed;
}

{form}
<p>{element label="Телефон" class="form-field" type="text" required="required" error="Введите номер телефона" /}</p>
<p>{element label="Ваше имя и сообщение" class="form-field" type="textarea" required="required" error="Введите ваше имя и сообщение" /}</p>
{element type="captcha" class="inputtext" width="50" height="50" label="Проверочный код" /}</p>
<p class="submit-container">{element value="Отправить заявку" class="form-button" type="submit" /}</p>
{/form}
<style type="text/css">.simpleForm { border: 1px solid #5870e8; background: #a1d8fc; background: -webkit-gradient(linear, left top, left bottom, from(#99b1fa), to(#a1d8fc)); background: -webkit-linear-gradient(top, #99b1fa, #a1d8fc); background: -moz-linear-gradient(top, #99b1fa, #a1d8fc); background: -ms-linear-gradient(top, #99b1fa, #a1d8fc); background: -o-linear-gradient(top, #99b1fa, #a1d8fc); background-image: -ms-linear-gradient(top, #99b1fa 0%, #a1d8fc 100%); -webkit-border-radius: 21px; -moz-border-radius: 21px; border-radius: 21px; -webkit-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; -moz-box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; box-shadow: rgba(000,000,000,0.9) 0 1px 2px, inset rgba(255,255,255,0.4) 0 0px 0; font-family: 'Helvetica Neue',Helvetica,sans-serif; text-decoration: none; vertical-align: middle; padding:20px;} .form-field { border: 1px solid #8cabfa; background: #ffffff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #33312e; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; padding:5px; width:90%;} textarea.form-field{height:80px;}.form-field:focus { background: #fff; color: #45423e;} .simpleForm label { margin-bottom:5px; display:block; font-weight:bold; color: #4d4c4b; text-shadow: #fdf2e4 0 1px 0;} .simpleForm p{margin:0 0 20px;}.simpleForm p.submit-container { margin:0; text-align:right;} .form-button { border: 1px solid #447314; background: #6aa436; background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436)); background: -webkit-linear-gradient(top, #8dc059, #6aa436); background: -moz-linear-gradient(top, #8dc059, #6aa436); background: -ms-linear-gradient(top, #8dc059, #6aa436); background: -o-linear-gradient(top, #8dc059, #6aa436); background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%); -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0; text-shadow: #addc7e 0 1px 0; color: #31540c; font-family: helvetica, serif; padding: 8.5px 18px; font-size: 14px; text-decoration: none; vertical-align: middle; cursor:pointer;} .form-button:hover { border: 1px solid #447314; text-shadow: #31540c 0 1px 0; background: #6aa436; background: -webkit-gradient(linear, left top, left bottom, from(#8dc059), to(#6aa436)); background: -webkit-linear-gradient(top, #8dc059, #6aa436); background: -moz-linear-gradient(top, #8dc059, #6aa436); background: -ms-linear-gradient(top, #8dc059, #6aa436); background: -o-linear-gradient(top, #8dc059, #6aa436); background-image: -ms-linear-gradient(top, #8dc059 0%, #6aa436 100%); color: #fff;} .form-button:active { text-shadow: #31540c 0 1px 0; border: 1px solid #447314; background: #8dc059; background: -webkit-gradient(linear, left top, left bottom, from(#6aa436), to(#6aa436)); background: -webkit-linear-gradient(top, #6aa436, #8dc059); background: -moz-linear-gradient(top, #6aa436, #8dc059); background: -ms-linear-gradient(top, #6aa436, #8dc059); background: -o-linear-gradient(top, #6aa436, #8dc059); background-image: -ms-linear-gradient(top, #6aa436 0%, #8dc059 100%); color: #fff;}
#right .moduletable {
    position: fixed;
}
</style>

<style>
.prilip {
  position: fixed;
  z-index: 101;
}
.stop {
  position: relative;
}
</style>

<script>
var aside = document.querySelector('aside'),
    HTMLtop = document.documentElement.getBoundingClientRect().top,
    t0 = aside.getBoundingClientRect().top - HTMLtop,
    t2 = document.querySelector('article').getBoundingClientRect().bottom - HTMLtop - aside.offsetHeight;
function asideScroll() {
  if (window.pageYOffset > t2) {
    aside.className = 'stop';
    aside.style.top = t2 - t0 + 'px';
  } else {
    aside.className = (t0 < window.pageYOffset ? 'prilip' : '');
    aside.style.top = '0';
  }
}
window.addEventListener('scroll', asideScroll, false);
</script>