Customising Required Fields in JetPack Contact Form

Contact forms is something that there is no shortage of in the world of WordPress. In the past I very rarely made use of the contact form in JetPack. Now with the new JetPack Blocks Collection it is extremely easy to add a contact form to posts and or pages and I thought this contact form was worth a second look.

I have grown accustomed to how other contact forms show the required fields on the form and I wanted to change the JetPack contact form to show something similar. This is what I was looking for:

To do this I only needed a small function and a single line of styling.

functions.php

Add the following function to your theme’s functions.php or wherever your theme adds functions:

if ( ! function_exists( 'your_domain_custom_required' ) ) {
	/**
	 * Customize required field labels on JetPack contact form.
	 */
	function your_domain_custom_required() {
		return __( ' *', 'your_domain' );
	}
	add_filter( 'jetpack_required_field_text', 'your_domain_custom_required' );
}

Please change the references to your_domain to your themes’ real domain name.

style.css

.contact-form label span {
  color: #a3041f !important;
}

Obviously you will have to change the colour to suit your own preferences. I hate using !important in my style sheets but thus far this is the only way I could get JetPack styling to do what I wanted it to do.

That’s all it took, mission accomplished. If you are using the Stix Starter theme this functionality has already been included for you.

Thanks for visiting.

Arnold.

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.