Hook of the Month: Customizing Contact Forms

Did you know you could create contact forms with Jetpack? This month, we’ll discover different ways to customize these forms on your site.

Change the post-submission success message

Would you like to thank your readers after they submit a form on your site? Maybe you want to let them know that you’ll be in touch soon or maybe you want to confirm that their email address has been added to a raffle.

The grunion_contact_form_success_message filter allows you to specify a custom success message on each one of the forms on your site. In the example below, I’ve defined 2 custom success messages:

• The first one is only displayed on the form displayed on page ID 1471.
• The second appears on all other forms, and replaces Jetpack’s default success message.

function jetpackcom_contact_confirmation() {
	if ( is_page( '1471' ) ) {
		$conf = __( 'A special confirmation message for the form you added to page 1471', 'plugin-textdomain' );
	} else {
		$conf = __( 'A generic confirmation message to display for all the other forms', 'plugin-textdomain' );
	}
	return $conf;
}
add_filter( 'grunion_contact_form_success_message', 'jetpackcom_contact_confirmation' );
 

Redirect readers to a specific page after submission

Better than a custom success message, you can redirect your readers to a specific page on your site. As soon as they click the submit button, they can be redirected to a page of your choosing. For example, readers could be redirected to a page where they can claim a prize after giving you their contact information.

To create that redirection, we’ll use the grunion_contact_form_redirect_url filter. This filter allows us to set different redirection URLs for each form on your site.

/**
 * Jetpack Contact Form Custom Redirections.
 *
 * @param  string $redirect Post submission URL.
 * @param  int    $id       Contact Form ID.
 * @param  int    $post_id  Post ID.
 *
 * @return string $redirect Custom Post submission URL.
 */
function jetpackcom_custom_form_redirect( $redirect, $id, $post_id ) {
	/**
	 * Create a list of pages where you've inserted forms.
	 * For each contact Form ID (found via the id attribute on the form),
	 * set up a custom URL where the user will be redirected.
	 */
	$redirects = array(
		'1370' => home_url( 'page_on_your_site' ),
		'2239' => home_url( 'another_page' ),
		'1370' => home_url( 'page_on_your_site' ),
	);

	// Let's loop though each custom redirect.
	foreach ( $redirects as $origin => $destination ) {
		if ( $id == $origin ) {
			return $destination;
		}
	}

	// Default Redirect for all the other forms.
	return $redirect;
}
add_filter( 'grunion_contact_form_redirect_url', 'jetpackcom_custom_form_redirect', 10, 3 );
 

Customize the “Required” label

By default, Jetpack will display a “Required” text next to form fields that your readers are required to fill in before they can submit a form:

Sometimes, you might want to change “Required” into something else. That’s where the jetpack_required_field_text filter comes in:

 function jetpackcom_custom_required() {
 	return __( 'This is important, you must fill it in.', 'plugin-textdomain' );
 }
 add_filter( 'jetpack_required_field_text', 'jetpackcom_custom_required' );
 

The Contact Form module includes more than 20 other hooks in addition to the ones mentioned above. Check the code to learn more. You can also visit our support page to discover some of the other options available for customizing the contact form.

Do you want to dive deeper into Jetpack, and discover other useful hooks to help you customize Jetpack? Make sure to follow this blog and discover a new hook each month!

Jeremy Herve

Jetpack Mechanic 🚀 at Automattic. WordPress, board games, TV Series, music.