How to add Captcha for Shopify Contact us form at page.contact.liquid

How to add Captcha for Shopify Contact us form at “page.contact.liquid” to protect your website for spamming. I’ve been using this codes (please see red highlight codes) as detailed below. Go to edit theme and at “page.contact.liquid” . You can add all the red highlight codes just before messages label. Please feel free to contact me for any Shopify consulting or you want me to do it for you, at my email: ” jade (@) ecommerce-center.com ”

Captcha Shopify Contact us Pages

It will look like in this picture below.

I see this codes below in Shopify community and support. They are two parts of codes that have to be inserted together to make it all work. I already put it together.

<div id=”page” class=”row”>

<div class=”span12″>
<h1>{{ page.title }}</h1>
<div class=”page-with-contact-form”>
{{ page.content }}

{% form ‘contact’ %}
{% if form.posted_successfully? %}
<div class=”successForm feedback”>
<p>Thanks for contacting us! We’ll get back to you as soon as possible.</p>
</div>
{% endif %}

{% if form.errors %}
<div class=”errorForm feedback”>
<p>Oops, sorry. We were unable to submit your inquiry because it contained {{ form.errors | size | pluralize: ‘an error’, ‘a few errors’ }}. Please correct the following and submit again:</p>
{% for field in form.errors %}
<p>The {{ field | capitalize | replace: ‘Body’, ‘Message’ }} field {{ form.errors.messages[field] }}.</p>
{% endfor %}
</div>
{% endif %}

<div id=”contactFormWrapper”>
<br>
<br>
<p>
<label>Title:</label>
<select id=”contactFormQuestionType” name=”contact[question type]”>
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</p>
<p>
<label>First Name:</label><br/>
<input type=”text” id=”contactFormName” name=”contact[name]” placeholder=”John Doe” />
<p>
<label>Last Name:</label><br/>
<input type=”text” id=”contactFormName” name=”contact[name]” placeholder=”John Doe” />
<p>
<label>Company Name:</label><br/>
<input type=”text” id=”contactFormName” name=”contact[name]” placeholder=”John Doe” />
</p>
<p>
<label>Email Address:</label><br/>
<input type=”email” id=”contactFormEmail” name=”contact[email]” placeholder=”john@example.com” />
</p>
<p>
<label>Phone Number:</label><br/>
<input type=”telephone” id=”contactFormTelephone” name=”contact[phone]” placeholder=”555-555-1234″ />
<p>
<label>Wholesale Order Quantity:</label>
<select id=”contactFormQuestionType” name=”contact[question type]”>
<option><100 sets</option>
<option>100 to 200 sets</option>
<option>200 to 300 sets</option>
<option>>300 sets</option>
</select>
<p>
<script type=”text/javascript”>
jQuery(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>
<label>How much is:</label><br/>
<input type=”text” disabled=”disabled” id=”question”/>
<p>
<label>Answer:*</label><br/>
<input type=”text” id=”answer”/>
</p>
<p>
<label>Message:</label><br/>
<textarea rows=”15″ cols=”75″ id=”contactFormMessage” name=”contact[body]” placeholder=”Your Message”></textarea>
</p>
<p>
<input type=”submit” id=”contactFormSubmit” value=”Send” class=”btn” />
</p>
</div>
{% endform %}

</div>
</div>

</div>