Make sure your success and error messages show properly when using ajax mode in Gravity Forms.
Gravity Forms makes it very easy to add in ajax based forms that scroll to display a success or error message. Unfortunately, if you’re using a site with a fixed navigation your anchor scrolling may end with a navigation blocking your message. That’s no fun.
Luckily, Gravity forms drops in an
<a> element with the class
.gform_anchor that can be targeted and adjusted with a little CSS trickery.
margin: -50px 0 0;
This adds a
:before psuedo element into the
<a> element that gives moves the anchor point up 50px.
content: ""; outputs the psuedo element with nothing in it. This is necessary for the element to actually show up.
display: block; forces the element to be displayed as a block. But including
width: 0; allows it to avoid overlapping and interfering with clicking on other elements.
height: 50px and
margin: -50px 0 0; essentially move the anchor point 50px above the previous location. Giving us extra space when the anchor link is scrolled to.
This helps make sure your error and success messages are properly displayed after the anchor scroll. Next you can get into some advanced techniques and add in some smooth scrolling to get rid of the jarring jump.