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

    Is there any way to change the style of widgets or prefix fields?

    Asked by ExA-SUMMIT on April 07, 2017 at 11:54 AM

    The prefix option before the name field doesn't seem to have options to change the style to match the rest of the form. Is this possible?

     

    Furthermore, the contact number widget also has the same issue.

     

    How can I edit the style of these fields?

  • Profile Image
    JotForm Support

    Answered by Kiran on April 07, 2017 at 01:54 PM

    Please add the following CSS code to the form so the prefix of name field will be displaying as other fields on the form.

    #prefix_24 {

        background : #fafafa none repeat scroll 0 0;

        border : 1px solid #ccc;

        border-radius : 2px;

        box-sizing : border-box;

        font-family : sans-serif;

        font-size : 12px;

        line-height : normal;

        margin : 6px 0 4px;

        padding : 11px;

        width : 100%;

    }

    Now, add the following CSS code to the Custom CSS section of the widget.

    #telephone_input  {

        background : #fafafa none repeat scroll 0 0;

        border : 1px solid #ccc;

        border-radius : 2px;

        box-sizing : border-box;

        font-family : sans-serif;

        line-height : normal;

        margin : 6px 0 4px;

        padding : 20px 40px;

        width : 100%;

    }

    .flag-dropdown.f16 {

        margin-top: 12px;

    }

     

    Fields should be now displayed to match the other fields on the form. Please get back to us if you need any further assistance. We will be happy to help.