Staticman - try to avoid spam by using javascript to write the form action (#521)
This commit is contained in:
Vincent Tam
Dean Attali
parent
35647fdad5
commit
c74b5030c6
@ -20,7 +20,7 @@
|
||||
<div class="page__comments-form">
|
||||
<h3 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h3>
|
||||
<p class="small">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
|
||||
<form id="new_comment" class="page__comments-form js-form form" method="post" action="{{ site.staticman.endpoint | default: 'https://staticman3.herokuapp.com/v3/entry/github/' }}{{ site.staticman.repository }}/{{ site.staticman.branch }}/comments">
|
||||
<form id="new_comment" class="page__comments-form js-form form" method="post">
|
||||
<div class="form-group">
|
||||
<label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label><br>
|
||||
<textarea type="text" rows="12" cols="36" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
|
||||
@ -48,7 +48,8 @@
|
||||
</div>
|
||||
<!-- Start comment form alert messaging -->
|
||||
<p class="hidden js-notice">
|
||||
<strong class="js-notice-text"></strong>
|
||||
<strong class="js-notice-text-success hidden">{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}</strong>
|
||||
<strong class="js-notice-text-failure hidden">{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}</strong>
|
||||
</p>
|
||||
<!-- End comment form alert messaging -->
|
||||
{% if site.staticman.reCaptcha.siteKey %}
|
||||
@ -58,6 +59,7 @@
|
||||
{% endif %}
|
||||
<div class="form-group">
|
||||
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--primary btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
|
||||
<button type="submit" id="comment-form-submitted" tabindex="5" class="btn btn--primary btn--large hidden" disabled>{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -67,6 +69,13 @@
|
||||
<script async src="https://www.google.com/recaptcha/api.js"></script>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Load script to handle comment form submission -->
|
||||
{% include staticman-script.html %}
|
||||
<!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
|
||||
<script>
|
||||
if (typeof jQuery == 'undefined') {
|
||||
document.write('<script src="{{ "/js/jquery-1.11.2.min.js" | relative_url }}"></scr' + 'ipt>');
|
||||
}
|
||||
</script>
|
||||
<script src="{{ "/js/staticman.js" | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
{% if site.staticman.repository and site.staticman.branch %}
|
||||
<!-- doing something a bit funky here because I want to be careful not to include JQuery twice! -->
|
||||
<script>
|
||||
if (typeof jQuery == 'undefined') {
|
||||
document.write('<script src="{{ "/js/jquery-1.11.2.min.js" | relative_url }}"></scr' + 'ipt>');
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
(function ($) {
|
||||
var $comments = $('.js-comments');
|
||||
|
||||
$('#new_comment').submit(function () {
|
||||
var form = this;
|
||||
|
||||
$(form).addClass('disabled');
|
||||
|
||||
$.ajax({
|
||||
type: $(this).attr('method'),
|
||||
url: $(this).attr('action'),
|
||||
data: $(this).serialize(),
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
success: function (data) {
|
||||
$('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
|
||||
$('.page__comments-form .js-notice').removeClass('notice--danger');
|
||||
$('.page__comments-form .js-notice').addClass('notice--success');
|
||||
showAlert('{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
|
||||
},
|
||||
error: function (err) {
|
||||
console.log(err);
|
||||
$('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}');
|
||||
$('.page__comments-form .js-notice').removeClass('notice--success');
|
||||
$('.page__comments-form .js-notice').addClass('notice--danger');
|
||||
showAlert('{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
|
||||
$(form).removeClass('disabled');
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
function showAlert(message) {
|
||||
$('.page__comments-form .js-notice').removeClass('hidden');
|
||||
$('.page__comments-form .js-notice-text').html(message);
|
||||
}
|
||||
})(jQuery);
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -66,13 +66,6 @@
|
||||
.staticman-comments .form {
|
||||
position: relative;
|
||||
}
|
||||
/*
|
||||
Disabled state
|
||||
========================================================================== */
|
||||
.staticman-comments input[disabled][disabled], .staticman-comments textarea[disabled], .staticman-comments input[readonly][readonly], .staticman-comments textarea[readonly] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/*
|
||||
Focus & active state
|
||||
========================================================================== */
|
||||
|
||||
54
js/staticman.js
Normal file
54
js/staticman.js
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
layout: null
|
||||
---
|
||||
|
||||
(function ($) {
|
||||
var $comments = $('.js-comments');
|
||||
|
||||
$('#new_comment').submit(function () {
|
||||
var form = this;
|
||||
|
||||
$(form).addClass('disabled');
|
||||
|
||||
{% assign sm = site.staticman -%}
|
||||
var endpoint = '{{ sm.endpoint | default: "https://staticman3.herokuapp.com/v3/entry/github/" }}';
|
||||
var repository = '{{ sm.repository }}';
|
||||
var branch = '{{ sm.branch }}';
|
||||
|
||||
$.ajax({
|
||||
type: $(this).attr('method'),
|
||||
url: endpoint + repository + '/' + branch + '/comments',
|
||||
data: $(this).serialize(),
|
||||
contentType: 'application/x-www-form-urlencoded',
|
||||
success: function (data) {
|
||||
$('#comment-form-submit').addClass('hidden');
|
||||
$('#comment-form-submitted').removeClass('hidden');
|
||||
$('.page__comments-form .js-notice').removeClass('notice--danger');
|
||||
$('.page__comments-form .js-notice').addClass('notice--success');
|
||||
showAlert('success');
|
||||
},
|
||||
error: function (err) {
|
||||
console.log(err);
|
||||
$('#comment-form-submitted').addClass('hidden');
|
||||
$('#comment-form-submit').removeClass('hidden');
|
||||
$('.page__comments-form .js-notice').removeClass('notice--success');
|
||||
$('.page__comments-form .js-notice').addClass('notice--danger');
|
||||
showAlert('failure');
|
||||
$(form).removeClass('disabled');
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
function showAlert(message) {
|
||||
$('.page__comments-form .js-notice').removeClass('hidden');
|
||||
if (message == 'success') {
|
||||
$('.page__comments-form .js-notice-text-success').removeClass('hidden');
|
||||
$('.page__comments-form .js-notice-text-failure').addClass('hidden');
|
||||
} else {
|
||||
$('.page__comments-form .js-notice-text-success').addClass('hidden');
|
||||
$('.page__comments-form .js-notice-text-failure').removeClass('hidden');
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user