How to customize the Sleek Theme

  • artel
    Asked on July 18, 2018 at 1:40 AM

    Hi there

    Could you please help me with some questions?

    1. I would like to make the supporting test below the formular non-italiac. How could I do that?153189143120180727   Help field formular Screenshot 10

    2. I would like the entry area (where now are the two d's in) for the whole form in less thick frame and quadrangular (not rounded down). Can you also give hints how I can customize the color of the frame?

    3. I have a subscription for jotform, but in my form there is still advertising for jotform (below the send-button and in the confirmation page, after sending). Can you delete this advertising and show me how I can do it for future forms?

    4. I connected my dropbox account. For legal purposes I need to ensure that no form entry data and uploaded files are saved anywhere else than on dropbox - particularly NOT on servers jotform is using. Can you confirm that?

    5. We plan to create another form with many and possibly heavy upload files. Filling out this form will take a lot of time, so that it is an imperative that the form does not crash, while sending. Also that form will be connected for legal purposes to a dropbox account.

    What is the maximum amount of data (number of uploaded files, total amount of data in MB, when each files is max. 30 MB big) for which you guarantee stable and reliable processing?

    Thanks a lot & best

  • Elton Support Team Lead
    Replied on July 18, 2018 at 4:59 AM

    I can see that you are using the Sleek Theme for your form. If you want to customize it, you will have to inject custom CSS codes to your form.

    The following CSS codes would adjust it according to your 1 & 2 descriptions.

    Get the CSS codes here https://pastebin.com/raw/L0iJJVhh 

    Result:

    How to customize the Sleek Theme Image 1 Screenshot 30

    To change the colors, you'll see hex color codes (ex: #f2de79) in the CSS codes. Change them to the colors you want.

    How to customize the Sleek Theme Image 2 Screenshot 41

    You can get hex colors here http://www.color-hex.com/

    We will answer your other questions to a separate thread shortly.

    3. https://www.jotform.com/answers/1527700

    4. https://www.jotform.com/answers/1527702

    5. https://www.jotform.com/answers/1527703


  • artel
    Replied on July 20, 2018 at 5:26 AM

    Thanks Chris for the great explanation! Point 1 worked well.

  • artel
    Replied on July 20, 2018 at 5:35 AM

    For point 2 quadrangular also worked well. Which part of the code would determine the frame thickness of the entry field?

  • Ashwin JotForm Support
    Replied on July 20, 2018 at 9:48 AM

    I believe its the highlighted part in the following custom css code:

    .form-textbox, .form-textarea, .form-radio-other-input, .form-upload, .form-captcha input {

        box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #f2f2f2, 0px 0px 0px 4px #e6e6e6;

        -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #f2f2f2, 0px 0px 0px 4px #e6e6e6;

        -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.45), 0px 0px 0px 3px #f2f2f2, 0px 0px 0px 4px #e6e6e6;

            border-radius: 0 !important;

    }

    Hope this helps.

    Do get back to us if you have any questions.

  • artel
    Replied on August 4, 2018 at 6:06 AM

    Thanks Ashwin. Hmm, probably it is me, but I couldn't manage any desired effect, when I reduced the numbers from 4 to 2 and now put them back to 4 again.

    Another question: given we find the perfect design for how the boxes frames and shadows should look like: how you reccommend us to find somebody to translate this into CSS for jotform?

    Many thanks.

  • Ashwin JotForm Support
    Replied on August 4, 2018 at 9:18 AM

    Well that depends on what exactly you want to achieve. When you say "given we find the perfect design" will it be a webpage URL which you can show us? 

    Do get back to us when you find a perfect design and we will try to help you. 

    We will wait for your response.