Суть

Форма обратной связи. Отправляет данные на почту. В дополнение к ней идет немного скриптов для валидации и AJAX для дружелюбного интерфейса. За основу взята форма из примера в саппорте InSales, выкинуто не слишком нужное и добавлено нужное.

HTML

{% if settings.show_form %}
                    <div class="grid_6 form">
			<form id="feedback_form" class="contact" action="/client_account/feedback" method="post" role="form">
			    <h2>Быстрый контакт</h2>
							
			    <div class="name">
				<input type="text" name="feedback[name]" value="" class="required" placeholder="Имя">
			    </div><!-- .name -->
				
			    <div class="email" >
				<input id="maill" type="email" name="feedback[from]" value="" class="required" placeholder="E-mail">
			    </div><!-- .email -->
							
			    <div class="phone">
				<input type="text"  name="feedback[phone]" value="" placeholder="Телефон">
			    </div><!-- .phone -->
				
			    <div class="comment">
				<textarea name="feedback[content]" class="required" placeholder="Комментарий"></textarea>
			    </div><!-- .comment -->
				<div class="errorcont"><i class="errors"></i></div>
			    <div class="submit">
                  <a href="#" class="button" onclick="document.getElementById('fast-call_submit').click(); return false;">Отправить</a>
				<input type="hidden" id="fast-call_submit" value="Отправить">
			    </div><!-- .submit -->
              
		    </form><!-- .contact -->
                </div><!-- .grid_6 -->
{% endif %} 

Поля, доступные в движке магазина и используемые в форме:
feedback[from] — E-mail
feedback[content] — Сообщение
feedback[name] — Имя пользователя
feedback[phone] — Телефон

Стили добавляются по вкусу в соответствии с дизайном и фантазией.

Магия

<script type="text/javascript">
function validateEmail(email) { 
    var re = /\S+@\S+\.\S+/;
    return re.test(email);
} 
$(document).ready(function(){
     var modCallMeBack = $(".form");
    /* CallMeBack */
    $("#fast-call_submit", modCallMeBack).bind("click",function(e){
        e.preventDefault();

        var is_error = false;

        // проверка на дефолт
        $("input.required, textarea.required", modCallMeBack).each( function(){
          if(this.value==this.defaultValue){
            is_error = true;
            $(this).css("background","rgba(255, 0, 0, 0.2)");
          }
          else
          {
          $(this).css("background","#fff");
          }
        });
      	if  (validateEmail($('#maill').val())) {
		 $('#maill').css("background","#fff");    
      	}	
        else
        {
      	$('#maill').css("background","rgba(255, 0, 0, 0.2)");   
         is_error = true;
                                               }
        if(is_error == true) {
          $('.form .errors').html('Не все поля заполнены правильно!');
          return
        }

      
      
        var form = $('#feedback_form',modCallMeBack);
        var fields = form.serialize();
        $.ajax({
            url:      form.attr('action') + '.json',
            type:     'post',
            data:     fields,
            dataType: 'json',
            complete: function() { },
            success:  function(response) {
                if ( response.status == 'ok' ) {
					$('.form .errors').html('Сообщение отправлено!');	
                } else {
                    $('.form .errors').html('Ошибка!');
                }
            }
        });
    });
});
</script>

Суть всей магии довольно проста.

При нажатии на кнопку, создается переменная is_error, которая сигнализирует об ошибках в заполнении. Сначала проверяется, заполнены ли поля вообще, и если нет то пустое поле становится красным. Что важно, поле становится белым, если оно успешно проходит проверку, потому что используется AJAX и страница не перезагружается при отправке.

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

var re = /^\d{10}$/;

Если есть ошибки — выводим надпись о том, что они есть и прерываем выполнение скрипта, а цвета полей подскажут что нужно исправить.

Далее все завершает AJAX. Поля формы преобразуются в json и отправляются на сервер. Письмо отправлено, все довольны. Для подтверждения общей довольности выводим надпись об успешности отправки. На всякий случай предусматриваем возможность написать об ошибке.