Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

modal contact form with gravity forms WordPress



Problem : form is invisible and does not submit
you can view the problem here :
there is a link in the top right corner (test gravity form)

I'm having trouble getting my Gravity Forms contact form to show up in a modal window.
I'm using the colorbox jquery script, and it works prefectly well with normal text, but if I put a gravity forms shortcode in the text widget, the modal window appears but the form is still 'display:none' so a blank window apears.
for testing, I removed the display:none with firebug and the form appears correctly. but nothing happens when I click submit.
I know it should work, as others have done it successfully.

I'm using the Genesis framework and a customized child theme based on Prose.

here is the functions.php code
/* CS - add Colorbox javascript but not on admin pages, function below */
add_action( 'wp_head', 'my_colorbox_custom' );

function my_colorbox_custom() {
if ( is_admin() ) return;
<script type="text/javascript">
// <![CDATA[
$j = jQuery.noConflict();
$j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$j(".form").colorbox({width:"40%", inline:true, href:"#form"});

// ]]>
wp_enqueue_style( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/example1/colorbox.css', 'screen' );
wp_enqueue_script( 'colorbox', get_stylesheet_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '1.0', true );

and in the text widget :
<p><a class="form" href="#">Test Gravity form</a></p>
<div >
<div id="form" style="padding:0px 20px; background:#fff;">
[gravityform id=1 name=Contactform ajax=true]</div></div>

thank you for your help

Answers (1)


Denzel Chia answers:


Your javascript syntax is wrong.
I will correct your syntax, but does not guarantee will work, because your script could be wrong and I got no means of testing it.

var j = jQuery.noConflict();





j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});

j(".form").colorbox({width:"40%", inline:true, href:"#form"});


It should be var j not $j.
var j is javascript syntax.
$j is php syntax.
$('#text').hide(); is jQuery javascript syntax.

Hope it helps.


paul de wouters comments:

thanks for pointing that out, the code was adapted from the inline HTML example :

paul de wouters comments:

but that doesn't solve the problem.

paul de wouters comments:

it appears it's a bug with gravity forms conditional logic as I now added a simple form and there are no problems.
I'll close this question