Modify template fonts and form width

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!

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 :)

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!

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.

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.

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 :)