Skip to content

Instantly share code, notes, and snippets.

@swissspidy swissspidy/amp-gf.php Secret
Created Jan 24, 2019

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 12, 2019

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

@swissspidy

This comment has been minimized.

Copy link
Owner Author

commented Aug 12, 2019

@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

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.