modal contact form with gravity forms WordPress

• REFUNDED

Hello,

Problem : form is invisible and does not submit
you can view the problem here : http://sandbox.sideradesign.com/about/
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(document).ready(function(){
$j('a.colorbox').colorbox();
$j("a[rel='example1']").colorbox();
$j("a[rel='example2']").colorbox({transition:"fade"});
$j(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$j(".form").colorbox({width:"40%", inline:true, href:"#form"});

});
// ]]>
</script>
<?php
}
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)

2011-01-12

Denzel Chia answers:

Hi,

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(document).ready(function(){

j('a.colorbox').colorbox();

j("a[rel='example1']").colorbox();

j("a[rel='example2']").colorbox({transition:"fade"});

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.

Thanks

---

paul de wouters comments:

thanks for pointing that out, the code was adapted from the inline HTML example :
http://colorpowered.com/colorbox/core/example1/index.html

---

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