Several issues with CSS in advanced designer?

cedricbrusselmans

Asked on December 3, 2017 at 6: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

Page URL: https://www.jotform.com/build/73361798477473
Nik_C

Replied on December 3, 2017 at 10:51 AM

You can make your form wider by going to Designer:

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

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.
cedricbrusselmans

Replied on December 4, 2017 at 5: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
aubreybourke

Replied on December 4, 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:

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: