What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Problems With Lightbox Prepopulation

    Asked by NTHS on July 20, 2012 at 05:34 AM

    Form ID: 22012344674345

     

    The hidden field - which is supposed to drag the page URL in to the email is not working (blank on email) and one of our date boxes also fails to populate the email.

    On our page we are using the following:

     

    <script src="//jotformeu.com/min/g=feedback2" type="text/javascript">

    new JotformFeedback({

    formId:'22012344674345',

    base:'http://jotformeu.com/',

    windowTitle:'quote',

    background:'#FFFFFF',

    fontColor:'#FFFFFF',

    type:2,

    height:430,

    width:510,

    iframeParameters: {

    'item':window.location.href

    }

    });

    </script>

    <a class="lightbox-22012344674345" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="<?= theme_resource_url('images/btn_quote_now.png') ?>" alt="Quote Now"/></a>

    Page URL:
    privateURL

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 20, 2012 at 07:28 AM

    Two things:

    -  You are doing it the wrong way. Following this guide, you should be using the hidden field's name which is product. Also, you should remove the default value ($item) you have assigned to this field.

    The correct parameter should be:

    iframeParameters: {
    'product':window.location.href
    }

    -  Secondly, there is a known bug which affects prepopulation when using http://jotformeu.com/min/g=feedback2. You should instead use http://jotformeu.com/min/g=feedback then insert the jQuery noconflict() function to the page where the form is embedded.

     

    Minding the things that I've mentioned above, here is how to fix your problem:

    1.  Embed the following codes to your form:

    <script src="//jotformeu.com/min/g=feedback" type="text/javascript">

    new JotformFeedback({

    formId:'22012344674345',

    base:'http://jotformeu.com/',

    windowTitle:'quote',

    background:'#FFFFFF',

    fontColor:'#FFFFFF',

    type:2,

    height:430,

    width:510,

    iframeParameters: {

    'product':window.location.href

    }

    });

    </script>

    <a class="lightbox-22012344674345" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="<?= theme_resource_url('images/btn_quote_now.png') ?>" alt="Quote Now"/></a>

    3.  Remove $item from the hidden field's default value

    4.  In your page's source code, find the reference to jQuery library (hosted on googleapis)

    5.  Paste this code right below the jQuery reference:

    <script type="text/javascript">
      $.noConflict();
    </script>

    So it becomes:

    6.  Save your webpage

  • Profile Image

    Answered by NTHS on July 20, 2012 at 08:30 AM

    Thanks, that all works great now except that the lightbox has a horizontal scroll bar on it... but I dont understand why?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 20, 2012 at 08:48 AM

    Can't reproduce that problem on my end. Would you mind sharing the URL of the page where your lightbox form is embedded?

  • Profile Image

    Answered by NTHS on July 20, 2012 at 08:55 AM

    Hi, thanks for coming back to help me.

    I can't share the URL because it's locked in a development website which I cant open up the access to but it's strange that in Jotform, when I preview the form, I don't have the issue... so I'm wondering if that hidden field - which pulls a long URL - is creating this problem on the dev website only?

    I've tried some custom CSS to remove scroll bars but it seems that my css isn't like and it stops the lightbox from appearing...

     

    I could send you a screenshot if you have an email address?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 20, 2012 at 09:08 AM

    I see it now. This has to do with the form's width and the width property of your lightbox embed codes.

    Please change your lightbox codes to use width:600

  • Profile Image

    Answered by NTHS on July 20, 2012 at 09:18 AM

    ok, thats a good work around... I've just found out that adding Jotform stops the Add to Cart button from working... hmmm... must be a conflict somewhere but it's certainly no with the jQuery

  • Profile Image

    Answered by NTHS on July 20, 2012 at 09:37 AM

    Is your lightbox running on mootools or jquery or something else?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 20, 2012 at 09:40 AM

    We use the following libraries for the lightbox method:

    http://jotformeu.com/min/g=feedback2 - jQuery

    http://jotformeu.com/min/g=feedback - Prototype

  • Profile Image

    Answered by NTHS on July 20, 2012 at 09:45 AM

    ah! Prototype... my oldest nemesis!

    ....switched back to feedback2 (jQuery) and all seems fine now.

    Thank you, thank you, thank you kindly!!

  • Profile Image

    Answered by jeanettebmz on July 20, 2012 at 01:04 PM

    On behalf of my colleague Neil, you are very much welcome!

    Keep enjoying Jotform and do not hesitate to look for help in the future .

    We are always happy to assist

    Jeanette

  • Profile Image

    Answered by NTHS on August 25, 2012 at 02:17 PM

    The email is not populating with the hidden field (URL) but I dont understand why. Could you take a look?

  • Profile Image

    Answered by fxr on August 25, 2012 at 05:46 PM

    Its hard for us to work out what may be going wrong without seeing a link to the webpage hosting the form. 

    Can you give us any more details of the forms, a URL or code used?