Merge pull request #44 from netgen/Document-invisible-captcha

Document invisible captcha

Author: MarioBlazek

doc/CAPTCHA.md

@@ -117,7 +117,7 @@ Example template implementation for `ng_feedback_form` would be something like t
                 {{ form_end(form) }}
 
 
-                {% if info_collection_captcha_is_enabled(location) %}
+                {% if info_collection_captcha_is_enabled(location.innerLocation) %}
                     <div class="info-collector-captcha">
                         <script src='https://www.google.com/recaptcha/api.js'></script>
                         {% set captcha = info_collection_captcha_get_site_key(location) %}
@@ -160,7 +160,7 @@ Or, using captcha v3:
                 {{ form_end(form) }}
 
 
-                {% if info_collection_captcha_is_enabled(location) %}
+                {% if info_collection_captcha_is_enabled(location.innerLocation) %}
                     {% set captcha = info_collection_captcha_get_site_key(location.innerLocation) %}
                     <div class="info-collector-captcha">
                         <script src="https://www.google.com/recaptcha/api.js?render={{ captcha }}"></script>
@@ -182,6 +182,52 @@ Or, using captcha v3:
 {% endblock %}
 ```
 
-If captcha validation results in error with code "missing-input-response" you probably did not send reCAPTCHA token in variable "g-recaptcha-response".
-Another error you might encounter is "action-mismatch". In this case make sure that the action you specified in captcha config (globally or per content type)
- is the same as the one you use when executing captcha check.
+Or, using invisible captcha:
+```twig
+{% block content %}
+    <div class="view-type view-type-{{ view_type }} ng-feedback-form">
+        <div class="full-form-content">
+            {% if not is_valid %}
+                {% if not content.fields.body.empty %}
+                    {{ ng_render_field(content.fields.body) }}
+                {% endif %}
+
+                {{ form_start(form, { 'attr': { 'id': 'ng_feedback_form'} } ) }}) }}
+                {{ form_errors(form) }}
+
+                <fieldset>
+                    {{ form_row(form.sender_name, {attr: {class: 'form-control'}}) }}
+                    {{ form_row(form.email, {attr: {class: 'form-control'}}) }}
+                    {{ form_row(form.subject, {attr: {class: 'form-control'}}) }}
+                    {{ form_row(form.message, {attr: {class: 'form-control'}}) }}
+                    
+                    <input name="g-recaptcha-response" hidden>
+                    <button type="submit" class="btn btn-primary g-recaptcha" data-sitekey={{info_collection_captcha_get_site_key(location.innerLocation)}} data-callback='onSubmit'>Send</button>
+                </fieldset>
+
+                {{ form_rest(form) }}
+                {{ form_end(form) }}
+
+
+                {% if info_collection_captcha_is_enabled(location.innerLocation) %}
+                    <div class="info-collector-captcha">
+                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+                        <script>
+                            function onSubmit(token) {
+                                document.getElementById("ng_feedback_form").submit();
+                            }
+                        </script>
+                    </div>
+                {% endif %}
+
+            {% else %}
+                {{ block('success') }}
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
+```
+
+If captcha validation results in error with code `missing-input-response` you probably did not send reCAPTCHA token in variable `g-recaptcha-response`.
+Another error you might encounter is `action-mismatch`. In this case make sure that the action you specified in captcha config (globally or per content type)
+ is the same as the one you use when executing captcha check.