Skip to content

Instantly share code, notes, and snippets.

@zakhardage
Created July 31, 2014 18:16
Show Gist options
  • Save zakhardage/29a63e40b0441ae6b2eb to your computer and use it in GitHub Desktop.
Save zakhardage/29a63e40b0441ae6b2eb to your computer and use it in GitHub Desktop.
Simple "Captcha" for Shopify
// Goes in theme.liquid
{% if template contains 'contact' %}
{{ 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' | script_tag }}
<script type="text/javascript">
$(document).ready(function() {
var n1 = Math.round(Math.random() * 10 + 1);
var n2 = Math.round(Math.random() * 10 + 1);
$("#question").val(n1 + " + " + n2);
$(".contact-form").submit(function (e) {
if (eval($("#question").val()) != $("#answer").val()) {
$("#answer").css('box-shadow', '0px 0px 7px red');
e.preventDefault();
}
});
});
</script>
{% endif %}
// page.contact.liquid
<div class="rte">
{{page.content}}
{% form 'contact' %}
{% if form.posted_successfully? %}
Thanks for contacting us! We&rsquo;ll get back to you soon.
{% endif %}
{% if form.errors %}
{% for field in form.errors %}
{{ field }} - {{ form.errors.messages[field] }}<br />
{% endfor %}
{% endif %}
<input type="text" name="contact[name]" placeholder="name" />
<input type="text" name="contact[email]" placeholder="email address" class="{% if form.errors contains 'email' %}input-error{% endif %}" />
<textarea name="contact[body]" rows="20" cols="20" placeholder="message" class="{% if form.errors contains 'body' %}input-error{% endif %}"></textarea>
<div class="captcha">
How much is: <input type="text" readonly="readonly" id="question"/>
Answer:* <input type="text" id="answer"/>
</div>
<button type="submit">Send</button>
{% endform %}
</div> <!-- end .rte -->
@tauheeds1
Copy link

thank you...

@Divyesh71
Copy link

Thanks. It's working for me.

It's possible to create google recaptcha using code?

Thanks.

@delvethemes
Copy link

worked like a charm!, thanks alot!

@RonnyKar
Copy link

can i use the same on blog comments ??

@woodtype918
Copy link

This is sweet! Can anyone tell me where to put this code in the theme.liquid page?

I added it randomly and it duplicated the form, lost the formatting and ended up below the footer. ; )

@rmizrachi
Copy link

It worked for me perfectly. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment