PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Gravity forms get rendered first before content

  1. ahorndesign
    Member

    Hi,

    I'm trying to create a shortcode, which call a Gravity Forms form into a fancybox. So far I'm done with it, but it turns out that the form is rendered in a place where it is not supposed to. It gets rendered in the beginning of my content loop (instead of the div I want it to get rendered into).

    The correct (as of what should be) code looks like this:

    <a id="inline" class="btn fancybox" href="#form"><span>Get form</span></a></span></a><div id="form" style="display: none;"><?php .gravity_form(2, false, false, false, '', false) ?></div>

    However, the form does not render in the "form" div, but instead in front of the a tag.

    Please help

    Posted 11 years ago on Tuesday November 6, 2012 | Permalink
  2. David Peralty

    Can you link to this page so we can take a look at what is happening?

    Posted 11 years ago on Tuesday November 6, 2012 | Permalink
  3. ahorndesign
    Member

    I'm developing it on a localhost (no online version is available).
    The Loop that is used on the WordPress page where the shortcode is the standard one.

    The shortcode in the functions.php looks like this - http://pastebin.com/8CT8ZsgH
    The shortcode renders properly, except from the fact that the Gravity Form form get displayed first, at the beginning of the WordPress loop

    Posted 11 years ago on Tuesday November 6, 2012 | Permalink
  4. ahorndesign
    Member

    Anyone? Please help.

    Posted 11 years ago on Thursday November 8, 2012 | Permalink
  5. It will be difficult for us to help you without being able to see the form online. Please post the URL when you have this online somewhere where we can take a look at it.

    Posted 11 years ago on Monday November 12, 2012 | Permalink
  6. I am having the same problem described.

    http://67.20.76.107/~daycarem/daycare/jane-s-of-my-standard-daycare-in-midlothian-va-4/

    The desired effect is to have the form at the right of the photos. The code is attempting to put it into the table cell at the right (excuse my lack of css).

    It will embed the form if I use do_shortcode([gf short code] - but I am using session variables to re-populate the form so the user does not need refill the form each time.

    Any help would be appreciated.

    Posted 11 years ago on Saturday January 12, 2013 | Permalink
  7. @melissa, this has little to do with Gravity Forms. The issue is that the Gravity Form is in a div, which is a block element, and then you add your table after that. You need to float the Gravity Form div to the left, and I would put the table in another div, and then float that to the right. Here is a screenshot: http://minus.com/lfeKO0CT7hkNG

    I added the following CSS to make that happen:

    [css]
    /* this will float the form to the left */
    body .gform_wrapper {
      float: left;
      width: 50%;
    }
    
    /* this will float the table to the right */
    body #wrapper #pic-table {
      float: right;
      width: 48%;
    }

    The CSS will be added to your theme's stylesheet. I also had to wrap your table in an extra div so I could target it. That might need to be done inside your post or your template.

    [html]
    <div id="pic-table">
    <!-- existing table -->
    <table>
    ...
    </table>
    </div><!-- close #pic-table div -->

    Let me know if you need help with that.

    Posted 11 years ago on Saturday January 12, 2013 | Permalink
  8. Thank you guys - solved it another way...

    I used the short code with the filters to dynamically fill the form, same result.

    I appreciate the help.

    Posted 11 years ago on Sunday January 13, 2013 | Permalink
  9. OK, glad you were able to work that out.

    Posted 11 years ago on Sunday January 13, 2013 | Permalink

This topic has been resolved and has been closed to new replies.