Dear all,
I have a contact form which requires a captcha. Usually, I use a Question/Answer format and it works well (e.g. What is 2 + 2? And the user types '4' as the correct answer). However, the client has requested that the captcha question changes every now and then. So I have created a repeatable field in the admin with about 10 questions/answers and set the order to "random" and limit to "1" in the contact form template. So the idea is that on page load, a single random question will show up from the 10 questions.
The issue is that when the form is submitted, the captcha question also changes randomly, which leads to an error since it contains the answer to the previous captcha. I guess I need to use a hidden input to store the id of the correct repeatable row and use that to validate the answer, but my attempts have failed.
Here is the code I currently have. Suggestions are most welcome.
I have a contact form which requires a captcha. Usually, I use a Question/Answer format and it works well (e.g. What is 2 + 2? And the user types '4' as the correct answer). However, the client has requested that the captcha question changes every now and then. So I have created a repeatable field in the admin with about 10 questions/answers and set the order to "random" and limit to "1" in the contact form template. So the idea is that on page load, a single random question will show up from the 10 questions.
The issue is that when the form is submitted, the captcha question also changes randomly, which leads to an error since it contains the answer to the previous captcha. I guess I need to use a hidden input to store the id of the correct repeatable row and use that to validate the answer, but my attempts have failed.
Here is the code I currently have. Suggestions are most welcome.
- Code: Select all
<cms:template title='Contact' order='120' hidden='1'>
<cms:repeatable name='questions' label='Questions' >
<cms:editable
type='text'
name='question'
label='question'
/>
<cms:editable
name='response'
label='response'
type='text'
/>
</cms:repeatable>
</cms:template>
<cms:form method="POST" class="k_form" id="form-contact" novalidate="true">
<cms:if k_success>
// Success information
</cms:if>
<cms:if k_error >
// Error information
</cms:if>
<cms:input type="text"
name="contact-captcha"
validator="regex=/^<cms:show response />$/i"
id="contact-captcha"
required='1'
/>
<cms:if k_error_contact-captcha>
<div class="form-error" style="display: block">
Please answer the question correctly.
</div>
</cms:if>
</cms:form>