Form Collapse: change the onload to scroll top to 200 instead of 0.

  • Profile Image
    shahidnextg
    Asked on March 07, 2019 at 12:14 PM

    My form accordion offset to top of browser in open state, I want to limit the offset property to stay below my header. How can I cahnge the form offset scroll top to 200 or more instead of 0. i've attached two screen shots for reference, when i open the accordion it should stay within container but it scrolls all the way to top of header.

  • Profile Image
    BDAVID
    Answered on March 07, 2019 at 12:56 PM

    It looks like you have embedded the form in a website. Could you share the URL of the site where it is embedded?

  • Profile Image
    BDAVID
    Answered on March 07, 2019 at 01:04 PM

    Please try injecting the following CSS code in your form to avoid the collapse fields to load to at 0: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-section {

    padding-top: 50px;

    }

    Result:

    1551981840load.gif

  • Profile Image
    shahidnextg
    Answered on March 07, 2019 at 01:17 PM

    My site is on local box under development, it's not live.

  • Profile Image
    Richie_P
    Answered on March 07, 2019 at 01:40 PM

     May we know if you have tested my colleagues suggestion?

     Please give it a try and let us know how it goes.

  • Profile Image
    shahidnextg
    Answered on March 07, 2019 at 02:43 PM

    Yes i tested it is not scrolling to top but gives padding between all the form sections, like you can see in the picture1551988004pio2018-3.JPG

  • Profile Image
    Richie_P
    Answered on March 07, 2019 at 03:09 PM

    Can you please try embedding your form using the Iframe code and let us know how it goes?


  • Profile Image
    shahidnextg
    Answered on March 07, 2019 at 03:40 PM

    When i use the iframe the accordion does not work

  • Profile Image
    BDAVID
    Answered on March 07, 2019 at 04:14 PM

    If you were using the Embed code option, copy it again into a Notepad:

    1551992879copy.png

    And add "?nojump" at the end of the form URL. Example:

    1551992971nojump.png

    Then copy the whole code from the Notepad, and embed it in your site. Result:

    1551993093result.gif

    As well, if you still want to use the Iframe code, add "?nojump" at the end of the URL:
    1551993201nojump_001.png

    Let us know if you need more help.

  • Profile Image
    shahidnextg
    Answered on March 07, 2019 at 05:42 PM

    I'm no using the embed option

  • Profile Image
    jherwin
    Answered on March 07, 2019 at 07:26 PM

    I checked the screenshot you gave us and saw that your form was embedded

    1552004636embedded.png

    Could you please give us the URL of the webpage where you embed the form so we can check it?

    If you are referring to something else, please further explain the details so we can give you a detailed answer.

  • Profile Image
    shahidnextg
    Answered on March 07, 2019 at 11:19 PM

    my site is on test server I will need to upload it somewhere for you to check.

  • Profile Image
    BDAVID
    Answered on March 07, 2019 at 11:32 PM

    Which embedding method are you using? Did you try adding the "?nojump" parameter at the end of the form URL?

  • Profile Image
    Richie_P
    Answered on March 08, 2019 at 12:22 PM

    I have checked your web page and it seems you're using the script to embed your form.

    Checked the console logs and it seems there are issues with your form and web page scripts.


    We recommend you use the iframe embed code instead on your website,

    To get the Iframe code, on the JotForm Form Builder:
    1. Open "Setup & Embed" tab on toolbar,
    2. Click on "Share Form"
    3. Click on "IFrame Code".


    In the iFrame embed code change the source url to https://form.jotform.com/83449059085163?nojump

    Please give it a try and let us know how it goes.

  • Profile Image
    shahidnextg
    Answered on March 08, 2019 at 01:06 PM

    the form submits perfectly fine the only issue I had was when i expand the accordion it jumps to top of header.

  • Profile Image
    Richie_P
    Answered on March 08, 2019 at 02:23 PM

    Can you please try the above method and let us know if the collapse still jumps to the top header?

    Looking forward for your response.