Show icons and text within multistep form

[Schonewillepatrick (Petric S)]

Hi,

I was wondering if it is possible to show a title and Icon per step in the multi-step form like this example. If so, what css or what do I need to apply in order for the title and icon to show up per step?

[chrishajer (Chris (Gravity Forms))]

For a custom step/page indicator like that, I recommend disabling the built-in progress indicator on the form, then adding your own HTML field as the first field of every page. You will need to create your own HTML to show the text, icons, and progress bar, different for each page. I will leave this topic open in the event someone else has another way of accomplishing something similar. Thank you.

[JamieO (Jamie (Gravity Flow))]

To avoid having to modify the html markup should your number of pages, the text for each or icons to represent them need to change, the following snippet gives the basis for a custom merge tag that you would specify which is highlighted/current.

To use it you would put {admission_status: scenario=“03”} to have it output an image tag calling from wp-content/plugins/your-plugin-name/includes/images/status_03.png. Or that same approach where the merge tag is replaced with html. Generate once, use multiple places

add_filter( 'gform_replace_merge_tags', 'mergetag_admission_status', 10, 7 );
function mergetag_admission_status( $text, $form, $entry, $url_encode, $esc_html, $nl2br, $format ) {
 
	$matches = array();

	preg_match_all( '/{admissions_status(:(.*?))?}/', $text, $matches, PREG_SET_ORDER );

	if ( ! empty( $matches ) ) {

		foreach ( $matches as $match ) {
			$full_tag       = $match[0];
			$options_string = isset( $match[2] ) ? $match[2] : false;
		}

		$attributes = shortcode_parse_atts( $options_string );
	
		if ( ! empty( $attributes ) ) {
			$replace = esc_url( plugins_url( '/includes/images/status_' . $attributes['scenario'] . '.png', __FILE__ ) );
			$text = str_replace( $full_tag, sprintf( '<img src="%s"/>', $replace ), $text );
		}
	}

	return $text;
}

Is your form is getting to feel overwhelming with that many fields/pages before completing the form in one go? Using that merge tag within the instructions of a Gravity Flow User Input step would be a great way to allow users to complete it in more bite sized times and save progress throughout.

Regards,
Jamie