- Автор темы
- #1
Как сделать обработчик для формы обратной связи:
так же есть файл js
Вот обработчика нет, чтоб отправлял на маил.
Код:
<div class="cm1-bg">
<div class="cm1-form">
<div class="cm1-form-inner">
<div class="cm1-title">Заполните форму заказа</div>
<a class="cm1-close" href="index.html#" title="Закрыть"></a>
<div class="form purple">
<form action="http://ссылка на обработчик" class="form2">
<input type="hidden" name="source" value="" />
<div class="form-input"><label class="name"><input type="text" name="name" value="" placeholder="Ваше имя" /></label></div>
<div class="form-input"><label class="phone"><input type="text" name="phone" value="" placeholder="Ваш номер телефона" /></label></div>
<div class="form-input"><label class="email"><input type="text" name="email" value="" placeholder="Ваш email" /></label></div>
<div class="form-select">
<select name="reason" class="styled">
<option value="Необходима консультация1">Необходима консультация1</option>
<option value="Необходима консультация2">Необходима консультация2</option>
<option value="Необходима консультация3">Необходима консультация3</option>
<option value="Необходима консультация4">Необходима консультация4</option>
</select>
</div>
<div class="form-button"><input type="submit" value="Отправить" /></div>
<div class="cm1-result"></div>
</form>
</div>
</div>
</div>
</div>так же есть файл js
Код:
jQuery(function(){
/*****************************************************************/
jQuery('.show-form').click(function(){
var link = jQuery(this);
var hidden = jQuery('.cm1-form form input[name="source"]');
hidden.val(jQuery(this).attr('data-source'));
jQuery('.cm1-bg').fadeIn();
return false;
});
jQuery('.cm1-close').click(function(){
jQuery('.cm1-bg').fadeOut();
return false;
});
/*****************************************************************/
// форма в шапке и подвале
jQuery('.form1').submit(function(){
var form = jQuery(this);
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
dataType: 'json',
beforeSend: function(jqXHR, settings){
if( !validate_form(form) ){
jqXHR.abort();
return;
}
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
success: function(data, textStatus, jqXHR){
// сообщение
window.alert(strip_tags(data.html));
// успешная обработка
if( data.status == 1 ){
// очистка данных
form.find('input[type="text"]').val('');
}
// возвращаем активность кнопке формы
form.find('input[type="submit"]').removeAttr('disabled');
return;
},
error: function(){
alert('error. try again');
return;
}
});
return false;
});
/*****************************************************************/
// скрытая форма в шапке, тарифах, подвале
jQuery('.form2').submit(function(){
var form = jQuery(this);
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
dataType: 'json',
beforeSend: function(jqXHR, settings){
if( !validate_form(form) ){
jqXHR.abort();
return;
}
form.find('input[type="submit"]').attr('disabled', 'disabled');
},
success: function(data, textStatus, jqXHR){
// удаляем дочерние элементы у result
form.find('.cm1-result').children().slideUp(function(){
jQuery(this).remove();
});
// добавляем новые дочерние элементы в result
var content = jQuery(data.html).hide();
form.find('.cm1-result').append(content);
content.slideDown();
setTimeout(function(){
content.slideUp(function(){
jQuery(this).remove();
});
}, 3000);
// успешная обработка
if( data.status == 1 ){
// очистка данных
form.find('input[type="text"]').val('');
// таймер для автозакрытия формы при успешной обработке
if( form.myTimer )
clearTimeout(form.myTimer);
form.myTimer = setTimeout(function(){
form.find('.cm1-close').click()
}, 3000);
}
// возвращаем активность кнопке формы
form.find('input[type="submit"]').removeAttr('disabled');
return;
},
error: function(){
alert('error. try again');
return;
}
});
return false;
});
/*****************************************************************/
function validate_form(form){
var result = true;
var name = form.find('.name input');
var phone = form.find('.phone input');
var email = form.find('.email input');
form.find('.form-input input').on({
click: function () {
jQuery(this).removeClass('error');
},
});
name.on('click');
if( name.val() == '' ){
name.addClass('error');
result = false;
}
phone.on('click');
if( phone.val() == '' ){
phone.addClass('error');
result = false;
}
email.on('click');
if( !valid_email(email.val()) ){
email.addClass('error');
result = false;
}
return result;
}
function valid_email(email){
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
function valid_phone(phone){
var regex = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
return regex.test(phone);
}
function strip_tags(content){
return content.replace(/(<([^>]+)>)/ig,"");
}
});
