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.

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>

[trendoman]

One suggestion is to find a less creative client and don't bother. Another suggestion is to charge for this extra feature. Money buys solutions, no? Fyi, I do not have the solution yet, did not think about this thing. Perhaps, the problem is not with captcha, but with something else, like that you do not refresh the page after visitor's wrong answer (to actually refresh the correct answer internally)?

The issue is that the user submits the correct answer in the captcha, but when the form submits to the server and the page reloads, a new captcha appears on the page due to the "random" attribute on the repeatable field. So even if the captcha was correct in the first submission, the value is not saved with the original form submission. I was hoping there was a simple way to achieve this using a hidden field to save the value of the original captcha on form submission, if not, I'll just keep changing the captcha manually every now and then.

[trendoman]

Ofc, it can be a hidden field, but a flash message is more convenient for this use case.

[KK]

@imohkay,

Please try the following solution -

This will require the addition of a unique 'id' to each row of the repeatable-region so first modify its definition to match this -

Code: Select all

<cms:repeatable name='questions' label='Questions' order='50' >
    <cms:editable type='text' name='id' label='ID' col_width='75' validator='non_negative_integer' required='1' />
    <cms:editable
        type='text'
        name='question'
        label='question'
    />
    <cms:editable
        name='response'
        label='response'
        type='text'
    />
</cms:repeatable>

And then use the following code for the form -

Code: Select all

<cms:form method="POST" class="k_form" id="form-contact">
    <cms:if k_success>
        // Success information
    </cms:if>
    <cms:if k_error >
        // Error information
    </cms:if>

    <!-- figure out if form submitted -->
    <cms:set is_submitted="<cms:gpc var="k_hid_<cms:show k_cur_form />" method=k_cur_form_method default='0' />" />
    
    <!-- if form in submitted state.. -->
    <cms:if is_submitted>
    
        <!-- fetch the id of the row used to create the input -->
        <cms:set selected_row_id="<cms:gpc var='selected_row_id' method=k_cur_form_method />" />
        
        <!-- then fetch the row corresponding to the id -->
        <cms:show_repeatable 'questions'>

            <cms:if id eq selected_row_id>

                <!-- create the field -->
                <p><cms:show question /></p>
                <cms:input type="text"
                    name="contact-captcha"
                    validator="regex=/^<cms:show response />$/i"
                    id="contact-captcha"
                    required='1' 
                />
            </cms:if>
        </cms:show_repeatable>
        
        <!-- don't forget to save the row id -->
        <cms:input type='hidden' name='selected_row_id' value="<cms:show selected_row_id />" />

    <cms:else />
    
        <!-- if form not in submitted state.. -->
        <cms:show_repeatable 'questions' limit='1' order='random'>

            <!-- use a random row to create the field -->
            <p><cms:show question /></p>
            <cms:input type="text"
                name="contact-captcha"
                validator="regex=/^<cms:show response />$/i"
                id="contact-captcha"
                required='1' 
            />
            
            <!-- and save the row's id -->
            <cms:input type='hidden' name='selected_row_id' value="<cms:show id />" />
        </cms:show_repeatable>
    </cms:if>

    <br>
    <input type="submit" name="submit" value="Submit"/>
    
    <cms:if k_error_contact-captcha>
        <div class="form-error" style="display: block">
            Please answer the question correctly.
        </div>
    </cms:if>
</cms:form>

I have added comments liberally to the code for making it easier for you to figure things out.
Hope this helps. Do let us know.

Thanks KK. That worked like a charm! There's a reason I keep coming back to this CMS, for you and the community are always there to help us out. Your detailed responses are appreciated by us all

[KK]

You are always welcome, Karen
I am glad I could help.