Custom Form Validation

HTML Forms will perform the following form validation by itself:

  • All input fields marked as required should have a non-empty value.
  • All fields of type “email” should have a value that looks like an email address, or no value at all (if not required).

If you want to perform additional form validation, then you can do so by hooking into the hf_validate_form filter hook.

The following example will only accept the form submission if the field named “BEST_VEGETABLE” is filled and the value “carrot” is submitted.

add_filter( 'hf_validate_form', function( $error_code, $form, $data ) {
	if( ! isset($data['BEST_VEGETABLE']) || $data['BEST_VEGETABLE'] !== 'carrot' ) {
		$error_code = 'wrong_answer'; 
	}

	return $error_code;
}, 10, 3 );

Showing a Custom Error Message

The $error_code indicates what message should be shown to the person filling out the form. Since we did not register a message with that error code, the plugin will default to showing the general error message instead.

Let’s improve upon this by showing a more detailed error message describing exactly why the form validation failed.

add_filter( 'hf_form_message_wrong_answer', function( $message ) {
    return 'Sorry, but the best vegetable is a carrot!';
});

Related Posts from Our Knowledge Base

Roman Grigorian has written a great step-by-step guide on how to use the HTML Forms plugin with Google Tag Manager, Google Analytics, and Google Ads to track submissions: https://romangr.com/blog/gtm-html-forms

HTML Forms Premium automatically adds an easy to reference widget to the WordPress dashboard. This dashboard widget lists your active forms, shows how many submissions are unread, and the total number of submissions. The dashboard widget is enabled by default. You, or your other admin users, can hide it manually if they choose by using […]