Conditionally display form fields in AMP Form

A common feature on contact forms is displaying certain fields based on the value of another. If a visitor select “Phone” as the best method to contact them, you can display a “Phone Number” field.

AMP pages cannot load custom JavaScript, but you can use amp-bind to add stateful interactivity.

This tutorial uses the WPForms plugin in a Native AMP WordPress website, but the underlying approach will work for any amp-form. The only thing that will be different is how you add the attributes to your form fields.

Stateful CSS classes

In AMP, you can dynamically change the CSS classes on an element using the [class] attribute, or the data-amp-bind-class attribute. You should also specify the default CSS classes using the standard class attribute.

When a certain field changes, we will use the following to update a state variable (foo):

<select on="change:AMP.setState({ foo: event.value})">

We’ll then use that state variable to toggle CSS classes added to other form fields (ex: hide and show).

<input class="hide" [class]="foo ? 'show' : 'hide'" />

See the amp-bind documentation for more information on adding custom stateful interactivity to your AMP pages via data binding and JS-like expressions.

For a more in-depth example, see my article on building a navigation menu without JavaScript.

Conditional logic in WPForms

WPForms is the simplest way to add forms to AMP WordPress websites.

On standard (non-AMP) WordPress websites, you can use the WPForms Conditional Logic feature to toggle field visibility. But this uses JavaScript, so won’t work on AMP pages.

If you are using the Transitional / Paired AMP style, where visitors can see both an AMP version and non-AMP version of your site, you should use the tutorial below for the AMP version, then duplicate the logic in the Conditional Logic section in WPForms for the non-AMP version.

If you are building a Native AMP / AMP-First website (which I recommend), you only have to build this logic once using the guide below.

Summary of example

On my contact form I have a dropdown for selecting “How did you find me”. If you select “Referral”, a text field displays asking the referral name. If you select “Other”, a text field displays asking you to describe it more.

We’ll use the wpforms_field_properties filter to:

• Modify the select dropdown to update a variable with the dropdown’s value when changed.
• Modify the text fields to:
  • Hide them with a CSS class, wpforms-conditional-hide
  • Remove the class when the select field is set to the proper value, using the variable

Adding conditional logic to fields

I’ve defined a variable at the top, $conditional_settings, which stores all of my form-specific settings. You can use this to set the appropriate form and field IDs you want to toggle.

Inside the conditional_show array, the key is the field ID, and the value is the select field’s value that should be selected to display this field.

A hidden field will have .wpforms-conditional-hide added to it. Make sure you include this in your theme’s CSS: .wpforms-conditional-hide { display: none; }

/**
 * WPForms AMP Conditional Logic 
 *
 * @link https://www.billerickson.net/wpforms-amp-conditional-logic
 *
 * @param array $properties
 * @param array $field 
 * @param array $form_data 
 * @return array $properties
*/
function be_wpforms_amp_conditional_logic( $properties, $field, $form_data ) {

	$conditional_settings = array(
		'form_id' => '6307',
		'toggle_field_id' => '7',
		'conditional_show' => array(
			'8' => 'Referral',
			'9' => 'Other',
		)
	);

	$state = 'wpforms' . $form_data['id'] . 'field' . $conditional_settings['toggle_field_id'];

	// Limit to certain form
	if( $form_data['id'] !== $conditional_settings['form_id'] )
		return $properties;

	// Toggle field
	if( $field['id'] === $conditional_settings['toggle_field_id'] ) {
		$property_on = 'change:AMP.setState({' . $state . ': event.value})';
		$properties['input_container']['attr']['on'] = $property_on;
	}

	// Conditionally show fields
	if( array_key_exists( $field['id'], $conditional_settings['conditional_show'] ) ) {
		$active_value = $conditional_settings['conditional_show'][ $field['id'] ];
		$active_classes = join( ' ', $properties['container']['class'] );
		$inactive_classes = $active_classes . ' wpforms-conditional-hide';
		$properties['container']['class'][] = 'wpforms-conditional-hide';
		$properties['container']['attr']['data-amp-bind-class'] = sprintf(
			'%s == \'%s\' ? \' %s \' : \' %s \'',
			$state,
			$active_value,
			$active_classes,
			$inactive_classes
		);

	}

	return $properties;
}
add_filter( 'wpforms_field_properties', 'be_wpforms_amp_conditional_logic', 10, 3 );