Simple POC for making Gravity Forms AMP compatible

amp-gf.php

<?php

namespace AmpGf;

add_filter(
	'gform_form_args',
	function ( array $args ) {
		if ( ! is_amp_endpoint() ) {
			return $args;
		}

		$args['ajax']           = false;
		$args['enableHoneypot'] = '0';

		return $args;
	}
);

add_filter(
	'gform_field_content',
	function ( $content, $field ) {
		if ( ! is_amp_endpoint() ) {
			return $content;
		}

		if ( $field->isRequired ) {
			return str_replace( 'aria-required=', 'required=', $content );
		}

		$attr = esc_attr( sprintf( 'change:AMP.setState({gravityForm_%1$s_1: {field_%2$s: event.value}})', $field->formId, $field->id ) );

		$content = preg_replace( '/(onchange=\'([^\']*)\')/', '', $content );
		$content = str_replace( '<input', '<input on="' . $attr . '"', $content );

		return $content;
	},
	10,
	2
);

add_filter(
	'gform_submit_button',
	function( $content, $form ) {
		if ( ! is_amp_endpoint() ) {
			return $content;
		}

		$content = preg_replace( '/(onclick=\'([^\']*)\')/', '', $content );
		$content = preg_replace( '/(onkeypress=\'([^\']*)\')/', '', $content );

		return $content;
	},
	10,
	2
);

add_filter(
	'gform_pre_render',
	function( $form ) {
		if ( ! is_amp_endpoint() ) {
			return $form;
		}

		if ( isset( $form['enableHoneypot'] ) && '1' === $form['enableHoneypot'] ) {
			// Remove randomly generated honeypot fields.
			array_pop( $form['fields'] );
		}

		return $form;
	},
	10,
	2
);

add_filter(
	'gform_footer_init_scripts_filter',
	function ( $content ) {
		if ( ! is_amp_endpoint() ) {
			return $content;
		}

		return '';
	}
);

add_filter(
	'widget_display_callback',
	function( $instance, $widget, $args ) {
		if ( ! $widget instanceof GFWidget ) {
			return $instance;
		}

		if ( ! isset( $instance['title'] ) ) {
			$instance['title'] = '';
		}

		if ( ! is_amp_endpoint() ) {
			return $instance;
		}

		$instance['disable_scripts'] = true;

		return $instance;
	},
	10,
	3
);

