Skip to content

Instantly share code, notes, and snippets.

@swissspidy
Created January 24, 2019 19:57
Show Gist options
  • Save swissspidy/86e3a50ec5c0f7d46ec4de43824e23a0 to your computer and use it in GitHub Desktop.
Save swissspidy/86e3a50ec5c0f7d46ec4de43824e23a0 to your computer and use it in GitHub Desktop.
Simple POC for making Gravity Forms AMP compatible
<?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;
}
);
@jdelia
Copy link

jdelia commented Aug 9, 2019

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

@jdelia
Copy link

jdelia commented Aug 12, 2019

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

@swissspidy
Copy link
Author

@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 :-)

@jdelia
Copy link

jdelia commented Aug 12, 2019

@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 :)

@robin-scott
Copy link

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