Form Styling

  • Profile Image
    mcmil101
    Asked on March 18, 2016 at 12:19 PM

    Hi,

    I am having trouble accomplishing two things with my form:

     

    1) I want the input boxes to line up on both the left and right sides (see picture).

    2) I would like the input box titles to be completely within the input boxes (see picture). I have been able to do this with the titles using hint text, but can not figure out how to do it on things like addresses, where there are multiple input boxes per item. Does that make sense?

     

    Any help would be greatly appreciated. Thanks!

  • Profile Image
    david
    Answered on March 18, 2016 at 01:34 PM

    There was quite a bit of CSS already added to your form so I made several updates to my clone to get things lined up.  This should be pretty close to what you are looking for:

    https://form.jotform.com/60775299528976

    You can clone the form to your own account to have an updated version:

    http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

  • Profile Image
    mcmil101
    Answered on March 18, 2016 at 02:07 PM

    Thank you so much. 

    It doesn't appear that anything has changed, though. The input fields still don't line up on the right, and a lot of the field titles are still below the input fields ( for instance, the "city," "state," and "zip" titles on the addresses).

    Does this make sense? Any ideas? Thanks again!

  • Profile Image
    david
    Answered on March 18, 2016 at 02:36 PM

    Are you looking at your copy or the one I posted.  Here is how the one I posted looks:

    If you would like to remove all the sub labels, you can add this code to your form:

    .form-sub-label{
        display : none;
    }

    The resulting form would look like this:

    https://form.jotform.com/60775299528976

  • Profile Image
    mcmil101
    Answered on March 22, 2016 at 12:32 PM

    Hi, Thanks for your reply. 

     

    I believe I am am looking at your clone (https://form.jotform.com/60775299528976). However, the right alignment is still off (picture attached is a screen shot from that link). Am I looking at the wrong link?

     

    The css you provided to remove sub labels helps. However, there are some input categories with multiple fields, and I want to put the sub labels inside those fields. Does that make sense?  (See attached picture - the labels I would like to add are in red).

     

    Thanks so much!

  • Profile Image
    BJoanna
    Answered on March 22, 2016 at 12:58 PM

    If I understood you correctly you would like to add Hint Example text to all fields of your Address field. To achieve that inside  of your Form Builder select Address field and click on Hint Example option. Then add your hint text for each field. You need to separate text with commas.

    Also I saw that Text Area field is wider then Address field. You can decrease size of Text Area field by changing Columns size onside of Form Builder.

    Here is my demo form: https://form.jotform.com/60814987544972 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    mcmil101
    Answered on March 22, 2016 at 02:28 PM

    Fantastic. Thanks so much!