diff --git a/opentech/apply/funds/templates/funds/application_base.html b/opentech/apply/funds/templates/funds/application_base.html index d368cca23859b223e2d873720d5d1d6a159e7e4c..45675101c5a9fa1dcfac986ab4c389fd89578093 100644 --- a/opentech/apply/funds/templates/funds/application_base.html +++ b/opentech/apply/funds/templates/funds/application_base.html @@ -26,7 +26,8 @@ {# the page has no open rounds and we arent on a round page #} <h3>{% blocktrans %}Sorry this {{ page|verbose_name }} is not accepting applications at the moment{% endblocktrans %}</h3> {% else%} - <form class="form" action="" method="POST" enctype="multipart/form-data"> + <p class="wrapper--error message-no-js">You must have Javascript enabled to use this contact form.</p> + <form class="form application-form" action="/test500/" method="POST" enctype="multipart/form-data"> {{ form.media }} {% csrf_token %} @@ -43,13 +44,14 @@ {% endif %} {% endif %} {% endfor %} - <input class="link link--button-secondary" type="submit" value="{% if page.action_text %}{{ page.action_text|safe }}{% else %}Submit{% endif %}" /> + <button class="link link--button-secondary" type="submit" disabled>{% if page.action_text %}{{ page.action_text|safe }}{% else %}Submit{% endif %}</button> </form> {% endif %} </div> {% endblock %} {% block extra_js %} + <script src="{% static 'js/apply/application-form.js' %}"></script> <script src="{% static 'js/apply/mailgun-validator.js' %}"></script> <script src="{% static 'js/apply/file-uploads.js' %}"></script> {% if not show_all_group_fields %} diff --git a/opentech/public/forms/templates/public_forms/form_page.html b/opentech/public/forms/templates/public_forms/form_page.html index 9bd0f969a44d777e5ad77129f32d1973789acb8a..c50641870c1d52c7932a6b843e52c1c62c9bc069 100644 --- a/opentech/public/forms/templates/public_forms/form_page.html +++ b/opentech/public/forms/templates/public_forms/form_page.html @@ -6,7 +6,7 @@ <h1>{{ page.title }}</h1> {{ page.intro|richtext }} <p class="wrapper--error message-no-js">You must have Javascript enabled to use this contact form.</p> - <form class="form form__wagtail-form" action="#" data-pageurl="{% pageurl page %}" method="post" enctype="multipart/form-data"> + <form class="form wagtail-form" action="#" data-pageurl="{% pageurl page %}" method="post" enctype="multipart/form-data"> {% csrf_token %} {{ form.media }} {% for field in form %} diff --git a/opentech/static_src/src/javascript/apply/application-form.js b/opentech/static_src/src/javascript/apply/application-form.js new file mode 100644 index 0000000000000000000000000000000000000000..12949278f1fb236d90181f8b291ba9a8d10e73b0 --- /dev/null +++ b/opentech/static_src/src/javascript/apply/application-form.js @@ -0,0 +1,36 @@ +(function ($) { + + 'use strict'; + + $('.application-form').each(function () { + var $application_form = $(this); + var $application_form_button = $application_form.find('button[type="submit"]'); + + // Remove the "no javascript" messages + $('.message-no-js').detach(); + + // Wait for a mouse to move, indicating they are human. + $('body').mousemove(function () { + // Unlock the form. + $application_form.attr('action', ''); + $application_form_button.attr('disabled', false); + }); + + // Wait for a touch move event, indicating that they are human. + $('body').on('touchmove', function () { + // Unlock the form. + $application_form.attr('action', ''); + $application_form_button.attr('disabled', false); + }); + + // A tab or enter key pressed can also indicate they are human. + $('body').keydown(function (e) { + if ((e.keyCode === 9) || (e.keyCode === 13)) { + // Unlock the form. + $application_form.attr('action', ''); + $application_form_button.attr('disabled', false); + } + }); + }); + +})(jQuery); diff --git a/opentech/static_src/src/javascript/public/wagtail-form.js b/opentech/static_src/src/javascript/public/wagtail-form.js index ab59258b7dad3201a4811d65be00d18785dd34fd..c9440ff3d94363e42b54ef774d3bad39077a8b85 100644 --- a/opentech/static_src/src/javascript/public/wagtail-form.js +++ b/opentech/static_src/src/javascript/public/wagtail-form.js @@ -2,7 +2,7 @@ 'use strict'; - $('.form__wagtail-form').each(function () { + $('.wagtail-form').each(function () { var $wagtail_form = $(this); var $wagtail_form_button = $wagtail_form.find('button[type="submit"]'); var wagtail_form_action = $wagtail_form.data('pageurl'); diff --git a/opentech/static_src/src/sass/apply/components/_link.scss b/opentech/static_src/src/sass/apply/components/_link.scss index 19617f0e7c9a5d8d9ee2e57615ecb20f75b567e9..91abab5e1aa6dd3410bbc2015725b4239889dc1f 100644 --- a/opentech/static_src/src/sass/apply/components/_link.scss +++ b/opentech/static_src/src/sass/apply/components/_link.scss @@ -1,8 +1,15 @@ .link { + &:disabled, + &.is-disabled { + pointer-events: none; + opacity: .5; + } + &--button { @include button($color--light-blue, $color--dark-blue); display: inline-block; + &--narrow { @include button--narrow; } diff --git a/opentech/static_src/src/sass/public/components/_link.scss b/opentech/static_src/src/sass/public/components/_link.scss index 8f189fc7c308f0787f24a5af88c0aa333dfc465d..6bb2da46d5339c226f1507f256fdaf66dfc8792c 100644 --- a/opentech/static_src/src/sass/public/components/_link.scss +++ b/opentech/static_src/src/sass/public/components/_link.scss @@ -1,9 +1,14 @@ .link { + &:disabled, + &.is-disabled { + pointer-events: none; + opacity: .5; + } + &--button { @include button($color--light-blue, $color--dark-blue); display: inline-block; - &--narrow { @include button--narrow; }