Skip to content

Instantly share code, notes, and snippets.

@zaurmag

zaurmag/feedback-form

Last active November 30, 2017 08:58
Show Gist options
  • Save zaurmag/5a854987d76d39453ab1efd926aba000 to your computer and use it in GitHub Desktop.
Save zaurmag/5a854987d76d39453ab1efd926aba000 to your computer and use it in GitHub Desktop.
Download ZIP
Простая форма обратной связи на ajax
Raw
feedback-form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Простая форма связи на ajax</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// ======= Ajax Submit Form Plugin =======
(function($) {
jQuery.fn.sendForm = function(options) {
options = $.extend({
successTitle: "Спасибо, что выбрали нас!",
successText: "Мы свяжемся с Вами в ближайшее время.",
errorTitle: "Сообщение не отправлено!",
errorSubmit: "Ошибка отправки формы!",
mailUrl: "../form-submit/submit.php",
submitText: "Отправляю",
autoClose: false,
autoCloseDelay: 5000
}, options);
var make = function() {
var $this = $(this);
$(this).submit(function() {
var data = $(this).serialize(),
submitBtnText = $this.find('.btn-submit').text();
$.ajax({
url: options.mailUrl,
type: "POST",
data: data,
beforeSend: function() {
$this.find('.btn-submit').text(options.submitText).addClass('sending');
},
success: function(res) {
if (res == 1) {
$this[0].reset();
$this.find('.form__hide-success').slideUp().delay(5000).slideDown();
$this.find('.btn-submit').text(submitBtnText).removeClass('sending');
$this.find('.form__hide-success').after('<div class="form__sys-message"></div>');
$this.find('.form__sys-message').html('<div class="form__success-title">' + options.successTitle + '</div><p class = "form__success-text" >' + options.successText + '</p>');
setTimeout(function() {
$this.find('.form__sys-message').fadeOut().delay(3000).remove();
if (options.autoClose) {
$.magnificPopup.close();
}
}, options.autoCloseDelay);
} else {
$this.find('.btn-submit').text(submitBtnText).removeClass('sending');
$this.append('<div class="form__error">' + options.errorSubmit + '</div>');
setTimeout(function() {
$this.find('.form__error').remove();
}, 5000);
}
},
error: function() {
$this.find('.btn-submit').text(submitBtnText).removeClass('sending');
$this.append('<div class="form__error">' + options.errorSubmit + '</div>');
setTimeout(function() {
$this.find('.form__error').remove();
}, 5000);
}
});
return false;
});
} // end make
return this.each(make);
};
})(jQuery);
jQuery.(document).ready(function() {
// ======= Init ajax form =======
$('#feedbackForm').sendForm({
//mailUrl: "/templates/template_zm_it/form-submit/submit.php"
});
});
</script>
</head>
<body>
<div class="form">
<form action="#" class="form__form">
<fieldset class="form__fields form__hide-success">
<div class="control-group">
<div class="row">
<div class="col-md-6">
<input type="text" class="inputbox" name="name" placeholder="Имя*" required="required" />
</div>
<div class="col-md-6">
<input type="email" class="inputbox" name="email" placeholder="E-mail*" required="required" />
</div>
</div>
</div>
<div class="control-group">
<input type="text" class="inputbox" name="subject" placeholder="Тема*" required="required" />
</div>
<div class="control-group">
<textarea name="message" class="textbox" cols="30" rows="10" placeholder="Сообщение*"></textarea>
</div>
<input type="hidden" name="go" value="5">
<div class="control-group">
<button type="submit" class="btn-submit btn btn-black btn-s50">
Отправить
</button>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment