Example usage for Pixel & Tonic's Contact Form plugin?

[j-greig]

Just wondering if there's a demo for using this with https://github.com/craftcms/contact-form ?

Thanks!

[clarknelson]

I should make one, but there is no "hook" into any contact forms! This means that you can use it with any contact form, or even just show / hide information on the site based on if Google thinks the user is a bot.

Just follow the instructions as shown and you should be able to use this with the contact form plugin:

1. Hide the contact form (or disable it) using your choice of twig, css, js.
2. Include this twig code right before the opening {% include ['_recaptcha/frontend'] %}
3. Install the plugin and add your site keys as provided by google
4. Create the success callback window.recaptcha_success = function(){ // show contact form }
5. Create error callback window.recaptcha_failure = function(){ alert('We appologize but Google has marked your activity as suspicious. Please contact us through <tel-num> or <email>.') }

I know this is already listed so it might not be what you are looking for. I am open to feedback, but I like that it does not directly tie into any contact form or plugin.

Hopefully this is helpful for you

[cliveportman]

How successful are you finding this? Surely if you just hide it via CSS or even JS, it loses a level of reliability in that spammers can still submit a form that's in the HTML. And if you load the form's HTML in via JS then spammers can follow the URL in your JS?

[billythekid]

@cliveportman you don't need to show or hide the whole form, you could, for example, only append the action input to the form on successful callback, or the CSRF input. So have the form "broken" in some way, until it passes validation. (you could of course hide the form while it's broken too, just in case someone's faster than the recaptcha/network errors with google etc)

[geoffreyvandamme]

If i'm trying the window.recaptcha_success callback function, nothing happens... tried it allready with the failure function and the general callback also, I'm using this with the contact form plugin to, been trying to get it work all morning, no such luck

[billythekid]

@geoffreyvandamme here's what I have in a template from one site that includes a contact form example, js is done in jQuery. Hope this helps;

<div class="mailing-list-form-wrapper hidden">
  <h2>Sign up to our mailing list</h2>
  <p class="mailing-list-form-success" style="display: none;">Thanks for joining our mailing list.</p>

  <form action="" method="post" id="mailing-list-form">
    {{ csrfInput() }}
    <input type="hidden" name="subject" value="Mailing list sign up from the website.">
    <input id="message" type="hidden" name="message" value="Mailing List Sign Up">

    {# <label for="fromName">Name</label> #}
    <input id="fromName" name="fromName" class="form-control" type="text" placeholder="Name" required>

    {# This is a honeypot field #}
    <input type="text" name="first_name" placeholder="Ignore this field">
    {% css %}
    #mailing-list-form input[name=first_name] {
      display: none;
    }
    {% endcss %}

    {# <label for="fromEmail">Email</label> #}
    <input id="fromEmail" name="fromEmail" class="form-control" type="text" placeholder="Email" required>

    {% include ['_recaptcha/frontend'] with {'action': 'mailinglist'} %}

    <button class="btn btn-small">
      <span>Sign up</span>
    </button>

    <p style="font-size: 0.75rem; margin-top: 1rem;">This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>

  </form>
</div>

{# Here follows the javascript to make this work #}

{% js %}
window.recaptcha_success = function () {
  $('#mailing-list-form').prepend('<input type="hidden" name="action" value="contact-form/send">');
  $('.mailing-list-form-wrapper.hidden').removeClass('hidden');
};
window.recaptcha_failure = function () {
  alert('We appologize but Google has marked your activity as suspicious. Please contact us through phone or email.')
};

$('#mailing-list-form').submit(function (ev) {
  // Prevent the form from actually submitting
  ev.preventDefault();

  // some setup
  $.ajaxSetup({
    headers: {
      Accept: 'application/json'
    }
  });
  var fromName = $("#fromName", this).val();
  var fromEmail = $("#fromEmail", this).val();

  // Get the post data
  var data = $(this).serialize();
  // Send it to the server
  $.post('/', data, function (response) {
    if (response.success) {
      $('#mailing-list-form').hide();
      $('.mailing-list-form-success').fadeIn();
    } else {
      // response.errors will be an object containing any validation errors that occurred, indexed by field name
      // e.g. response.errors.fromName => ['From Name is required']
      if (response.errors.fromName) {
        alert(response.errors.fromName[0]);
      } else if (response.errors.fromEmail) {
        alert(response.errors.fromEmail[0]);
      }
    }
  });
});
{% endjs %}

{% css %}
.mailing-list-form-wrapper {
  transition: opacity 0.2s;
}

.mailing-list-form-wrapper.hidden {
  visibility: hidden;
  opacity: 0;
}

.grecaptcha-badge {
  display: none !important;
}
{% endcss %}

[clarknelson]

Dumb question, are you sure the {% include ['_recaptcha/frontend'] %} line is included?

[geoffreyvandamme]

Hi Clark, Yeah I included the {% include ['_recaptcha/frontend'] %} line, i didn't define an action with it though, and I've put it outside my form, maybe that's the problem? I'm trying to call the functions with ES6, but that should make no difference, I'm implementing it the same way you are, hmmmz strange problem. grts, Geoff

…

On Fri, Apr 17, 2020 at 5:00 PM Clark Nelson ***@***.***> wrote: Dumb question, are you sure the {% include ['_recaptcha/frontend'] %} line is included? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEALYJYT3UPMXH3FPBPTKZTRNBVIBANCNFSM4HPQBHKQ> .

-- Geoffrey Vandamme | *Zaakvoerder* Email: [email protected] | GSM: +32 497 85 94 06