Form messed up display on homepage

Get Help
, ,
1

Hi there,

Good day!

I’m experiencing an issue with my Gravity form on the homepage footer. However, on the other pages, the form displays correctly. Upon debugging, it seems the issue is isolated to Google Chrome. Additionally, I noticed that when visiting the homepage using Google Chrome, it’s registering the wrong browser class. It displays ‘gf_browser_ie’ instead of ‘gf_browser_chrome’.

By the way, the link below is where the form is added:

I’m hopeful that someone can assist me with this. Thank you for your time, and have a great day!

Correct display: Upload and share screenshots and images - print screen online | Snipboard.io

2

Hello,

I hope you are well.

I’ve attempted to reproduce the issue but was unable to do so. The form correctly registers the browser class “gf_browser_chrome” even when I tested it from an incognito window. It seems that the issue might be caused by your caching plugin.

To confirm, you can disable the caching plugin and then inform me if that resolves the issue. Thank you.

Footer Form
Footer Form1920×1103 172 KB

3

Hi @faisalahammad, thanks for your helping me out. Yes, it looks like the issue is with the cache. I’m using Cloudflare APO for it. I’m planning to bypass the cache on my homepage BUT this seems not the solution as it’s the most visited page on our website.

As of this moment, I’ve implemented a solution just for the homepage to replace the class ‘gr_browser_ie’ to ‘gf_browser_chrome’. This is only implemented if the user is using Google Chrome browser. Thanks again for your help.

4

Awesome :muscle: You are welcome.

Glad to hear that you have managed to resolved the issue. Could you please share the workaround here so if someone having the same issue, they could get help from your ticket? The following code also help. Thank you

jQuery(document).ready(function ($) {
  if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
    $(".gr_browser_ie")
      .addClass("gf_browser_chrome")
      .removeClass("gr_browser_ie");
  }
});
5

The following codes are what I had implemented on our WordPress website. Please note that the code is intended to just run on your homepage. First, you need to add the below code to your functions.php of your theme file or add it on your custom plugin.

add_filter('gform_form_tag', 'replace_gf_browser_class');
function replace_gf_browser_class($form_tag) {
    // Check if the current page is the homepage
    if (is_home() || is_front_page()) {
        // Enqueue JavaScript file for homepage only
        wp_enqueue_script('homepage-browser-detection', get_template_directory_uri() . '/homepage-browser-detection.js', array('jquery'), null, true);
    }
    // Return original form tag
    return $form_tag;
}

Second, create a new JavaScript file named homepage-browser-detection.js in your theme directory (wp-content/themes/your-theme/) with the following code. Also, replace ‘gform_wrapper’ with the appropriate selector for your Gravity Forms wrapper element.

jQuery(document).ready(function($) {
    // Check if the browser is Google Chrome
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    // Check if the current page is the homepage
    var isHomepage = $('body').hasClass('home');

    // If the browser is Chrome and the current page is the homepage, replace 'gf_browser_ie' class with 'gf_browser_chrome'
    if (isChrome && isHomepage) {
        $('.gform_wrapper').removeClass('gf_browser_ie').addClass('gf_browser_chrome');
    }
});