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

    How can I make a Text element float?

    Asked by lafhab2 on June 12, 2015 at 08:44 AM
    This is great, but I have a question:

    How can I make a Text element float?  There is no element field ID to quote for inserted text/html.

    I am using pre-populate for a specific field, I wanted that to float but can't make it large enough, so I have used the text element and insert {fieldname} which is fine because I can use font size.  I now want to make that float but there is no field ID to use in the code above.
  • Profile Image
    JotForm Support

    Answered by Boris on June 12, 2015 at 09:11 AM

    Hello.

    Al regular form fields (widgets excluded) have classes, IDs, or other ways of selecting them through CSS. Could you please show us the exact element that you would like to "float" on the screen?

    I have cloned your most recent form, CC GH11 A, and I assume you are trying to float the Student text field, correct? Now, you would be accessing the form with the ?student=somename parameter.

    http://form.jotformpro.com/form/51623433537958?student=somename

    To float this Student field, you should find out its selector, which you can see by right-clicking on the live form and Inspect Element.

    We can see that this element (3) has the ID of id_178, which means that we select the entire Text field by using #id_178. But I assume you want to select just the word "somename", which is created by {student} - we can see (4) that it has received a class of 178_student, which means we need to use span[class="178_student"] as its selector. (Due to technical reasons, you can't write classes that start with numbers as .178_student)

    span[class="178_student"]{position:fixed;right:10px;bottom:20px;}

    Please take a look at the above form to see if this is what you are looking for, and please let us know if you need further assistance.

  • Profile Image

    Answered by lafhab2 on November 11, 2015 at 08:26 PM

    It has been a while since you replied however some time recently this stopped working.  The specified fields no longer stay in a fixed position, on ANY of your forms, despite the correct code still being in place.  I think this occurred a few weeks ago when the backend was changed and everything was bullet-pointed.  The above solution no longer works, the injected CSS is there but it doesn't work, eg:

    span[class="167_student166"]{position:fixed;right:40px;top:20px;}
    span[class="169_formname"]{position:fixed;right:40px;top:50px;}

    Is there a new way of achieving this, ie fixed position of specified fields.  It used to work but I think a change made in the backend has caused it to stop working.

  • Profile Image
    JotForm Support

    Answered by Charlie on November 12, 2015 at 03:15 AM

    It seems like the CSS selectors have been changed, either by using a new theme, editing or deleting the old field or there was a changed made by the backend team. You could try updating the CSS selectors instead.

    Here's how:

    1. If you are using Chrome browser, first, right click on the element and choose "Inspect Element"

     

    2. In the browser console, it should auto highlight the element you inspected. Now, right click on that specific element and choose "Copy CSS path". Please note that the text element is wrapped in multiple elements. In this case, the specific child element we want to get is the <span>

    3. Now paste the CSS selector and add the custom CSS code in your Form Designer Tool. In my case, this is how it looks like:

    #text_178 > p > span > span {

        position : fixed;

        right : 10px;

        bottom : 20px;

    }

     

     

    I cloned my colleague's form, you can check how it looks like with the change I made: https://form.jotform.com/53151629455962? 

    Let us know if you need more assistance on this.

  • Profile Image

    Answered by lafhab2 on November 12, 2015 at 07:20 AM

    Thanks for the reply, yes I have followed the guidance - very clear! - and it seems to be working but I'm having one small issue still.  I'm trying it on 'CCH GH0', as with all forms I have 2 elements to 'fix position' of but can't get the 2nd one to fix. My code seems correct:

    #text_187 > p > span > strong > span {

        position : fixed;

        right : 20px;

        top : 40px;

    }

    #text_189 > p > span > strong > span {

        position : fixed;

        right : 20px;

        top : 60px;

     

    }


    Can you see if anything is wrong with the above code?

     

  • Profile Image
    JotForm Support

    Answered by Charlie on November 12, 2015 at 09:20 AM

    Could you share us the form URL or form title?

    I can't seem to find a form titled "CCH GH0", I see one "CC GH10".

    Perhaps this will work:

    #text_187 > p > span > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 40px !important;

    }

     

    #text_189 > p > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 60px !important;

    }

     

     

    Make sure that there's no duplicate code that will conflict the other one. Let us know if that works.

  • Profile Image

    Answered by lafhab2 on November 13, 2015 at 07:30 AM

    Thanks for the reply, yes I meant CC GH10 - sorry for the confusion.  I managed to get the above working, I went on to the next one but can't get that working quite right.  I used 'inspect element' to get the text numbers, for this form it's 178 & 180, so the code applied is:

    #text_178 > p > span > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 40px !important;

    }

     

    #text_180 > p > strong > span > span {

        position : fixed !important;

        right : 20px !important;

        top : 80px !important;

    }


    The page is: http://form.jotformeu.com/form/41604031931342?student=Sample%20Name&formname=GH11

    Frustratingly, the name element (180) didn't position, although the form (178) did.  I changed the numbers round so it was 180 first and then 178, and the name did position.  Therefore on the above code, the first element positions but the second doesn't.  It worked on CC GH10 no problem.  I can't see anything wrong with this, so why isn't it working?  Is extra code required between the 2 elements?

  • Profile Image
    JotForm Support

    Answered by Charlie on November 13, 2015 at 09:18 AM

    The elements seems to change in your end. Have you copied exactly the elements? Changing the element numbers may not accurately give you the correct CSS path, you need to inspect each element.

    In my case, I checked the form you shared:

     

    The CSS path for the above element I copied is this one:

    #text_178 > p > strong > span > span

     

    I then copied the other element and this is the path for it:

    #text_180 > p > strong > span > span

     

     

    So in each form, you need to do the same process, right click on the element you want to change position, copy the CSS path of the highlighted element.

    You can check the cloned form here: https://form.jotform.com/53163700434952? using those CSS paths.

    Let us know if you need more help on this.