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

    My form is scrolling upwards as I shrink my browser's width

    Asked by juscruzzin on December 15, 2016 at 04:26 AM

    Firstly (Mainly)

    I use Adobe Muse so i have got my JotForm working 'responsively' ok using the iFrame embed feature as i found out from your forums. One very annoying problem i am having with my form however is as i reduce the width of my browser window (to simulate viewing the form on smaller devices) it seems to build the content to the TOP of the frame, rather than build it down. It does the same thing in the preview within jotform (they behave exactly the same, so there is no problem with the iFrame embed feature)

    The problem with this is that as it builds up it overlaps 'Headings' etc within my Adobe Muse layout...

    Below is the link to my form and I have attached a screenshot to demonstrate what i am talking about.

    Many Thanks
    Scott

     

    Secondly


    Do you have any 'in-depth' Advanced youtube tutorials going into detail about how to use the custom features such as injecting css and the capabilities of the 'Advanced Designer'. I have no coding experience and i find myself bumbling around the forums constantly trying to work out how to use it (which is an extremely time wasting method of learning).

    Page URL:
    https://www.jotform.com//?formID=63490636473462#

    Screenshot
  • Profile Image
    JotForm Support

    Answered by AIDAN on December 15, 2016 at 04:55 AM

    As we do not have a link to the webpage that you are embedding the form into, I followed your description of the problem and worked on a solution.

     

    I created a corrected form for you that you can clone if this is what you needed: https://form.jotform.com/63491663696975

     

    If you want to replicate the solution in your form, all you have to do is inject this custom CSS code:

     

    #cid_1 {
        margin-top: 10% !important;
    }

     

    The tutorial for injecting custom CSS code is in https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    As to testing the form on mobile devices, please note that decreasing the width of your browser window isn't an accurate way. I created an animation that will hopefully help you test your forms, or any page you like, on a list of very widely used mobile devices.

    I also took this chance to show you in this animation how the corrected form looks on these devices:

     

     

    If you have further questions, or need further assistance with the solution, please don't hesitate to let us know, ideally with a link to the webpage in question.

    Regarding your second point, we created a separate entry for it in the following link, and we will get back to you on it ASAP: https://www.jotform.com/answers/1012129

  • Profile Image

    Answered by juscruzzin on December 15, 2016 at 05:18 AM

    Hello

    Thanks for your prompt reply.
    I have included a proper link to my page: https://www.jotform.me/form/63490636473462?preview=true

    As you can see as the browser window width decreases the form 'scrolls / builds' to the top. It does not remain aligned to the top. this is a nightmare when trying to design in muse with other elements around it... 

    this example above is after injecting the css code you supplied for me.

    Thanks Again

  • Profile Image
    JotForm Support

    Answered by AIDAN on December 15, 2016 at 05:53 AM

    Yes, this is the form that I cloned to work on the issue you described.

    The link I meant though was not a link to the form itself, but rather "a link to the webpage in question" meaning the web page that you are embedding the form into, using muse.

     

    Having a link to the web page that has other elements next to the form, and that demonstrates the issue you're describing, would allow us to inspect it and come up with a solution.

     

    Thank you in advance. We're looking forward to examining and fixing your issue.