Home › Forums › Front-end Issues › Gravity Form AJAX
I have a flexible content custom field that we instruct the user to add a gravity form shortcode to when they want to display a form on a page. When doing this, the ajax breaks. For instance, the first field is a radio button and the rest of the forms shows based on the value of that radio button. When the user select a radio button option, the page auto scrolls to the top. If I place the shortcode in the standard wordpress content area, it doesn’t do this. Any ideas?
Hi there,
This is a classic conflict between Gravity Forms’ AJAX processing and your theme’s or another plugin’s JavaScript. When the shortcode is in the flexible content field, it’s likely being loaded dynamically after the initial page render, which can break Gravity Forms’ JavaScript initialization.
Here are the most effective troubleshooting steps to resolve this:
1. The jQuery Re-Trigger Method (Most Common Fix)
Gravity Forms relies on jQuery events that fire on page load. Since your flexible content field loads after this, you need to manually re-trigger GF’s initialization. Add this to your theme’s functions.php or a custom plugin:
php
add_action( ‘wp_footer’, ‘reinitialize_gravity_forms’, 99 );
function reinitialize_gravity_forms() {
if ( ! is_admin() ) {
?>
<script type=”text/javascript”>
jQuery(document).ready(function($) {
// Re-initialize Gravity Forms conditional logic
if (typeof window[‘gform’] !== ‘undefined’) {
gform.initCondLogic();
}
// Re-bind Gravity Forms AJAX events
if (typeof window[‘gformInitPriceFields’] !== ‘undefined’) {
gformInitPriceFields();
}
});
</script>
<?php
}
}
2. Check for JavaScript Conflicts
Temporarily switch to a default WordPress theme (like Twenty Twenty-Four) and disable all other plugins except Gravity Forms and ACF. If the AJAX works, you’ve confirmed it’s a conflict. Re-enable elements one by one to identify the culprit.
3. Gravity Forms-Specific Solution
In your form settings, try disabling AJAX temporarily to see if the conditional logic still works without the scrolling issue. If it does, the problem is definitely with the AJAX re-initialization.
4. DOMContentLoaded Alternative
Sometimes wrapping the re-initialization in a DOMContentLoaded event helps:
javascript
document.addEventListener(‘DOMContentLoaded’, function() {
if (typeof window[‘gform’] !== ‘undefined’) {
gform.initCondLogic();
gform.initializeOnLoaded();
}
});
The key is ensuring Gravity Forms’ JavaScript re-initializes after your flexible content field fully loads into the DOM. The jQuery method above typically resolves this in about 80% of similar cases I’ve encountered.
Let us know which approach works for your setup!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.