WordPress.org

Ready to get started?Download WordPress

Forums

Form Lightbox
Clicking an image to pop up the lightbox form (15 posts)

  1. hungrybadger
    Member
    Posted 2 years ago #

    Hi, great plugin.

    I'm looking for help with coding in an image.

    I would like visitors to be able to click on an image to open the lightbox instead of just text.

    I've tried a few variations, but can't get it to work.

    Thanks,
    Matt

    http://wordpress.org/extend/plugins/form-lightbox/

  2. constantine.johny
    Member
    Posted 2 years ago #

    Well thats really simple. I made something similar with a custom button.

    All you need to do is use the shortcodes mentioned in Installation tab and modify them as this:

    [formlightbox_call title="lightbox form" class="1322379893472"]
    <img src="path/to/your/image.png alt="" /">[/formlightbox_call]
    and object shortcode [formlightbox_obj id="1322379893472" style=""
    onload="false"][form shortcode here][/formlightbox_obj]
  3. drmilesbennell
    Member
    Posted 1 year ago #

    constantine.johny - you said you did this with a custom button? I am trying to do that exact thing with a button and can't figure out how to do so. Any help would be hugely appreciated! Thanks!

  4. BHT Design
    Member
    Posted 1 year ago #

    Hi there,

    I just got around to testing this today, and the following code worked:

    [formlightbox_call title="BHT e-zine sign-up" class="1364312302249"]<img class="alignright size-full wp-image-3077" alt="ezinelink_W220" src="http://www.bht.org.uk/wp-content/uploads/2013/03/ezinelink_W220.png" width="220" height="61" />[/formlightbox_call] [formlightbox_obj id="1364312302249" style="" onload="false"][gravityform id="4" name="Ezine" ajax="true"][/formlightbox_obj]

    Just place your image html between [formlightbox_call title="BHT e-zine sign-up" class="1364312302249"] and [/formlightbox_call] [formlightbox_obj id="1364312302249" style="" onload="false"][gravityform id="4" name="Ezine" ajax="true"][/formlightbox_obj]

    Hope that helps. :-)

  5. BHT Design
    Member
    Posted 1 year ago #

    Hi there,

    I just got around to testing this today, and the following code worked:

    [formlightbox_call title="BHT e-zine sign-up" class="1364312302249"]<img class="alignright size-full wp-image-3077" alt="ezinelink_W220" src="http://www.bht.org.uk/wp-content/uploads/2013/03/ezinelink_W220.png" width="220" height="61" />[/formlightbox_call] [formlightbox_obj id="1364312302249" style="" onload="false"][gravityform id="4" name="Ezine" ajax="true"][/formlightbox_obj]

    Just place your image html between
    [formlightbox_call title="BHT e-zine sign-up" class="1364312302249"]

    and

    [/formlightbox_call] [formlightbox_obj id="1364312302249" style="" onload="false"][gravityform id="4" name="Ezine" ajax="true"][/formlightbox_obj]

    Hope that helps. :-)

  6. drmilesbennell
    Member
    Posted 1 year ago #

    BHT Design:

    That code is for the original poster, right? That wouldn't work with a button?

  7. BHT Design
    Member
    Posted 1 year ago #

    No, the code from '<img..' through to 'height="61" />" is for an image / sprite button.

  8. flick
    Member
    Posted 1 year ago #

    @BHT Design: Does your Ajax submission still work after using formlightbox_call?

    Just testing it out at the moment and am not sure its fully working for me using the above.

  9. BHT Design
    Member
    Posted 1 year ago #

    flick: All working OK at this end. Check http://www.bht.org.uk/ and look for the 'e-zine Click here to subscribe' button about half way down on the right.

  10. flick
    Member
    Posted 1 year ago #

    @BHT Design: Thanks for your reply :) I can confirm that it does work well on your website (looks shiny!)

    Really glad to see it's working. At least I know my issue is local now, whereby the validation error message pops up beneath the form (and so does the ajax loader) just fine, but when I actually 'submit' the form, the ajax loader spins but although the form is submitted successfully, the Success message doesn't appear in the same place.

  11. flick
    Member
    Posted 1 year ago #

    And miraculously... it decided to work :) Must have been some conflict with another Fancybox using plugin.

  12. stcom
    Member
    Posted 1 year ago #

    Where does this code go exactly? I have a theme that has an image I am trying to link. I think the link goes in a .php file but not sure. Thanks.

  13. flick
    Member
    Posted 1 year ago #

    @stcom: Little bit confused by your question, sorry.

    The standard shortcode only gives you a text link that users can click on for the form; but BHT's shortcode (above) means that you can actually use an image such as 'Click me' that users can click on to launch the form as an overlay.

    And this code should go into your post editor.

    It will need some tweaking to suit your own setup (e.g. if you're using Contact Form 7 etc.)

  14. stcom
    Member
    Posted 1 year ago #

    Hi, thanks for your reply. My theme already has the buttons in it which I'd like to keep (.png file). So basically I am trying to wrap this code around the image button on my site. I am using get response shortcode inside the form lightbox shortcode which works fine with plain text. I don't need to call any images since the images are already on the theme. I have this so far:

    <?php echo do_shortcode('[formlightbox][grwebform wid="xxxxxx" css="on"][/formlightbox]'); ?>

    and I tried replacing below this in my featured.php file with the above:

    <href="<?php echo esc_url($link); ?>"class="join-button"><?php echo wp_kses( $button, array( 'span' => array(), 'strong' => array() ) ); ?>

    When I put in the details of BHT it pulls a fresh image it seems. Looking to add on the custom ones in the theme now. Hopefully someone can help. Thanks!

  15. designpoint
    Member
    Posted 1 year ago #

    Hi guys,

    Great posts! Is it possible to have a user click on an image on the sidebar and it will pop up with a 'fill out your details' form?

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic