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

    Making visual tweaks to a specific field on form

    Asked by deecox on August 03, 2016 at 03:54 PM

    formID=62153723101341

     

    In the attached screenshot of a form which is still very much work in progress please could you tell me how to apply the following attributes to the output field #input_15 only, under the heading Result! and showing £82.39 -

    Remove border

    Centre

    Increase font size

    Embold

     

    Also how can I remove the extra space below the horizontal line and above "Step 1".

     

    Many thanks

    Dee Cox

    Screenshot
    form field attributes style size heading font size
  • Profile Image
    JotForm Support

    Answered by Boris on August 03, 2016 at 04:44 PM

    We can achieve your requirements by applying a bit of custom CSS to your form, such as this one:

    #input_15 {
        height: 1em;
        border: none;
        font-size: 3em;
        text-align: center;
    }

    This is how your form would display with the above CSS:

    You can add the above code into your form by following this guide:

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

    When it comes to reducing the blank space between "Step 1" and the horizontal line, I see that you have entered two paragraphs (clicked on Enter/Return key twice), so it has two lines of space separating them instead of one.

    To fix this, please click on the Edit HTML button of this field, click inside the empty space, and press the Backspace keyboard key to remove one of the two paragraphs:

    Please try it out and let us know should any further tweaks be needed. Cheers