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

    Bring "What's Up" box to right of other Fields and Change Text Color

    Asked by jpehrler on May 14, 2015 at 10:01 AM

    I would like to bring the "What's Up" field to the right of the other fields, in order to have a more compact form.

    Additionally, as you can see by the form on the page, some of the labels cannot be read because they are gray and somewhat match the background image.  How can the field color be manipulated?  I tried to inject custom CSS I found in search, but to no avail.

     

    Thanks in advance!

     

    Preston Ehrler

    Page URL:
    http://prestonehrler.com/#contact

    right background image Inject Custom CSS custom CSS move textarea
  • Profile Image
    JotForm Support

    Answered by Aury on May 14, 2015 at 12:20 PM

    I am sorry for the inconvenience this situation is causing you.

    I have gone ahead and cloned your contact form, in the following link:

    http://form.jotformpro.com/form/51335316019953

    Feel free to clone this form, please read this guide that will show you how to do it:

    http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    The changes I made are the following:

    Original CSS Code:

    .form-textarea {
        order : 1px solid #b7bbbd;
        -webkit-border-radius : 5px;
        -moz-border-radius : 5px;
        border-radius : 5px;
        width : 345px;
        height : 150px;
        font-size : 1rem;}

    In regards of the font color I added the following CSS:

    .form-label.form-label-left {
        color : white;
    }

    .form-sub-label {
        color : white;
    }

    I hope this helps to solve the issue.

     

  • Profile Image

    Answered by jpehrler on May 14, 2015 at 02:14 PM

    Uh, now it's a big white blob, instead of a transparent background.  Additionally, the field at the bottom entitled "What's Up" should be move up and to the right of all the other fields, therefore making the whole form shorter.

     

    http://prestonehrler.com/#contact

     

  • Profile Image

    Answered by Sammy on May 14, 2015 at 03:08 PM

    Thesre are the changes i made to yout textarea CSS

    .form-textarea {
        order : 1px solid #b7bbbd;
        -webkit-border-radius : 5px;
        -moz-border-radius : 5px;
        border-radius : 5px;
        width : 500px;
        height : 250px;
        font-size : 1rem;
        position : absolute;
        top : -520px;
        left : 400px;
    }

    For the label positioning

    #label_5 {
        width : 100px;
        position : absolute;
        top : -540px;
        left : 400px;
    }

    You can get a cloned copy here http://form.jotformpro.com/form/51335320052945

    Hop this addresses you issue

  • Profile Image

    Answered by jpehrler on May 14, 2015 at 09:12 PM

    Awesome, but can we even up the top fields?

     

  • Profile Image
    JotForm Support

    Answered by Boris on May 15, 2015 at 05:31 AM

    Hello Preston.

    Please take a look at the following form to see if this is what you wanted to have lined up:

    http://form.jotformpro.com/form/51342395715961

    If you like what you are seeing, you can clone it to take a closer look at how it was done.

    The full custom CSS that is in the textbox of the CSS tab is:

    .supernova { background-color: transparent !important; }.form-label-top {
        font-size : 14px;
    }

    #input_3, .form-textbox {
        width : 333px !important;
        height : 55px !important;
        font-size : 1rem !important;
    }

    .form-all input,select {
        border : 1px solid #b7bbbd;
        -webkit-border-radius : 5px;
        -moz-border-radius : 5px;
        border-radius : 5px;
        padding : 4px;
        width : 100px;
    }

    .form-textarea {
        border : 1px solid #b7bbbd;
        -webkit-border-radius : 5px;
        -moz-border-radius : 5px;
        border-radius : 5px;
        width : 600px;
        height : 250px;
        font-size : 1rem;
    }

    .form-all {
        margin-left : -12px !important;
    }

    #id_2.form-line {
        margin-left : 4px !important;
    }

    #id_13.form-line {
        margin-left : 2px !important;
    }

    label.form-label, label {
        text-shadow : 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
    }

    #id_5 {
        position : absolute;
        left : 400px;
        margin-top : -490px;
    }

    Please try it out to see if this is what you are asking for.