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.

How to add Gravity Form to the Page with a custom HTML template?

  1. Hello!

    I have created a custom html based template in wordpress.
    Now, I would like to insert a form to the page that I created using my custom template.
    I have inserted the following code inside of my custom template, which allows me to insert a form on the pages that use my custom template.

    [php]
     <div id="primary">
    			<div id="content" role="main">
    
    				<?php while ( have_posts() ) : the_post(); ?>
    
    					<?php get_template_part( 'content', 'page' ); ?>
    
    					<?php comments_template( '', true ); ?>
    
    				<?php endwhile; // end of the loop. ?>
    
    			</div><!-- #content -->
    		</div><!-- #primary -->

    However, the form does not look and function the way it should, especially when I use advanced fields like Date with a picker, etc.

    When I change the template of the page to my theme's default template, the form looks and function well.

    My first idea was that the HTML code itself is the source of this problem. However, when I created just a blank custom template with the code above, the form looks exactly the same way (not good).

    It looks to me that the above code is not the one that I should use. Can you help me with this problem please? I just spent 8 hours trying to find the solution. Your help is very much appreciated!

    Thank you very, very much!

    Posted 12 years ago on Friday December 30, 2011 | Permalink
  2. Can you post a link to your form page so we can take a look.

    Posted 12 years ago on Friday December 30, 2011 | Permalink
  3. kyle
    Member

    Does this template use header and footer files? If not, the required JavaScript is probably not being called.

    Posted 12 years ago on Friday December 30, 2011 | Permalink
  4. Here it is http://forms.integrity-counseling.com/

    This template does not use header and footer. Can I add just a JavaScript code without the header and footer? If yes, can you help me with that?

    Thank you Rob and thank you Kyle!

    Posted 12 years ago on Friday December 30, 2011 | Permalink
  5. The issue is because the scripts and styles are not being pulled in, which does come through automagically via the head. I mean technically you can place a hard-coded path to the gravityforms css and js files, but that's really not ideal, especially for pages where those files are not needed.

    Try placing the wp_head() into your template page just before the closing </head> tag. Reference:

    http://codex.wordpress.org/Function_Reference/wp_head

    Posted 12 years ago on Saturday December 31, 2011 | Permalink
  6. WOW! It works!!! <?php wp_head(); ?>

    I got some extra space on the top of the page, but the form is working now!!! Thank you very much!!!

    Happy New Year to all of you!

    Posted 12 years ago on Saturday December 31, 2011 | Permalink
  7. Date picker does not work anyway, but I at list can use drop down. Thank you!!!!!

    Posted 12 years ago on Saturday December 31, 2011 | Permalink
  8. Glad to help, Happy New Year to you too!

    Posted 12 years ago on Saturday December 31, 2011 | Permalink
  9. kyle
    Member

    You could try using wp_footer too before your closing body tag. I think some js gets called there too.

    Posted 12 years ago on Saturday December 31, 2011 | Permalink

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