tim-m
11/28/2017 - 1:48 AM

For customers that request Captcha. Google ReCaptcha won't work in Shopify for many reason as it has to be server-side submitted and we don'

For customers that request Captcha. Google ReCaptcha won't work in Shopify for many reason as it has to be server-side submitted and we don't have access to Shopify hosting. So a simple solution is to use a Simple Captcha like this;

theme.liquid
content_copyfile_download
{% 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 %}
contact-page.liquid
content_copyfile_download
<!-- add this right after the textarea html code and before the submit / clear button -->

<!-- Captcha Placement -->
  <div class="captcha">
	How much is: <input type="text" readonly="readonly" id="question"/>
	Answer:* <input type="text" id="answer"/>
	</div>
<!-- Captcha Placement -->