Rendering extra blank form

  • Profile Image
    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

  • Profile Image
    david
    Answered on July 28, 2016 at 02: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;

    Form 2:

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

  • Profile Image
    Del087
    Answered on July 28, 2016 at 03: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.

  • Profile Image
    david
    Answered on July 28, 2016 at 04: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.

  • Profile Image
    Del087
    Answered on July 28, 2016 at 06:14 PM

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