Support » Plugin: Shortcodes Ultimate » Lightbox Inline Content

  • Hi,

    I want to use my contact form shortcode on a lightbox.
    So when i click on a button or a url or an image the lightbox pups up and shows my contact form. i use best websoft contact form and my shortcode for it is [bestwebsoft_contact_form lang=en].
    when i use the page text editor and open shortcode “lightbox” i don’t know what to put in “Content source” field. I cant leave it blank so what should i put inside to use my form?

    thanks. best regards

Viewing 3 replies - 1 through 3 (of 3 total)
  • Unless I’m missing something key, it is not “intuitive” to get lightboxes to work.

    Here’s an example of my solution:

    Put this in your content:

    [lightbox type="inline" src=".gift-box"] <h2>Click Here For Your Lightbox</h2>[/lightbox]
    <div class="gift-box"> This is what will pop up in the lightbox [bestwebsoft_contact_form lang=en]</div>

    add this to your theme .css file:

    .gift-box {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 2px solid #CCCCCC;
      border-radius: 5px;
      height: 50%;
      margin: 0 auto;
      padding: 25px;
      position: relative;
      width: 50%;
    .gift-box {
    display: none;
    .mfp-content .gift-box {
      display: block;
    .su-lightbox > h2:hover {
      cursor: pointer;
      opacity: .6;
    Ultimate Peter


    Update (more efficient method): used by me at
    Yeah, this lightbox deal was bugging me. I need to place several inline html chunks in lightboxes on the same page. No documentation on this really. Thanks AJD for your stepping stone, however your solution is a little inefficient. This would mean you have to add CSS to your theme file for every new div you want to turn into a lightbox. That is messy and scary, if you were ever to mess up your CSS file.

    I did some tinkering and came up with a way to only edit the CSS of the plugin once.

    Here’s what you do:
    1. Navigate to /wp-content/plugins/shortcodes-ultimate/assets/css/magnific-popup.css
    2. Go to line 53, which should look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 100%;
      cursor: auto; }

    and change it to look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 50%;
      background: #fff;
      padding: 25px;
      border-radius: 25px;
      cursor: auto; }

    3. That’s it, now a special note when you are creating the code for the post with inline. It will look like this:

    [su_lightbox type="inline" src=".church"]here is the button[/su_lightbox]
    <div class="church mfp-hide">
    this is the inline content

    -“church” is the made up identifier that the lightbox calls. With this method, you just make a unique identifier for each inline lightbox on the page.
    -Each lightbox div will also use class “mfp-hide”
    -mfp-hide is a class that I found already resident in magnific-popup.css
    I played around and found that when you use it, it force-hides the div on the page, but allows it to change to “display: block;” when it opens the lightbox. I tested it and it is great now! I can put the six seperate page popups in!

    YAY! Do this change and use the two classes, and it will work every time without further CSS creations…

    Of course, buttons work best, instead of regular text, because then it is obvious you must press it.

    Keep in mind, if you update the plugin, it will probably overwrite this.
    Suggestion: keep the css code somewhere saved to redo the change, or ask the author to incorporate it.

    I want to insert Visual Form Builder Form in a PopUp/lightbox using Shortcodes Ultimate. I want to create a link, when user click that link the popup with the form should appear.
    I’m tired of adding light box content shortcode but it does not appear at all.

    Please help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lightbox Inline Content’ is closed to new replies.