Custom Jotform CSS Styling Request

  • dylanwest2010
    Asked on June 23, 2017 at 10:20 PM

    Hello,

    I am considering upgrading to an annual plan before the end of the month. However, before I can do that I need to know if Jotform can provide a bit of custom CSS to one of my forms.

    I have three requests which I require before I can commit to an annual plan:

    1. I would like my 'Upload Image/Choose File' button to resemble the screenshot that I have attached. Basically, I would like to style the label above "Upload Image" to act and work as a button. I would like the height of the button to be equal to the height of each label.

    2. I would like all text that is inputted into each form to be indented (as seen in the 'Describe your work' label). Currently, besides the Describe your work label, all user entered text is not indented like the sublabel.

    3. Currently, there is a blue glow around each label when text is inputted into a label. I would like to remove this effect and offer no glow effect around the label.

    If you can provide these style edits to the Jotform, I will gladly upgrade to an annual plan.

    Thank you,

    Dylan

    Jotform Thread 1182410 Screenshot
    Page URL: https://www.pixelempire.com/pages/start-selling-with-us
  • BJoanna
    Replied on June 24, 2017 at 3:15 AM

    To be able to style upload button, you will first need to set Multiple Files option to YES inside of Upload Field setting and you can change Button Text to "Upload Image".

    Custom Jotform CSS Styling Request Image 1 Screenshot 30

    After that add this CSS code to your form:

    #cid_20 div.qq-upload-button {

        width : 150px;

        height : 23px;

        color : black!important;

        background-color : #fff!important;

        padding : 5px!important;

    }

    #label_20 {

       display:none;

    }

    How to Inject Custom CSS Codes

    After that File Upload field will look like this.

    Custom Jotform CSS Styling Request Image 2 Screenshot 41

    I have moved your other questions to separate threads and we will provide you an answers there shortly: 

    https://www.jotform.com/answers/1182481 

    https://www.jotform.com/answers/1182482