Sridhar Katakam

Genesis and WordPress Tutorials

Horizontal Gravity Forms Opt-in in Parallax Pro

by 10 Comments

Following my recent Horizontal Gravity Forms Opt-in Form in Genesis tutorial, a user asked how the same can be set up below Home Section 1 in Parallax Pro.

In this tutorial I explain how a responsive Gravity Forms form having Name and Email fields can be customized to appear horizontally below Home Section 1 in Parallax Pro.

Desktop:

horizontal-gravity-forms-parallax-pro

iPad:

horizontal-gravity-forms-parallax-pro-ipad

iPhone:

horizontal-gravity-forms-parallax-pro-mobile

Step 1

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi, Sridhar, thanks for this tutorial.
    It would be better explained adding (for example) ‘Display Home opt-in widget area after loop on front page’ .

    // Display Home opt-in widget area after loop on front page
    add_action( ‘genesis_after_loop’, ‘sk_horizontal_gf’ );
    function sk_horizontal_gf() {
    if ( ! is_front_page() ) {
    return;
    }
    genesis_widget_area( ‘home-opt-in’, array(
    ‘before’ => ”,
    ‘after’ => ”,
    ) );
    }

    One question:
    How to display between sections?

    Reply

  • This is great!

    I really want a subscribe bar likes this that will move up as you scroll and then stay at the top of the screen with the menu like the secondary menu on Author Pro.

    Do you have any suggestions for that?

    Reply

  • Hello,

    I followed this tutorial but without using Gravity Forms. For some reason the style options are not coming through. When I tried to look at the css its inheriting the style from the body element. Any thoughts on how to adjust or fix this?

    Website is wpsimplified.net

    Thanks!

    Reply

  • It seems that as of today 2/10/16, you can’t select and Advanced Field in Gravity Forms, and then make it hidden. The drop down for “Field Name Visibility” is no longer there. You can select , “Hidden Field” from the field types, but you can’t assign it a CSS class. I’m hoping you can update this Sridhar, or point to a newer tutorial?

    Reply
    • >