Captcha & Honeypot

Google ReCaptcha V2 (Checkbox)

Use recaptcha-v2 as field type and add the site key and the secret key provided by Google. That's it :)
No worries about validation – HazzelForms and Google will do this for you. 

// Add captcha field to the form object
$form->addField('my-captcha',  'recaptcha-v2', ['sitekey'   => 'YOUR_PUBLIC_KEY',
	                                           		'secretkey' => 'YOUR_SECRET_KEY']);

The captcha field can be added to the DOM like all the other fields by using the field name. Or use $form->renderAll() instead to to let HazzelForms do the work.


Google ReCaptcha V3

// Add captcha field to the form object
$form->addField('my-captcha',  'recaptcha-v3', ['sitekey'   => 'YOUR_PUBLIC_KEY',
																								'secretkey' => 'YOUR_SECRET_KEY',
																								'min_score' => 0.4
																								]);

The captcha field can be added to the DOM like all the other fields by using the field name. Or use $form->renderAll() instead to to let HazzelForms do the work.

With every user request, reCAPTCHA v3 returns a value between 0 and 1, indicating the probability that the request comes from a bot. If the value is close to 0, it is probably a bot; if it is close to 1, it is more likely that it is a human. The default score of 0.4 may be customized using the min_score argument.


Math Captcha

Let users solve a simple math puzzle to verify if they are human.
You can choose between a text or an image captcha. The image captcha is recommended because only more sophisticated bots have the ability to read text from images. 

$form->addField('my-captcha',  'math-captcha', [
	'label'     => "What is <challenge>?",  // <challenge> will be replaced with the actual math question
	'secret'    => 'YOUR_SECRET_KEY', 		  // secret salt for captcha (generate a random string)
	'min'       => 1,												// optionally override the minimum number for the math puzzle
	'max'       => 100,											// optionally override the maximum number for the math puzzle
  'use_image' => true,										// use an image instead of text (recommended)
	'font_path' => '...',										// -- optionally change the font (when using an image)
	'font_size'	=> 24,											// -- optionally override font size (when using an image)
	'color' 	  => [255, 0, 0],							// -- optionally override the text color using [R, G, B] (when using an image)
]);

If you use the image based puzzle, you might want to add some CSS to shrink the image and align it with the label text.

.form-wrap .img-puzzle {
	position: relative;
	display: inline-block;
	height: 0.8em;
	transform: translateY(0.1em); /* vertical alignment */
}

.form-wrap .img-puzzle img {
	height: 100%;
}


Honeypot

Not a fan of Captchas?
Simply protect your form with a hidden field. This will trap dumb bots because they try to fill out all existing form fields.
However, keep in mind, that this method can not protect against clever bots. 

// Add honeypot
$form->addField('Pseudo-Captcha',  'honeypot');

The honeypot field type outputs a trap field as well as an inline css snippet to hide it from users (but not from bots). HazzelForms ensures that the form can not be sent as long as this trap field contains a value. 

// Render hidden honeypot
$form->renderField('Pseudo-Captcha');

Content Security Policy (CSP) vs. Inline CSS

When using a strict CSP that diables inline css, you can simply disable the inline CSS and add your custom CSS class to hide the honeypot input field. 

$form->addField('Pseudo-Captcha', 'honeypot', [
	'classlist' => 'hide-me',
	'inline-css' => false
]);


/* add this to your CSS file */
.hide-me {
	display: none !important;
}