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!
Explore the benefits of Jetpack
Learn how Jetpack can help you protect, speed up, and grow your WordPress site.
Get up to 50% off your first year.
Compare plans
Nice! I didn’t realize the hooks were that advanced for the contact form. We use it all the time so this is great to know.
LikeLike
I think the default is enough for me, JetPack contact form is simplest and very easy to use, however if we want to modification successfully message is improvement and its good.
LikeLike
what code do I use to indent form a little?
LikeLike
You can use CSS to customize the look of your form. You can add that CSS to your theme’s stylesheet, or to the custom CSS editor available under Appearance > Edit CSS in your dashboard.
To target the contact form container, you can use the
.contact-form
class.If you need help with that, do not hesitate to send us an email!
LikeLike
I used
blockquote
tags within page “text” field and it worked. Thanks.LikeLiked by 2 people