Manual captcha install, or ghost fields?

Is there a thread or tutorial on manually adding captcha to non-wizard forms?

I am getting a lot of empty submissions and {input name} submissions on a certain form. There's no captcha on it, but there is validation. Unfortunately, the layout needs of the form forced me to go non-wizard.

Hi Greg,

You can add a Captcha to a Custom form. I think that you need to add {chronocaptcha_img} to the Form HTML plus the Add Captcha action in the On Load event and the Check Captcha action in the On Submit event.

There's also a FAQ on adding a honeypot trap if you want another approach.

Bob

Hi Bob! Sounds logical, but are there no examples on the forum where someone has done this?

In the end, is it all done with Javascript or JQuery?

I suppose I could duplicate the form fields in a wizard form, add captcha, convert to custom, then copy out the needed code.

Hi Greg,

I'm not sure that you need an example, just add the {chronocaptcha_img} place holder to your custom HTML. All the rest is in the Add Captcha FAQ.

You might also want to check the FAQ on adding Custom HTML to your form.

What exactly is the problem you have with the standard layouts? Mostly you can over-ride the CSS

Bob

Ah, thanks! I didn't realize that the shortcode would load the whole functionality, that does make it easier, if it works🙂

It's been a while since I set it up, but I think that I needed a super tight layout for one form only, so if I changed all the Chronoforms css classes to make that one form work, it would have changed the layouts of all the other forms, so it was just easier to do this one non-wizard.

Bob, although the shortcode does dutifully load the captcha image, we need an input field in the HTML, and I'm assuming the input has to have a particular name and id for the captcha to function. Do you know what that would be?

Hi Greg,

Sorry, the old version used to add it all. Here's the final HTML that is generated:

<div style="" id="chrono_verification1_container_div" class="ccms_form_element cfdiv_text"><label>Enter the code</label><input type="text" name="chrono_verification" value="" title="" class="chrono_captcha_input" size="5" maxlength="5">
  <img alt="" src="http://example.com/components/com_chronoforms/chrono_verification.php?imtype=0"><div class="clear"></div><div id="error-message-chrono_verification"></div></div>

Bob

[attachment=0]events.jpg[/attachment]Hi Bob, I'm still having a bit of a problem. The Captcha always fails. I'm attaching my event chain so you can tell me if it's something obvious.

Hi Greg,

The events look OK.

Please post a link to the form so I can take a quick look.

Bob

PS I avoid using the On Success events if I possibly can and put those actions after the Check Captcha action. The effect is the same (sometimes better) and the form is tidier.

PM sent! Does it matter where in the HTML the captcha field is positioned?

Hi greg,

Fixed, had me scratching my head for a while before I worked it out. The <img> part of the code I posted has to be replaced with {chronocaptcha_img} otherwise it generates a random code and image OK but doesn't tell ChronoForms what the value is.

<div style="" id="chrono_verification1_container_div" class="ccms_form_element cfdiv_text">
  <label>Enter the code</label>
  <input type="text" name="chrono_verification" value="" title="" class="chrono_captcha_input" size="5" maxlength="5">
  {chronocaptcha_img}
  <div class="clear"></div>
  <div id="error-message-chrono_verification"></div>
</div>

Bob

Thanks Bob! So now we know the correct snippet needed for captcha in a custom form.

Hi Greg,

Tidied up a little and added to this FAQ

Bob