Adding Preferred Contact Method Option in Gravity Forms

Dani Sanzo

/ December 23, 2024 / Leave a Comment

Are you someone who is always checking your email, but text messages get lost? Or are you like me, someone who swore off picking up the phone because of robocalls?

When you ask users to give more than one  contact method (think phone and email), asking them which one they prefer is a win-win situation: you learn which avenue they’re more likely to respond to, and they will have peace of mind to use the method that they are more comfortable with.

Let’s combine GP Populate Anything with a sorcerous snippet to make a preferred contact method selection that has UX smooth like butter!

A thing about Populate Anything

If I were an unnamed old man in a cave, I’d say “It’s dangerous to go alone! Take this,” and hand you Populate Anything.

This swiss-knife plugin lets you dynamically filter and populate field choices and values with posts, users, entries… and Live Merge Tags, one of its most interesting features.

Live Merge Tags work like this: any merge tag prefixed with an @ (e.g. @{Email:3}) will be populated in real-time, as the form is being filled out. 👀

We’ll use this feature to dynamically populate the preferred contact method choice. Instead of having choices that look like this:

• Call
• Text
• Email

Your users will have personalized choices with their info:

• Call: (201) 555-0123
• Text: (201) 555-0123
• Email: useremail@example.com

Why is this useful?

• Cut out the guesswork: Users can quickly verify their contact details and make a confident choice.
• Catch errors early: Typos can be spotted before submitting, reducing communication issues later on.
• Clear communication: The personalized choice can be output for the support staff so they know exactly how to reach users, cutting down on any mix-ups.

To illustrate this preferred contact method choice field, I conjured up a New Patient form for a busy dentist office. 🧚‍♀️🦷

Their team juggles a steady stream of appointments, from routine cleanings and brace adjustments to last-minute emergencies. Every day is a balancing act of ensuring patients stay on top of their care while squeezing in those unexpected cavity crises or dental accidents. Being able to reach their patients smoothly facilitates in keeping this wicked scheduling process efficient.

Setting it up

First, I made sure I had Populate Anything and our free plugin, Code Chest, installed. I love using Code Chest—it makes implementing custom JavaScript and CSS snappier than the Addams Family. 🫰

Append/Prepend Values to Merge Tags

Before jumping to the form, I installed the Append/Prepend Values to Merge Tags snippet into my functions.php file.

Why prepend?
I wanted the choices to say “call,” “text,” and “email” for clarity. To keep the fields empty, that text needs to be tied to the population of the live merge tags themselves.

Remove Empty Choices

With that in place, I went into the New Patient form settings and navigated to Code Chest to paste the Remove Empty Choices snippet.

Why hide empty choices?
Since these choices will be populated on the fly with user input, I wanted each choice to appear only after they’ve got the needed values.

Capitalize Modifiers

While I was already in Code Chest, I added this bit of CSS for good measure:

.gform-field-label--type-inline:first-letter {
    text-transform: capitalize;
}

But why?
Gravity Forms lower-cases all modifier values like prepends and appends by default, but this CSS takes care of that!

On to the form!

If you’re following along, make sure your form has Phone and an Email fields ready to go. It’s time for the Preferred Contact Method field!

1. Add your preferred choice field. (Mine is Radio Buttons!  😄)
2. Edit choices to say:
   1. @{:3:prepend[Email: ]}
   2. @{:1:prepend[Call: ]}
   3. @{:1:prepend[Text: ]}
3. Enable conditional logic to hide the field until a choice is ready.

Snap and done!

–

Full disclosure: to achieve the UX demonstrated in the GIF above, I actually used a couple special snippets to tweak the behavior of Gravity Forms’ conditional logic and Populate Anything’s Live Merge Tag replacement. Here’s the code:

/**
 * Gravity Wiz // Gravity Forms // Suppress GF Change Events While Field Has Focus
 * https://gravitywiz.com/
 * 
 * Prevent GF from triggering its internal change event until the triggering field no longer
 * has focus. For example, this can be used to not trigger conditional logic until the user has
 * left the triggering field.
 */ 
gform.addFilter( 'gform_field_meta_raw_input_change', function( fieldMeta, $input, event ) {
	if ( $input[0] == document.activeElement || document.activeElement.id.indexOf( $input.attr( 'id' ) ) === 0 ) {
		fieldMeta.fieldId = null;
	}
	return fieldMeta;
} );

/**
 * Gravity Perks // Populate Anything // Suppress Refresh While Field Has Focus
 * https://gravitywiz.com/documentation/gravity-forms-populate-anything/
 * 
 * Change Populate Anything's default behavior to only refresh dependent fields when the
 * triggering field no longer has focus.
 */ 
var forceReloadTimeouts = {};
gform.addFilter( 'gppa_should_trigger_change', function( triggerChange, formId, inputId, $el, event ) {
	if ( formId != GFFORMID ) {
		return triggerChange;
	}
	if ( typeof forceReloadTimeouts[ inputId ] ) {
		clearTimeout( forceReloadTimeouts[ inputId ] );
	}
	if ( inputId == gf_get_input_id_by_html_id( document.activeElement.id ) ) {
		triggerChange = false;
		forceReloadTimeouts[ inputId ] = setTimeout( function() {
			$el.trigger( 'forceReload.gppa' );
		} );
	}
	return triggerChange;
} );

This prevents both conditional logic and Populate Anything from triggering for a field that currently has focus. That’s a fancy way of saying that it won’t trigger while the user is typing, only when they leave the field. I found that in this use case, it improved the overall UX quite a bit. What do you think?

Taking it further

For an additional layer of validation for both phones and emails, add GP Advanced Phone Field and GP Email Validator to the mix. 🫕

Not only can you confirm emails and phone numbers are legit, but you’ll also unlock handy features like country and email domain allow/block lists.

That’s it from me today, wizards! My preferred contact method for any questions are the comments down below. 👇 See you there!