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

  • Profile Image
    jpehrler
    Asked 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

  • Profile Image
    Aury
    Answered 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
    jpehrler
    Answered 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
    Sammy
    Answered 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
    jpehrler
    Answered on May 14, 2015 at 09:12 PM

    Awesome, but can we even up the top fields?

     

  • Profile Image
    Boris
    Answered 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.