How to have a fixed field while scrolling?

  • Profile Image
    inteez
    Asked on May 06, 2017 at 04:33 AM

    Hi,

    I need a sticky calculation field at the top or bottom of the form.

    By this I mean a field that does not scroll with the page. The fields also needs to be 100% across the viewport and with an opaque background.

    The form will be embedded in an Adobe Muse page: https://inteez.net/landing/index.html

    Can you help with this?

     

    Thanks,

    Guy

  • Profile Image
    Nik_C
    Answered on May 06, 2017 at 09:35 AM

    I created this form: https://form.jotformpro.com/71253319192959 and inserted the below CSS in Custom CSS field:

    #label_5{
    position:fixed;
    margin-top:-90px;
    margin-left:260px;
    }
    #input_5
    {
    position: fixed;
    width:40%;
    margin-top:-70px;
    background-color: rgba(0, 0, 0, 0.4);
    height:30px;
    }

    Could that be something that could work for you?

    Also, a suggestion, maybe it will be better if the field is position all the way to the right.

    Please let us know.

    Thank you!

  • Profile Image
    inteez
    Answered on May 08, 2017 at 04:01 PM

    Thanks Nic!

    Even if if it works with the jotform link, it does not work when the form is embeded

    Have a look here: https://inteez.net/landing/index.html

    The field scrolls with the page.

    Do you have another suggestion?

     

    Thanks,

    Guy

  • Profile Image
    Welvin
    Answered on May 08, 2017 at 05:51 PM

    It's an embedded content. Its style is limited to only absolute or relative. A workaround would be to embed the form using its source codes.

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    Note that there are CSS and scripts in the source codes. These part of the source codes should be placed inside your header tags. The <form> that ends with </form> should be placed within the body where you'd like the form to appear. 

    Please try that and let us know how it goes.