Rendering extra blank form

  • Del087
    Asked on July 28, 2016 at 12:28 PM

    If you take a look at my site here: http://www.realtimehockey.net/rth-gear-test-2.html when you click on one of the products, you'll see a blank light-box form appear.  If you "x" out of that form, the actual form is behind it.  How do I get rid of this blank form?  

     

    Thanks,

     

    Dave

  • David JotForm Support
    Replied on July 28, 2016 at 2:32 PM

    This may be due to having multiple feedback forms embedded to the same page. Does the same thing occur when a single feedback form is embedded?

    Form 1;

    Rendering extra blank form Image 1 Screenshot 30

    Form 2:

    Rendering extra blank form Image 2 Screenshot 41

    Try with a single form to see if that removes the extra pop-up window.

  • Del087
    Replied on July 28, 2016 at 3:28 PM

    So, you're saying I can't have multiple forms on 1 page?  I originally installed yesterday and it was working fine so, it wasn't an immediate issue.  I know that if I only use 1 form it will render correctly, however, that kind of defeats my purpose.

  • David JotForm Support
    Replied on July 28, 2016 at 4:40 PM

    The problem is that you are embedding the same script codes multiple times, which is why it gives you different problems like it gives you another modal box that is blank or it loads slow. The scripts are conflicting one another. You need to only embed them ONCE for each form. The anchor or <a> element can be copied and pasted multiple times because it's not a script.

    Here's the anatomy of your Lightbox embed code to understand it better:

     <script src="https://form.jotform.co/static/feedback2.js?3.3.REV" type="text/javascript">

          var JFL_61526783213859 = new JotformFeedback({

            formId: '61526783213859',

            base: 'https://form.jotform.co/',

            windowTitle: 'PRIVATE SHUTTLE',

            background: '#69a820',

            fontColor: '#FFFFFF',

            type: '1',

            height: 800,

            width: 500,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-61526783213859" style="margin-top: 16px">

            BOOK NOW

          </a>

     

    The green highlight is the script code, that's where the magic happens. If you pasted a similar code in the same page, then that will cause conflicts and problems.

    The yellow highlight is a simple <a> HTML element, it is used to anchor a link, but in our case, it's use as the trigger to open the Lightbox form, this CAN BE copied and pasted multiple times in the same page because it's just a simple HTML code, not a script.

  • Del087
    Replied on July 28, 2016 at 6:14 PM

    Thanks very much for your assistance.  I've got it working now.