add_filter(
	'gform_get_form_filter',
	function ( $content, $form ) {
		if ( ! is_amp_endpoint() ) {
			return $content;
		}

		wp_dequeue_script( 'jquery' );

		$error_message        = __( 'There is a mistake in the form!', 'amp-gf' );
		$confirmation_message = __( 'Form successfully submitted.', 'amp-gf' );
		$submitting           = __( 'Submitting...', 'amp-gf' );
		$try_again_later      = __( 'Something went wrong. Try again later?', 'amp-gf' );

		$amp_html = <<<TEMPLATE
<div verify-error>
	<template type="amp-mustache">
		$error_message
		{{#verifyErrors}}{{message}}{{/verifyErrors}}
	</template>
</div>
<div submitting>
	<template type="amp-mustache">
		$submitting
	</template>
</div>
<div submit-success>
<template type="amp-mustache">
	{{#confirmation}}
		{{{confirmation}}}
	{{/confirmation}}
	{{^confirmation}}
		$confirmation_message
	{{/confirmation}}
</template>
</div>
<div submit-error>
	<template type="amp-mustache">
		{{#errors}}
            <p>{{#label}}{{label}}: {{/label}}{{message}}</p>
        {{/errors}}
        {{^errors}}
            <p>$try_again_later</p>
        {{/errors}}
	</template>
</div>
TEMPLATE;

		$content = str_replace( '</form>', $amp_html . '</form>', $content );

		return $content;
	},
	10,
	2
);

add_action(
	'gform_enqueue_scripts',
	function () {
		if ( ! is_amp_endpoint() ) {
			return;
		}

		wp_dequeue_script( 'gform_gravityforms' );
		wp_dequeue_script( 'gform_placeholder' );
		wp_dequeue_script( 'gform_json' );
		wp_dequeue_script( 'jquery' );
	},
	100
);


add_action(
	'gform_form_tag',
	function ( $content ) {
		if ( ! is_amp_endpoint() ) {
			return $content;
		}

		$ajax_url = add_query_arg( 'action', 'gravity_form_submission', admin_url( 'admin-ajax.php' ) );

		$content = preg_replace( '/(action=\'([^\']*)\')/', '', $content );
		$content = str_replace( '>', 'target="_top">', $content );
		$content = str_replace( '>', 'action-xhr="' . $ajax_url . '">', $content );

		return $content;
	},
	100
);


/**
 * Determines whether we're in the middle of an Ajax form submission.
 *
 * @return bool
 */
function is_ajax_form_submission() {
	return wp_doing_ajax() && isset( $_REQUEST['action'] ) && 'gravity_form_submission' === $_REQUEST['action'];
}

$result = [
	'status'       => 'success',
	'confirmation' => '',
	'errors'       => [],
];

$ajax_gravity_form_submission = function () use ( &$result ) {
	wp_send_json( $result, 'success' === $result['status'] ? 200 : 400 );
};

add_action( 'wp_ajax_gravity_form_submission', $ajax_gravity_form_submission );
add_action( 'wp_ajax_nopriv_gravity_form_submission', $ajax_gravity_form_submission );

add_action(
	'gform_post_process',
	function ( $form ) use ( &$result ) {
		if ( ! is_ajax_form_submission() ) {
			return;
		}

		$submission_info = \GFFormDisplay::$submission[ $form['id'] ];

		$result['confirmation'] = $submission_info['confirmation_message'];
	}
);

add_filter(
	'gform_confirmation',
	function ( $confirmation, $form, $lead ) {
		if ( ! is_ajax_form_submission() ) {
			return $confirmation;
		}

		$is_verify_request = isset( $_POST['__amp_form_verify'] );

		if ( $is_verify_request ) {
			\GFFormsModel::delete_entry( $lead['id'] );

			return $confirmation;
		}

		if ( \is_array( $confirmation ) && isset( $confirmation['redirect'] ) ) {
			header( 'AMP-Redirect-To: ' . $confirmation['redirect'] );
			header( 'AMP-Access-Control-Allow-Source-Origin: ' . home_url() );
			header( 'Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin' );
		}

		return $confirmation;
	},
	10,
	3
);

add_filter(
	'gform_validation',
	function ( $validation_result ) use ( &$result ) {
		if ( ! is_ajax_form_submission() ) {
			return $validation_result;
		}

		if ( ! $validation_result['is_valid'] ) {
			$result['status'] = 'error';
		}

		$is_form_empty = \GFFormDisplay::is_form_empty( $validation_result['form'] );

		foreach ( $validation_result['form']['fields'] as $field ) {
			/* @var \GF_Field $field */

			if ( $is_form_empty ) {
				$result['errors'][] = [
					'label'   => __( 'Error', 'amp-gf' ),
					'message' => $field->validation_message,
				];

				break;
			}

			if ( $field->failed_validation ) {
				$result['errors'][] = [
					'label'   => $field->label,
					'message' => $field->validation_message,
				];
			}
		}

		return $validation_result;
	}
);

add_filter(
	'gform_suppress_confirmation_redirect',
	function ( $suppress ) {
		return is_ajax_form_submission() ? true : $suppress;
	}
);

This is working. Used it on my own WordPress AMP site today for my contact page using Gravity Forms. Thanks @swissspidy

@swissspidy - may I share this code in an upcoming blog post on using AMP with gravity forms?

@jdelia Sure! FWIW, I am currently in the process of writing such a blog post myself, with an updated version of this code. I'll try to finish it this week :-)

@swisssidy - thank you. I look forward to reading that - if you'd like real-world testing for the updated code, please share the link and I'll test it. I've enabled it on my own site and on my colleague's site cathibosco.com :)

Hey @swissspidy this is still 100% functional - I wrapped this into a plugin to keep Gravity Forms (and other things) running in an AMP site -- and all your code worked great. Nice work :)