How to customize the Sleek Theme

  • Profile Image
    artel
    Asked on July 18, 2018 at 01: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

    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

  • Profile Image
    EltonCris
    Answered on July 18, 2018 at 04: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:

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

    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


  • Profile Image
    artel
    Answered on July 20, 2018 at 05:26 AM

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

  • Profile Image
    artel
    Answered on July 20, 2018 at 05:35 AM

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

  • Profile Image
    ashwin_d
    Answered on July 20, 2018 at 09: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.

  • Profile Image
    artel
    Answered on August 04, 2018 at 06: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.

  • Profile Image
    ashwin_d
    Answered on August 04, 2018 at 09: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.