Improve UX of comment form

- Remove modal and insert notices above submit button
- Disable form on successfully submission
- Add "loading..." icon and text to button on submit
- Remove unused text string translations
This commit is contained in:
Michael Rose 2016-08-11 22:32:27 -04:00
parent 3a9350d54c
commit 804b2171a6
4 changed files with 50 additions and 62 deletions

View file

@ -36,11 +36,8 @@ en: &DEFAULT_EN
comment_form_website_label : "Website (optional)" comment_form_website_label : "Website (optional)"
comment_btn_submit : "Submit Comment" comment_btn_submit : "Submit Comment"
comment_btn_submitted : "Submitted" comment_btn_submitted : "Submitted"
comment_success_title : "Comment submitted"
comment_success_msg : "Thanks for your comment! It will show on the site once it has been approved." comment_success_msg : "Thanks for your comment! It will show on the site once it has been approved."
comment_error_title : "Error"
comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
close_btn_label : "close"
loading_label : "Loading..." loading_label : "Loading..."
en-US: en-US:
<<: *DEFAULT_EN <<: *DEFAULT_EN
@ -87,11 +84,8 @@ es: &DEFAULT_ES
comment_form_website_label : comment_form_website_label :
comment_btn_submit : comment_btn_submit :
comment_btn_submitted : comment_btn_submitted :
comment_success_title :
comment_success_msg : comment_success_msg :
comment_error_title :
comment_error_msg : comment_error_msg :
close_btn_label :
loading_label : loading_label :
es-ES: es-ES:
<<: *DEFAULT_ES <<: *DEFAULT_ES
@ -134,11 +128,8 @@ fr: &DEFAULT_FR
comment_form_website_label : comment_form_website_label :
comment_btn_submit : comment_btn_submit :
comment_btn_submitted : comment_btn_submitted :
comment_success_title :
comment_success_msg : comment_success_msg :
comment_error_title :
comment_error_msg : comment_error_msg :
close_btn_label :
loading_label : loading_label :
fr-FR: fr-FR:
<<: *DEFAULT_FR <<: *DEFAULT_FR
@ -183,11 +174,8 @@ tr: &DEFAULT_TR
comment_form_website_label : comment_form_website_label :
comment_btn_submit : comment_btn_submit :
comment_btn_submitted : comment_btn_submitted :
comment_success_title :
comment_success_msg : comment_success_msg :
comment_error_title :
comment_error_msg : comment_error_msg :
close_btn_label :
loading_label : loading_label :
tr-TR: tr-TR:
<<: *DEFAULT_TR <<: *DEFAULT_TR
@ -228,11 +216,8 @@ pt: &DEFAULT_PT
comment_form_website_label : comment_form_website_label :
comment_btn_submit : comment_btn_submit :
comment_btn_submitted : comment_btn_submitted :
comment_success_title :
comment_success_msg : comment_success_msg :
comment_error_title :
comment_error_msg : comment_error_msg :
close_btn_label :
loading_label : loading_label :
pt-BR: pt-BR:
<<: *DEFAULT_PT <<: *DEFAULT_PT
@ -275,11 +260,8 @@ it: &DEFAULT_IT
comment_form_website_label : comment_form_website_label :
comment_btn_submit : comment_btn_submit :
comment_btn_submitted : comment_btn_submitted :
comment_success_title :
comment_success_msg : comment_success_msg :
comment_error_title :
comment_error_msg : comment_error_msg :
close_btn_label :
loading_label : loading_label :
it-IT: it-IT:
<<: *DEFAULT_IT <<: *DEFAULT_IT

View file

