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

    Custom CSS for Fields

    Asked by fcrp on June 05, 2014 at 02:31 PM

    Support, please look at my form... why is my background image dropping down in the edit window?? I cannot see my fields that I'm trying to custom edit with CSS??

    Thanks!

    Page URL:
    http://www.jotform.com//?formID=41550505219145

    background image thanks
  • Profile Image

    Answered by bob on June 05, 2014 at 03:47 PM

    I have cloned your form and injected custom css code which solve the problem. Please visit the link below which is a clone of your form.

    http://form.jotformpro.com/form/41556301950955

    Please look over the screenshot below to get clear idea about the workaround.

    Please let us know if additional assistance is needed.

    Thank You

  • Profile Image

    Answered by fcrp on June 06, 2014 at 09:47 PM

    ok, thanks but i have to change the fields back to the top right inside the transparent box

  • Profile Image

    Answered by fcrp on June 06, 2014 at 10:05 PM

    Now my fields are not moving to the specific places I need them - I need the fields "inside" on the right side of the transparent box

  • Profile Image

    Answered by fcrp on June 06, 2014 at 10:15 PM

    when I remove " } " after the margin px the image still drops down...

    when I leave the " } " there, the image still drops down....

    Now, I cannot move the fields using CSS by changing the "margins" and "top"

    See photoshop file attached from my client on how they want the form to look like...

  • Profile Image

    Answered by Cesar on June 07, 2014 at 02:38 AM

    Please try this layout, I am appending my example form and CSS code below. You may need to work out the positioning of the fields just the way your client wants them, but this should help you jumpstart your project:

    http://form.jotformpro.com/form/41571607897971?

     

    CSS Code:

    /*---BACKGROUND IMAGE---*/

    img.form-image {
    z-index: -1;
    position: absolute;
    margin-left: -30px !important;
    }

    /*---REMOVE HIGHLIGHT---*/

    .form-line { background: none; }

    /*---FIELD POSITIONING---*/

    #id_3{
    margin-top: 120px !important;
    left: 370px !important;}
    #id_5{
    margin-top: 120px !important;
    left: 307px !important;}

     

    Do let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by fcrp on June 07, 2014 at 11:12 AM

    still not working. had to remove the code....

    img.form-image {
    z-index: -1;
    position: absolute;
    margin-left: -30px !important;
    }

    so i can add my image code but when i add it, the fileds STILL does not move when i change the margin and top... this is what i have at the moment..

    http://www.jotform.com//?formID=41550505219145

  • Profile Image
    JotForm Support

    Answered by Welvin on June 07, 2014 at 02:46 PM

    I will get back to you with the correct custom CSS codes later. I would also suggest creating the final form. Some fields are labeled as "Click to edit" which I think NOT that actual field label so everything will come as final - including the custom CSS codes for the alignments.

    Thanks

  • Profile Image

    Answered by fcrp on June 07, 2014 at 04:48 PM

    ok thanks... i did create the final form before and alos the fileds were not moving.. I recreated the from a couple of times but no moving fields - ok if you can, I need to get this done before Monday....

  • Profile Image
    JotForm Support

    Answered by Welvin on June 07, 2014 at 06:29 PM

    I still see the edit texts in the form: http://www.jotform.us/form/41550505219145. Anyway, I've modified the labels based on your screenshot.

  • Profile Image
    JotForm Support

    Answered by Welvin on June 07, 2014 at 06:32 PM

    Please take a look at this form: http://www.jotformpro.com/form/41576106130950

    Thanks

  • Profile Image

    Answered by fcrp on June 08, 2014 at 01:46 AM

    ok, the code is somewhat working... now i need to bring all the fiels down...now when i try to edit the "top", for example id1, the entire fields moves down. then i try to move the other id and all the fields moves too??

     

    See here: http://www.jotform.com//?formID=41550505219145

  • Profile Image
    JotForm Support

    Answered by Welvin on June 08, 2014 at 06:53 AM

    Isn't that your requirements in terms of the format of the form? When you say move down all the fields, is it below the black rectangular background?  Can you take a screenshot of the form and label your preferred position?

    When you move the first name field, that shouldn't affect the other fields. Please make sure to just adjust the value and don't remove the elements like the colon, semi-colon, the negative sign and the pixel abbr. on it.

    Thanks

  • Profile Image

    Answered by fcrp on June 09, 2014 at 10:09 PM

  • Profile Image

    Answered by fcrp on June 09, 2014 at 10:11 PM

    this is the code i have now. i havent touched this in almost 2 days...

    ---------------------------------------------------------------------------------

    .form-label{
    width:150px !important;
    }
    .form-label-left{
    width:150px !important;
    }
    .form-line{
    padding-top:1px;
    padding-bottom:1px;
    }
    .form-label-right{
    width:150px !important;
    }
    body, html{
    margin:0;
    padding:0;
    background:false;
    }.form-all{
    margin:0px auto;
    padding-top:20px;
    width:970px;
    color:#F9C008 !important;
    font-family:'Arial';
    font-size:8px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
    color:#F9C008;
    }/* Injected CSS Code */
    .form-all {
    background-image: url('http://managemyrental.net/images/homepage-call-action-box-form.jpg');
    padding-top: 402px;}
    .form-line-error .form-error-message {
    display: none;
    }
    .form-line-error {
    background: transparent;
    color: white;
    }
    li#id_1 {
    margin-top: -232px;
    margin-left: 444px;
    position: relative;
    }
    li#id_4 {
    margin-top: -232px;
    margin-left: 616px;
    }
    li#id_3 {
    margin-top: -184px;
    margin-left: 444px;
    }
    li#id_7 {
    margin-top: -184px;
    margin-left: 616px;
    }
    li#id_5 {
    margin-top: -141px;
    margin-left: 444px;
    }
    li#id_6 {
    margin-top: -141px;
    margin-left: 527px;
    }
    input {
    width: 137px;
    }
    textarea {
    width: 215px;
    height: 18px;
    }
    button#input_6 {
    width: 80px;
    }

  • Profile Image

    Answered by fcrp on June 10, 2014 at 12:47 AM

    ha, i see what you mean - in the form editor itself it looks all fudged up but when i embed it in the site it looks ok except in IE, go here using IE - http://www.managemyrental.net/ - there's a HUGE gap after the form..... Firefox - looks great

  • Profile Image
    JotForm Support

    Answered by abajan on June 10, 2014 at 05:18 AM

    We will try to figure this out as best as we can for you. In which version of Internet Explorer and on what operating system are you getting this space? Upon checking your page at Browserstack, in none of the versions of IE was I able to replicate the issue. Even IE 8 displayed the form with no extra space under it.

    We'll await your response.


    Thanks