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

    Configurable List widget - Adjusting the column width and changing the color of the add button

    Asked by Benflips on July 17, 2016 at 03:08 AM

    Can you please expand the column width of the input 412 config list to show all of the hint text?

    Also, is it possible to change the background colour of the 'add' button in the config lists - perhaps to the transparent purple and green I've used elsewhere on the form?

    Page URL:
    https://www.jotform.com//?formID=43420990799871#design

    config list expand column width hint configurable list
  • Profile Image
    JotForm Support

    Answered by Jan on July 17, 2016 at 06:39 AM

    Please give me more time to create a custom CSS for your request. I'll let you know once I have the solution. Thank you for understanding.

  • Profile Image
    JotForm Support

    Answered by Jan on July 17, 2016 at 07:52 AM

    This is the CSS code for increasing the width of the column in the Configurable List widget.

    .col1 input[type=text] {
    width: 160px !important;
    }
    .col2 input[type=text] {
    width: 160px !important;
    }
    .col3 input[type=text] {
    width: 160px !important;
    }

    This is to change the color of the add button.

    .add {
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding -box;
    background-color: rgba(84, 33, 197, 0.39);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(84, 33, 197, 0.39)), to(rgba(65, 26, 153, 0.39)));
    background: -webkit-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -moz-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -ms-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    background: -o-linear-gradient(top, rgba(84, 33, 197, 0.39), rgba(65, 26, 153, 0.39));
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.2);
    color: #aaeb0f;
    }

    Please insert this CSS codes in the custom CSS tab inside the widget.

    Here's the result:

    Hope that helps. Thank you.

  • Profile Image

    Answered by Benflips on July 17, 2016 at 06:45 PM
    Done. Thank you. It looks great
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...