@ -1,22 +1,13 @@
{% if site.repository and site.staticman.branch %} {% if site.repository and site.staticman.branch %}
<!-- Start comment form modal -->
<article class="modal">
<h2 class="modal__title js-modal-title"></h2>
<div class="modal__supporting-text js-modal-text"></div>
<div class="modal__actions">
<button class="btn btn--danger js-close-modal">{{ site.data.ui-text[site.locale].close_btn_label | default: "close" }}</button>
</div>
</article>
<!-- End comment form modal -->
<script> <script>
(function ($) { (function ($) {
var $comments = $('.js-comments'); var $comments = $('.js-comments');
$('.js-form').submit(function () { $('#new_comment').submit(function () {
var form = this; var form = this;
$(form).addClass('form--loading'); $(form).addClass('disabled');
$('#comment-form-submit').html('<i class="fa fa-spinner fa-spin fa-fw"></i> {{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}');
$.ajax({ $.ajax({
type: $(this).attr('method'), type: $(this).attr('method'),
@ -24,29 +15,27 @@
data: $(this).serialize(), data: $(this).serialize(),
contentType: 'application/x-www-form-urlencoded', contentType: 'application/x-www-form-urlencoded',
success: function (data) { success: function (data) {
showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ 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." }}'); $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
$(form).removeClass('form--loading'); $('.page__comments-form .js-notice').removeClass('notice--danger');
$('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}'); $('.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) { error: function (err) {
console.log(err); console.log(err);
showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ 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." }}'); $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}');
$(form).removeClass('form--loading'); $('.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; return false;
}); });
$('.js-close-modal').click(function () { function showAlert(message) {
$('body').removeClass('show-modal'); $('.page__comments-form .js-notice').removeClass('hidden');
}); $('.page__comments-form .js-notice-text').html(message);
function showModal(title, message) {
$('.js-modal-title').text(title);
$('.js-modal-text').html(message);
$('body').addClass('show-modal');
} }
})(jQuery); })(jQuery);
</script> </script>

View file

@ -35,7 +35,7 @@
<!-- Start new comment form --> <!-- Start new comment form -->
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4> <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
<p class="small help-block">{{ 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> <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="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}"> <form id="new_comment" class="page__comments-form js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
<div class="form__spinner"> <div class="form__spinner">
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
@ -63,6 +63,11 @@
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> <input type="hidden" name="options[slug]" value="{{ page.slug }}">
<input type="hidden" name="fields[hidden]"/> <input type="hidden" name="fields[hidden]"/>
</fieldset> </fieldset>
<!-- Start comment form alert messaging -->
<p class="hidden js-notice">
<strong class="js-notice-text"></strong>
</p>
<!-- End comment form alert messaging -->
<fieldset> <fieldset>
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button> <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
</fieldset> </fieldset>

View file

@ -8,10 +8,8 @@
margin-top: 2em; margin-top: 2em;
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
-webkit-animation: intro 0.3s both; animation: intro 0.3s both;
animation: intro 0.3s both; animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
@include breakpoint($x-large) { @include breakpoint($x-large) {
max-width: $x-large; max-width: $x-large;
@ -113,10 +111,8 @@
position: relative; position: relative;
margin-bottom: 2em; margin-bottom: 2em;
@include clearfix; @include clearfix;
-webkit-animation: intro 0.3s both; animation: intro 0.3s both;
animation: intro 0.3s both; animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
&--overlay { &--overlay {
position: relative; position: relative;
@ -126,10 +122,8 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
-webkit-animation: intro 0.3s both; animation: intro 0.3s both;
animation: intro 0.3s both; animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
a { a {
color: #fff; color: #fff;
@ -303,10 +297,25 @@
.page__comments-form { .page__comments-form {
padding: 1em; padding: 1em;
background: $lighter-gray; background: $lighter-gray;
transition: $global-transition;
&.disabled {
input,
button,
textarea,
label {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
box-shadow: none;
opacity: 0.65;
}
}
} }
.comment { .comment {
margin: 2em 0; @include clearfix();
margin: 1em 0;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
@ -314,8 +323,7 @@
} }
.comment__avatar-wrapper { .comment__avatar-wrapper {
display: table-cell; float: left;
vertical-align: top;
width: 60px; width: 60px;
height: 60px; height: 60px;
@ -339,8 +347,12 @@
} }
.comment__content-wrapper { .comment__content-wrapper {
display: table-cell; float: right;
vertical-align: top; width: calc(100% - 60px);
@include breakpoint($large) {
width: calc(100% - 100px);
}
} }
.comment__author { .comment__author {