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 do I align the Heading Text with the rest of my form?

    Asked by AFreshApproach on January 31, 2015 at 02:45 AM

    Here is the form I am working on:

    http://www.theultima.com/events.html

    The "Sign up for Our Events" does not line up with the "Choose Event" Text.

    Here is my injected Custom CSS:

    .form-line, .form-label-left {
    padding-left: 0;
    }
    .form-html {padding: 0px !important;}
    .form-header {padding-left: 0px !important;}
    .form-dropdown {font-size: 1em !important;}
    .form-dropdown {
    font-family: Verdana !important;}
    .form-textbox {font-family: 'Verdana';font-weight: normal !important;font-size: 12px;color: black;}
    /* Change the color of input boxes */
    .form-textbox, .form-textarea, .form-radio-other-input, .form-captcha input, select {
    border: 1px solid black !important;
    }/* For sub-labels under the text boxes */
    .form-sub-label {
    color: black;
    font-size: 12px !important;
    }

    Thanks for your help.

     

    Page URL:
    http://www.theultima.com/events.html

    heading textarea size label textbox CSS
  • Profile Image

    Answered by Ben on January 31, 2015 at 05:39 AM

    To set the header to fall to the left you would need to add this CSS code:

    .form-header {
        margin: 0;
    }

    If you would also like to make the background transparent instead of white, please add this CSS as well:

    body, html, form.jotform-form, div.form-all {
        background: none transparent !important;
    }

    You can inject the CSS code following these steps: Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by AFreshApproach on February 02, 2015 at 04:07 PM

    Thanks but unfortunately the .form-header CSS did not work.  Does it matter where you add it in the Inject Custom CSS?

    Thanks for the transparency CSS.

  • Profile Image

    Answered by Ben on February 02, 2015 at 04:18 PM

    I always suggest adding the CSS code at the very bottom since last code in there is the one that the browser will use (as it overwrites the same code that were declared before it).

    Can you please try this CSS code?

    .form-header-group {
        margin-left: 0;
    }

    Do let us know if it works.

  • Profile Image

    Answered by AFreshApproach on February 02, 2015 at 04:50 PM

    Thanks for your help! Placing at the end totally worked.

  • Profile Image

    Answered by Ben on February 02, 2015 at 05:04 PM

    You are welcome and I am glad to hear that it worked for you :)

    Do let us know if you have any further questions or issues and we would be happy to assist with them :)