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

    Lightbox Issue on iPhone Device: form jumps all the way down after selecting an option from a dropdown field.

    Asked by RogerYelvington01 on May 09, 2017 at 11:27 AM

    Hi Guys!

    My form: 
    https://form.jotformpro.com/71274182320953

    Is having two issues with the lightbox embedded into my site here:
    https://www.kickstartmealplan.com/

    1. The Lightbox cuts off the header image on desktop browsers
    2. On the Mobile Version when filling out the form, it has issues with scrolling down the form automatically when certain fields are being completed. (IE:  Filling out gender, and the form jumps down to Food Preferences)

    This is the code I entered into the wordpress page:
    <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_71274182320953 = new JotformFeedback({ formId: '71274182320953', base: 'https://form.jotformpro.com/', windowTitle: 'Kickstart Meal Plan - Request Form', background: '#bdc531', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-71274182320953" style="margin-top: 16px;"><img class="aligncenter wp-image-39 size-medium" src="https://www.kickstartmealplan.com/wp-content/uploads/2017/05/download-3-300x55.png" alt="" width="300" height="55" /></a>

     

    I did change this from the default Lightbox Code given slightly, because I wanted to use an image / button to open the lightbox instead of a text/link.


    Please advise, thank you!

    Roger

    Page URL:
    https://www.kickstartmealplan.com/

    Screenshot
  • Profile Image
    JotForm Support

    Answered by BDAVID on May 09, 2017 at 01:01 PM

    Please note that the Lightbox embedding method is not optimized to be responsive. On regards of the top of the form cutting off the header, please try increasing the height of the Lightbox code:

    <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_71274182320953 = new JotformFeedback({ formId: '71274182320953', base: 'https://form.jotformpro.com/', windowTitle: 'Kickstart Meal Plan - Request Form', background: '#bdc531', fontColor: '#FFFFFF', type: 'false', height: 600, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-71274182320953" style="margin-top: 16px;"><img class="aligncenter wp-image-39 size-medium" src="https://www.kickstartmealplan.com/wp-content/uploads/2017/05/download-3-300x55.png" alt="" width="300" height="55" /></a>

    Let us know if you need more help.

  • Profile Image

    Answered by RogerYelvington01 on May 09, 2017 at 01:06 PM

    So there is no way to use lightbox properly on mobile?

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 09, 2017 at 02:29 PM

    I apologize for my previews answer. I had not noticed that the Lightbox code was recently optimized for mobile views already. So the scrolling issue you are experiencing is not due to responsiveness, it is probably due to browsers issue. 

    What mobile device and browser are you using? I tested it through my Android device, using Chrome browser, and that issue did not reproduce:

    Please provide us as much details as you can to try to reproduce the issue, and find a solution.

  • Profile Image

    Answered by Roger  on May 09, 2017 at 02:33 PM

    thank you!

     

    the issue is iphone / safari

  • Profile Image
    JotForm Support

    Answered by BDAVID on May 09, 2017 at 04:47 PM

    I have tested the form in an emulator(iPhone 6plus&Safari browser),  and it worked just fine:

    Unfortunately, I do not have an iPhone device. If it is still happening in another browser besides Safire, and also happening in other iPhone devices, please let us know.

  • Profile Image

    Answered by RogerYelvington01 on May 09, 2017 at 08:53 PM

    I see that it does not have the issues in the emulator.

    I have tested on 4 different user iPhones in Safari - and one each one it does the same issue where it jumps around the form after you select a field, or after you input data in a field.  It is more apparent when you are halfway down the form.

  • Profile Image
    JotForm Support

    Answered by Charlie on May 10, 2017 at 02:39 AM

    I also checked your website and I noticed errors in the console, below you can see the red text at the right side. You can see that the error is related to jQuery and some scroll scripts. 

     

    I believe this is most likely the issue here. Your website uses Wordpress or was created in Wordpress, is that correct? JotForm uses prototype while on your website, it seems like you are using jQuery or at least that's what I am seeing, this is an issue and may result to conflict between these are two different JS libraries. 

    If you are well versed on jQuery or you can create a lightbox dialog/modal on your website creator, then I suggest doing that instead of using JotForm lightbox embed code, embed the form using the iFrame embed code on the custom lightbox you made. 

    If you are not familiar with jQuery and how to create a custom lightbox dialog/modal, then try this workaround:

    In your lightbox embed code, remove the number "2" in the feedback2.js in the src attribute. Below is an example:

    Original:

    <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_71274182320953 = new JotformFeedback({ formId: '71274182320953', base: 'https://form.jotformpro.com/', windowTitle: 'Kickstart Meal Plan - Request Form', background: '#bdc531', fontColor: '#FFFFFF', type: 'false', height: 600, width: 700, openOnLoad: false }); </script>

    Edited:

    <script src="https://form.jotformpro.com/static/feedback.js" type="text/javascript"> var JFL_71274182320953 = new JotformFeedback({ formId: '71274182320953', base: 'https://form.jotformpro.com/', windowTitle: 'Kickstart Meal Plan - Request Form', background: '#bdc531', fontColor: '#FFFFFF', type: 'false', height: 600, width: 700, openOnLoad: false }); </script>

     

    Let us know if the suggestions above worked.

  • Profile Image

    Answered by RogerYelvington01 on May 13, 2017 at 12:16 PM

    Hi Guys!

    Can you have your developers look into this please?  I had my development team check on our side and here was the response:

    --

    Yesterday, I have put this task to check from my team. 
    We have tested the form with responsive ( mobile ) devices.
    The issue seems to be prominent on the iOS devices on safari browser only.


    While we have tried to created a test jot form, the issue seemed to still exist, with some bug in Jotform core embed code.

    --

    Please advise, thank you!

    Roger

  • Profile Image
    JotForm Support

    Answered by Kiran on May 13, 2017 at 03:30 PM

    Your response has been received by our backend team. I see that the issue is assigned to one of our development team members. Once we have any information on this issue, we'll update you here.

    We appreciate your patience.