Several issues with CSS in advanced designer?

  • Profile Image
    cedricbrusselmans
    Asked on December 03, 2017 at 06:45 AM
    Hello,
     
    I am facing several issues with the form Cadac Group BIM Price Calculator
     
    - The form needs to be wider at 650px and at the same time, the text boxes, dropdown boxes, SUBMIT button and lines should all be centered and of the same width at 550px 
     
    (I have been trying to do this for the last 2 hours in the regular designer, then the CSS in the regular designer, then the advanced CSS, etc. but am unable to do so - help please :))
     
    - We need to have all the dividing lines color in #91004b (not in white!) so our users will not see those lines when using the form
     
    (I have also been trying to do this for the last 2+ hours in the regular designer, then the CSS in the regular designer, then the advanced CSS, etc. but am unable to do so - help please :))
     
    - reCAPTCHA: I also need to have it with the background of the form i.e. #91004b. Do you know which CSS I should inject and especially in which CSS editor - in the regular designer or the advanced designer?
     
    - SUBMIT button seems to be still in 'Muli' whereas it should be 'Futura' (it has already been injected in the CSS but it doesn't seem to be reflected)
     
    - All texts inside the text boxes and dropdown boxes should be in color #91004b - unfortunately it still seems to be in other colors  
     
    Could you help solve these please?
     
    Thanks

  • Profile Image
    Nik_C
    Answered on December 03, 2017 at 10:51 AM

    You can make your form wider by going to Designer:

    1512313681Screen Shot 2017-12-03 at 4.12

    Regarding the fields and 550px width, could something like this work: 

    1512315137Screen Shot 2017-12-03 at 4.37

    If so, please use this CSS and paste it into the Custom CSS Field:

    label#label_input_50 {

        margin-left: 50px;

    }

    #input_58 {

      margin-left: 50px;

    }

    input#input_48 {

        margin-left: 50px;

    }

    input#input_101 {

        margin-left: 50px;

    }

    input#input_98 {

        margin-left: 50px;

    }

    input#input_49 {

        margin-left: 50px;

    }

    .form-dropdown {

        margin-left: 50px;

    }

    .form-single-column {

        margin-left: 50px;

    }

    button#input_8 {

        margin-left: 50px;

    }

    input#input_57 {

        margin-left: 50px;

    }

    Regarding the line color, I'm still checking this.I'll get back to you.

    When it comes to Google ReCaptcha, as far as I know, it is not possible to override the CSS of the Google Recaptcha field since the Google's iFrame is loading inside of the iframe of the captcha.

     SUBMIT button seems to be still in 'Muli' whereas it should be 'Futura' (it has already been injected in the CSS but it doesn't seem to be reflected)

    This one I didn't understand, could you please clarify?

    Regarding the text in the drop-down, you can try with this CSS:

    .form-dropdown {

        color: #91004b!important;

    }

    .form-textbox {

     color: #91004b!important;

    }

    But not sure if it will work, because of the theme used. The selected text will be in that color though.

    You can check my test form as well: https://form.jotform.com/73363922251959

    Hope it helps.


  • Profile Image
    cedricbrusselmans
    Answered on December 04, 2017 at 05:50 AM

    Hello Nik,


    Thank you for the CSS code to get the right width for all the components: it works. I come back on the other pending items:


    - Question 1:

    May I ask you if you have found the solution to change the dividing lines color to #91004b?


    - Question 2:

    The font of "SUBMIT" (English version) in the button at the bottom of the form should be 'Futura' and still seems to be in 'Muli' - how can it be fixed? 


    Thanks

  • Profile Image
    aubreybourke
    Answered on December 04, 2017 at 10:40 AM

    1. Yes you can change the colour of the lines by opening the properties (gear icon) for the line.

    For example:

    1512400971Microsoft Edge 04_12_2017 15_2


    2. Futura is a paid font. Did you purchase it already? If you must use this font then please see this guide for importing your font:

    How to Use Google Fonts in your Form

    Or you can see which default fonts JotForm supports in the Form Designer on the styles tab.

    For example:

    1512401812Microsoft Edge 04_12_2017 15_3