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 to a adjust the "Text Box" height & width and also the font height inside the input (not the "Text Area" height!)

    Asked by dmm_webmaster on December 07, 2012 at 12:59 AM

    Hello!!

    How to a adjust the "Text Box" height and width listed under Form Tools and also the font height inside the input line (not the "Text Area" height!)

    I am using the template called Industial Dark and the input line boxs are way to small.

    Thanks!!!

    Billy

     

    text box height text box width height font
  • Profile Image
    JotForm Support

    Answered by idarktech on December 07, 2012 at 01:53 AM

    Hi Billy,

    I see you've already Injected some CSS codes to your form. You might also want to use this, the following code is only for "Text Boxes".

    .form-textbox {

    height: 25px !important;

    width: 220px !important;

    font-size: 14px !important;

    }

    Just adjust the values if necessary. Thanks!

  • Profile Image

    Answered by guest_23412325015035 on December 07, 2012 at 04:23 AM

    Hi idarkteck,

    Thanks for the css, that made a difference, however now the text boxes for the Phone Number and the Capcha are too big. Is there a way to just resize them? And is there a way to slightly increase the Sub Label description that's just under the input box?

    Also, how do I move the capcha at the bottom to the right under the Text Area (Question/Comments) box?

    Here is the clone of my orginal form. Once these requests can be done on this clone, I will turn it on and embed it into my website. The clone:

    http://form.jotform.us/jsform/23408736276156

    Again, I thanks you so very much for your help!!

    Billy

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2012 at 06:08 AM

    Hi Billy

    Please add the following rules to the form's currently injected CSS:

    #input_6_area {
    width: 50px;
    }

    #input_6_phone {
    width: 77px;
    }

    #input_9 {
    width: 130px !important;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    color: #E0690D;
    }

    The last rule removes the highlighting of unfilled required fields. If you would rather just change the color instead of removing it, substitute a color for none.

    Also, in case you were wondering, highlighting of focused fields can be removed by going to the Field Styles tab of the Preferences popup and selecting Disabled:

    Here's a clone of the form with the above changes.

    If you would like further assistance with anything, we'd be happy to help.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2012 at 06:15 AM

    Oops! I forgot to include !important in the declarations of the rules affecting the phone inputs. Please amend the said rules as follows:

    #input_6_area {
    width: 50px !important;
    }

    #input_6_phone {
    width: 77px !important;
    }

  • Profile Image

    Answered by on December 07, 2012 at 08:22 PM

    Hello abajan and idarktech!

    Thanks abajan for the css to correct the width issue!

    I cannot seem to remember how to move the capcha and summit and clear button to the right under the Text Box (Questions/Comments). Can you please help me do this on the clone at
    http://form.jotform.us/jsform/23408736276156 ?

    Also how to decrease the space between the items on the left and the right?

    And is there a way to slightly increase the "Sub Label" description that's just under the input boxs?

    I greatly appreciate all the help from you guys!!

    Thanks!!

  • Profile Image
    JotForm Support

    Answered by Welvin on December 07, 2012 at 11:59 PM

    Hi,

    To move the captcha and submit/clear button to right below questions/comments box, inject this codes;

    #id_9 {

    float: right !important;

    margin-right: -364px !important;

    margin-top: -331px !important;

    }

    #id_2 {

    float: right !important;

    margin-right: -210px !important;

    margin-top: -196px !important;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

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

    With regards to this questions;

    Also how to decrease the space between the items on the left and the right?
    -Did you mean between the Questions/Comments box and Name fields? If yes, that is by adjusting the custom CSS codes that are injected to your form for the questions/comments box and the new above for captcha and submit/clear buttons.

    And is there a way to slightly increase the "Sub Label" description that's just under the input boxs?
    -Did you mean increase the height and width? Or, increase the font size?


    Let us know your answer with this questions so we/I can proceed for the solution.

    Thanks
  • Profile Image
    JotForm Support

    Answered by Welvin on December 08, 2012 at 12:08 AM

    Opps!

    I forgot to include some codes, please use this codes instead;

    #id_9 {

    float: right !important;

    margin-right: -364px !important;

    margin-top: -331px !important;

    }

    #id_2 {

    float: right !important;

    margin-right: -210px !important;

    margin-top: -196px !important;

    }

     

    Thanks

  • Profile Image

    Answered by dmm_webmaster on December 08, 2012 at 03:36 AM

    Hey Welvin, or anyone who can help!!

    I inserted the css you provided above and it is no where positioned correctly. I have tried for hours today trying to accomplish something that should be a feature of Jotform. I wish I could attach screenshots to replys, but there no option to easily do that.

    Anyway, Could you please take a look again at the form I am working on at https://secure.jotform.us/form/23408736276156 and see what is wrong. FYI, this form a clone of the template called Industial Dark )on my website at https://jotform.us/form/23297220583151) and the input line boxs are way to small and the form is way to tall, so therefore I am trying to widen this template clone so that it will appear completely on the page with no scroll bars. This should be an easy task, but I just cannot figure out how and I am sorry for the trouble, but I really need to get this working as soon as possible.

    As far as your questions to me, As for the first one, I did manage to correct the space issue between the left sided questions vs. the right sided content (like the message box) The space is now correct.

    As for your last question, the "Sub-Label" descriptions directly under my "Text Box" in light gray are very small to see, and I could not find the font type or size in the template for these "Sub-Label"s. What is the font used and size? Can this be adjusted to appear a little bit taller and wider on how?

    Lastly, like I said earlier, I would like the form to be all on the page without the user having to use scrollbar. Can this be done? Or at least the scrollbars be dark enough that you can still see it somewhat yet not be white in color...may also a almost black bar with orange up/down arrows.

    Guys, I am sorry for all the trouble, it's been a learning experience for me, yet I still need help and appreciate it greatly!!

    Look forward to your help!!

    Thanks!!!

    Billy

  • Profile Image
    JotForm Support

    Answered by liyam on December 08, 2012 at 05:23 AM

    Hello Billy.  Can you take a look at this form if this works for you:  http://form.jotformpro.com/form/23418043491955 

    If so, feel free to clone this form by following this user guide.

    If you prefer to use your existing form, feel free to use this CSS code:

    #id_2, #id_8, #id_9 { float: right; margin: 0; }
    #id_2 { width: 200px; }
    #id_8 { padding-top: 6px; }
    #id_9, #id_2 { padding-top: 3px; margin-right: 62px !important; }
    #id_14, #id_4, #id_11, #id_5, #id_10, #id_6 { float: left; width: 280px; padding-right: 0; margin-right: 0;}
    .form-sub-label { font-size: 8px; }

    Please let us know if you have further questions.

    Thanks.

  • Profile Image

    Answered by on December 08, 2012 at 07:56 PM

    Iiyam,

    I took a look at your link and that form is not working right either. Everything is back to being small and the message box and submit&Clear button are not positioned on the right correctly. Message box is not at top right side, it's half way done. Submit & Clear button are really messed up. Sorry

    I then tried replacing the injected css with what you provided and it was even worse. And to make matters worse, it would not let me revert back, so I lost all the days and hours spent trying to get this the way I want it, which should be a very easy task for me, yet it is become a nightmare.

    So I had to delete the clone http://form.jotform.us/jsform/23408736276156 due to not being able to revert back. It had changed everything about the height issues back to being small that I got fixed and layout was messed up and I could not ever get the clone back the way it was looking before I tried your css. Big Time Bummer!

    So, I then recloned my orginal form and tried insert your css that you provided and it was still all screwed up.

    I deleted the clone and I still at a loss as to how to get my contact form to look something like this:

      https://form.jotform.me/form/22741556055453? 

    But with the Industrial Dark template backdground and orange text, black boxes and larger textbox height and font and larger "Sub-Label" fon t(the gray text under the boxes).

    I was wondering if any of you guys can do this for me please.

    It would be greatly appreciated!!

    THANKS!!

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2012 at 08:21 PM

    Hi Billy

    My clone of your original still exists. So, all of your work isn't lost. However, I'll see how best I can reposition the Captcha and "Submit" and "Clear Form" buttons.


    Wayne

  • Profile Image

    Answered by on December 08, 2012 at 10:38 PM

    Hello Wayne,

    Thank you!!!! Look forward to it!

    Billy

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2012 at 11:53 PM

    Billy,

    How's this?


    Wayne

  • Profile Image

    Answered by on December 09, 2012 at 04:43 AM

    Wayne,

    Absouluty perfect!!!!!!! Exactly what I wanted!! You are the man!!! Thank you so VERY much!!

    Question, is this now the clone under My Forms? And all I need to do too use it is  change the embed html on my website to the clone html?

    Also will it have a border around it? If not could that be added in a orange thin line with round corners?

    I would really like that if you could do it.

    Again I cannot thank you enough!!

    Billy

  • Profile Image
    JotForm Support

    Answered by idarktech on December 09, 2012 at 06:39 AM

    Hi Billy,

    In behalf of my colleague, you're welcome!

    The form provided by my colleauge is a cloned version of your form which belongs to his account. To copy it back, simply follow this guide: How to clone an existing form from a URL. After that, you should retake the form code and embed it again to your website.

    --

    Do you mean add an orange border to your contact form like this? If yes, use the following CSS codes and inject it to the form after cloning it.

    .form-all {

    border: 1px solid #E0690D !important;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    }

    Just change the border radius values to your preferred one. Thanks!

  • Profile Image

    Answered by on December 10, 2012 at 01:53 AM

    Hi idarktech,

    The css for the border looks great and the form is now live!

    Again I thank all of you guys for everything!!

    Thanks!!

    Billy

  • Profile Image
    JotForm Support

    Answered by idarktech on December 10, 2012 at 01:59 AM

    On behalf of my team, you are welcome!

    Cheers! =)