Embedded same lightbox form in two places in same webpage. On click of anyone button it displays two lightbox window instead of one.

Dear Sirs,

I am trying to embed one form in two places on one site with the following code.

When I click on the link on the webiste the form opens with an additional layer, see screenshot.

What can I do to avoid this error?

Kind regards,

Achim

<script type="text/javascript" src="https://d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.2.5874">// <![CDATA[

var JFL_51303948918967 = new JotformFeedback({

formId:'51303948918967',

base:'https://secure.jotformeu.com/',

windowTitle:'Muster Mini Faltschachtel',

background:'#FFFFFF',

fontColor:'#FFFFFF',

type:1,

height:500,

width:500,

openOnLoad:false

});

// ]]></script>

<a class="lightbox-51303948918967" style="cursor: pointer; color: blue; text-decoration: underline;"><img style="display: block; margin-left: auto; margin-right: auto;" src="{{media url="wysiwyg/neu-faltschachtel-head-990.jpg"}}" alt="Embedded same lightbox form in two places in same webpage. On click of anyone button it displays two lightbox window instead of one. Image-0" width="" /></a>

Hello Achim,

I did check your web page and found that you have several lightbox code embedded there.

Please be note that if you want to load same lightbox form in two places in same webpage, you do not have to paste the complete code twice. You should add the lightbox script code only once in your web page and the hyperlink code "<a>" code can be added multiple times to ensure that each click will open the same lightbox form instead of multiple forms.

Example:

Add the following code only once in your web page:

<script type="text/javascript" src="https://d2g9qbzl5h49rh.cloudfront.net/static/feedback2.js?3.2.5874">// <![CDATA[

var JFL_51303948918967 = new JotformFeedback({

formId:'51303948918967',

base:'https://secure.jotformeu.com/',

windowTitle:'Muster Mini Faltschachtel',

background:'#FFFFFF',

fontColor:'#FFFFFF',

type:1,

height:500,

width:500,

openOnLoad:false

});

// ]]></script>

The following code can be added any number of times in your web page. If you want to display the button in 5 places in same webpage, you can use it 5 times:

<a class="lightbox-51303948918967" style="cursor: pointer; color: blue; text-decoration: underline;"><img style="display: block; margin-left: auto; margin-right: auto;" src="{{media url="wysiwyg/neu-faltschachtel-head-990.jpg"}}" alt="Embedded same lightbox form in two places in same webpage. On click of anyone button it displays two lightbox window instead of one. Image-0" width="" /></a>

Do try it out and get back to us if this solves your problem.

Do get back to us if the issue persists.

Thank you!