0

I am using Gravity Forms for a one-page website I am developing: http://www.joshrodg.com/polio. There are two forms, both at the bottom of the page (Join and Contact).

I discovered some code that would enable anchors on the form - add_filter("gform_confirmation_anchor", create_function("","return true;"));, so that after the form has been submitted the page scrolls back to the form position on the page - Gravity forms adds #gf_1 or #gf_2 to the form action so that it redirects to a specific anchor link (that is generated by gravity forms).

The problem I am having is the form redirects to odd places on the page when viewing on smaller screens. The Join form, gets redirected to the middle of the picture gallery and the Contact form gets redirected to the middle of the links section. I am guessing this is partly because of the way the sections are slanted on the page, but that's just a guess.

I would like to fix the out of the box behavior (if possible), I may need to adjust something on my end.

Another idea I had was to use jQuery to find the specific form action id and change it to something else like #join or #contact (which would redirect to the titles of those sections), but I'm not entirely sure that would work either. UPDATE - I tried to do this, but the page still redirects to an odd position when submitted on smaller screens $('#join form').attr('action', '/polio/#join');

Does anyone have any ideas of what's happening or a possible fix I could use to correct the behavior? - I'm not really sure the cause

Thanks,
Josh

Improve this question
2
  • Not seeing this happen when I use Chrome on a PC and resize the viewport small like a phone. It's possible that some of your other content hasn't loaded on a slower internet connection, and then linking to anchors could fail - you would first load the correct location but as other elements load, pushing things down the screen, you'd end up at a different place. I would create another page with only text content (no images) and see if the same thing happens there to rule that out.
    – WebElaine
    May 19, 2017 at 19:51
  • I hadn't checked Chrome, but you're absolutely right...the behavior I am describing appears in Safari and Firefox...would love the Chrome behavior on the other two browsers :-)
    – Josh Rodgers
    May 19, 2017 at 20:06

1 Answer 1

Reset to default
1

I figured this one out, kind of...

After looking through the code over and over again, it just didn't make sense that a simple anchor link wasn't working properly.

So, I started disabling plugins one at a time and when I disabled my picture gallery the anchor links started working.

I am still looking into the why, but the main thing is Gravity Forms had nothing to do with this issue, it is my picture gallery, which is called Envira Gallery Lite (https://wordpress.org/plugins/envira-gallery-lite/ or http://enviragallery.com/).

I have used this plugin on a few other sites, but never on a one-page website with anchor links, didn't realize there would be an issue. I'm going to e-mail the plugin author, but because I am using the free version, I'm probably not going to get much support.

I think I might just end up using a different plugin since it's not a huge gallery.

Thanks,
Josh

Improve this answer
1
  • It turns out that if the Number of Gallery Columns option is set to "automatic", then you'll encounter this issue...all I did was set Number of Gallery Columns to Four Columns (4) and everything is now working properly.
    – Josh Rodgers
    Jun 5, 2017 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.