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

    Modify template fonts and form width

    Asked by twphotog on March 26, 2015 at 04:25 PM

    Hello again! I've created a form below (FORM1) that I like the "look" (fonts, form width, spacing,  etc.) of but I can't seem to get that same look on a new form (FORM2) that I created based on a template form. I've spent a ton of time comparing the two forms in the designer view but can't figure out the differences!

    One thing that is driving me batty with the form created from the template is the text box border and tiny fonts!!

    FORM1 - http://form.jotform.us/form/50794419375162

    FORM2 - http://form.jotform.us/form/50845973726164

    Any suggestions?

    Thanks!

    form width template new form
  • Profile Image

    Answered by Ben on March 26, 2015 at 06:10 PM

    I see that the image at the top is not of the same height nor width, so I would recommend changing that which you can do by clicking on the Image field and use the toolbar buttons:

    for height:

    and for width:

    For Form 2 that would be height: 234 and width: 750

    I am looking at the text "ORDER FORM".

    In the Form1 you have used Text from under Form Tools, while you are using Header in the Form2 so that might be one of the issues or that is something that you wanted to be like that.

    If you want to make it as on Form1, just replace the Header with the Text from Form Tools

    The last issue that I believe you mean is the sub-label under the fields.

    To set it up on the second form to match the form 1 you should inject the following CSS to it:

    label.form-sub-label {
        font-size: 0.786em;
        margin-top: 3px;
    }

    You can add this CSS by following this guide: Inject Custom CSS Codes

    I would also like to suggest taking a look at the following guide: How to Change Font Size on Forms

    and this one: The Importance of Form Widths

    Do let us know if I have missed anything and we would be happy to assist :)

  • Profile Image

    Answered by twphotog on March 26, 2015 at 06:27 PM

    Thanks for the info on the css, I believe that worked to enlarge the font at the contact info section of my form.

    Can you tell me how to fix the text boxes so they clearly display the same weight line (thickness) all the way around the box?

    Thanks!

  • Profile Image

    Answered by Ben on March 26, 2015 at 07:37 PM

    I presume that by that you are asking for a CSS like this:

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {
        border: 1px solid #ccc;
        box-shadow: 0 1px 2px #eee inset;
        height: 17px;
    }

    I am seeing that the height was different for 1px and that it was missing the nice border that the CSS above will give you.

    If you meant something else, could you please take a screenshot of the area to better understand what you are after?

    Do let us know how the above CSS works for you.

  • Profile Image

    Answered by twphotog on March 27, 2015 at 12:56 PM

    UPDATE: I BELIEVE THAT YOUR CSS DID WORK AFTER ALL. I RELOADED THE FORM IN BOTH BROWSERS AND IT SEEMS TO DISPLAY CORRECTLY!! I will notify you if there are more problems with it. THANK YOU!

     

    Form to be changed: http://form.jotform.us/form/50845973726164

    Sorry to be such a pest but the css in the last reply doesn't seem to do the trick. Please look at my original form and you'll see how I want the boxes to appear.

    Original form: http://form.jotform.us/form/50764300545147

    The screenshot below shows you what the boxes look like in the form that needs to be changed. Please notice how the weight of the top and left sides of the text box are deep gray while the bottom and the right sides are light gray. I'd like to know how to change the dark gray.

    The screenshot below shows the preview in Mozilla AND in IE.

     

  • Profile Image

    Answered by Ben on March 27, 2015 at 02:20 PM

    Great to hear that and thank you for the update :)

    Often browsers will keep a version of the file they have as long as they can so that the page is rendered faster for you - which would explain why it did not show the change, but then had done so after another refresh.If there are any further issues, do let us know and we would be happy to assist :)