Creating a jquery dialog

Hi,
I am using wordpress to have few lines of code to show up in dialog box but till now no success. I tried .show() of jQuery and its working but doesn’t work if i change it to .dialog() or popup(), anyone got any idea how its not working and what should i do to make it work.? here is Fiddle

Hi,

Are you trying to display a contact form in a Lightbox?

yes, i have some other things too in div, i just want a lightbox or dialog to work.

I had to do something similar a while back.
I wrote it up in this blog post.
Maybe that’ll help you.

Does formlightbox have a do_shortcode?, as you see in my fiddle that i have using it my template in php echo statement

Sure:

[formlightbox title="Send me a message" text="Contact me"]
  [contact-form-7 id="401" title="Contact form 1"]
[/formlightbox]

here is my code


echo do_shortcode('[formlightbox title="Send me a message" text="Contact me"]')
     echo do_shortcode('[contact-form-7 id="36" title="Contact Attorney"]')
        echo do_shortcode('[formlightbox]')

The light box work but it doesn’t display contact form, instead its showing on the page, whereas i want it to open when i click the button, am i doing something wrong?

Try putting everything in one statement:

<?php echo do_shortcode('[formlightbox title="Send me a message" text="Contact me"][contact-form-7 id="36" title="Contact Attorney"][/formlightbox]'); ?>

It worked! thanks a ton! but like i said i wanna have some html side by side the form, now how do it do it?

Is there any documentation for the lightbox? now i am trying to have a button that is clicked upon to have the lightbox opened but the button between shortcodes display in popup, where as i need the one outside to work


<button id="contact">Contact Us</button> 
     <?php echo 
     do_shortcode('[formlightbox"]
         <input type="button" value="Contact Us">
     [contact-form-7 id="36" title="Contact Attorney"]
     [/formlightbox]');
     ?> 


sorry to ask again, i am not good in php

Contact Form 7 wraps its content in a div with a class of “wpcf7”.

I would first of all try to append something to that.

e.g.

$(".wpcf7").append("<p>Hello</p>");

When you get that working, put your content in a template div like so:

<div id="template">
  Lots of content to go next to the form
  ...
</div>

$template = $("#template");
$(".wpcf7").append($template);

HTH

Only problem is i don’t know where to put these and make it run :frowning:

Oh dear!

Could you then post a link to your page?

here, nothing fancy. just using get_template_part above that code to make the page come together,
here are 2 issues,

  1. I need to make the button open the lightbox
  2. I will be doing a div where one div will float left containing the contact form and second div run side by side to run some text, so its like parallel.

Sorry, don’t you have a link to the page you are developing using WordPress?

The reason for needing this, is that JSFiddle will not evaluate the shortcode, whereas Wordpress will.
It will then add a bunch of divs etc to the source code which we can target with jQuery.

I have it on localhost only :frowning:

Ok, well try adding it to your document just before the closing body tags.
To be on the safe side wrap it in a call to document.ready(), although this probably isn’t necessary.

    <script>
      $(".wpcf7").append("<p>Hello</p>");
    </script>
  </body>
<html>

didn’t work, here is my code


jQuery('document').ready(function(){
      jQuery(".wpcf7").append("<p>Hello</p>");    
    });

your right, i was able to do it in do_shortcode but too many divs. Is it possible to open the lightbox with click on a button, instead of hyperlink ?

Not sure.
On the form-lightbox project page, they have an example (no. 7) using an image to open the lightbox on click.
I would think you could probably adapt that to use a button instead.

i tried that but the button displays inside the form. any idea how to fix it? I assume i am echoing the shortcode, that is why it is inside the dialog.