Merge pull request #1207 from OpenTechFund/freature/application-form-spam-js-solution

Implement a javascript solution to stop most spam submissions from no…

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 %}

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 %}

opentech/static_src/src/javascript/apply/application-form.js

+(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);

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');

opentech/static_src/src/sass/apply/components/_link.scss

 .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;
         }

opentech/static_src/src/sass/public/components/_link.scss

 .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;
         }