-
-
Save swissspidy/86e3a50ec5c0f7d46ec4de43824e23a0 to your computer and use it in GitHub Desktop.
Simple POC for making Gravity Forms AMP compatible
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} | |
); |
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 :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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 :)