recaptcha

<script src="https://www.google.com/recaptcha/api.js?<%= @options[:onload] %>hl=<%= @options[:hl] %>" async defer></script>

<%= if @options[:size] == "invisible" do %>
<script type="text/javascript">
  var form = null;

  function onSubmit(event) {
    event.preventDefault();

    form = this;

    var recaptchaObject = this.querySelector('div[class="g-recaptcha"]');

    if (recaptchaObject) {
      grecaptcha.execute();
    } else {
      this.submit();
    }
  }

  function recaptchaCallback() {
    form.submit();
  }

  var forms = document.querySelectorAll("form");

  for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', onSubmit);
  };
</script>
<% end %>

<div class="g-recaptcha"
    data-sitekey="<%= @public_key %>"
    data-theme="<%= @options[:theme] %>"
    data-type="<%= @options[:type] %>"
    data-tabindex="<%= @options[:tabindex] %>"
    data-size="<%= @options[:size] %>"
    data-badge="<%= @options[:badge] %>"
    data-callback="<%= @callback %>">
</div>

<%= if @options[:noscript] do %>

  <noscript>
    <div style="width: 302px; height: 422px;">
      <div style="width: 302px; height: 422px; position: relative;">
        <div style="width: 302px; height: 422px; position: absolute;">
          <iframe src="https://www.google.com/recaptcha/api/fallback?k=<%= @public_key %>&hl=<%= @options[:hl] %>"
                       frameborder="0" scrolling="no"
                       style="width: 302px; height:422px; border-style: none;">
          </iframe>
        </div>
        <div style="width: 300px; height: 60px; border-style: none;
                       bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
                       background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
          <textarea id="g-recaptcha-response" name="g-recaptcha-response"
                         class="g-recaptcha-response"
                         style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
                                margin: 10px 25px; padding: 0px; resize: none;" >
          </textarea>
        </div>
      </div>
    </div>
  </noscript>

<% end %>