[Resolved] Issues styling forms

[Author]

Posts

[fabriceS]

I have an issue regarding the styling of a form.
1) The colors of the submit button. I'm able to change the text size, the button size, but not the colors and hover colors.
2) I'm also unable to change the "select" field box size. It takes 100% of the cell and I'd like to limit it to some pixels.

Can you help me to change that ? I can't find the right css class to change all of these...

Thanks a lot.

[Noman]

Hi Fabrice,

Thank you for contacting Toolset support. Please share your Debug Information with us so we can see it? I have enabled debug info box for your next reply:
https://toolset.com/faq/provide-debug-information-faster-support/

Can you please share page URL where I can see the issue.

Thank you

[fabriceS]

Hi

Here is the URL's

hidden link

or

hidden link

Best regards

[Noman]

Hi Fabrice,

You can add your custom classes to CRED form fields as i added ‘my_custom_class’ in this shortcode:

[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg my_custom_class' output='bootstrap']

Or you can use existing id/classes to write your own CSS as i applied here.

.cred-form #cred_form_2739_1-select-1-1518706517 {
    width: 200px;
}

.cred-form #cred_form_2739_1-submit-1-1518706517 {
    background: #fff none repeat scroll 0 0;
    color: #000;
}

.cred-form #cred_form_2739_1-submit-1-1518706517:hover {
    background: #000 none repeat scroll 0 0;
    color: #fff;
}

Please add above CSS in your theme style.css or in CRED CSS section and it will look as in attached screenshot.

You can firebug to find field ids/classes as in attached screenshot.

Here is doc for styling forms:
https://toolset.com/documentation/user-guides/styling-cred-forms/

Thank you

[fabriceS]

Hi Noman

I'm very sorry, but it does not change anything when I apply the code you supply.
It's also like the number at the end is changing each time I refresh the page...

[Noman]

Hi Fabrice,

For further debug, provide temporary access WP-Admin Login and FTP login info to your site. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

Thank you

[Noman]

Hello Fabrice,

I have added ‘custom-select-field’ class and updated following select field:

[cred_field field='civilite' post='general_contact_form' value='' urlparam='' select_text='Civilité' class='form-control' output='bootstrap']

With:

[cred_field field='civilite' post='general_contact_form' value='' urlparam='' select_text='Civilité' class='form-control custom-select-field' output='bootstrap']

And added CSS for changing it’s width as follows:

.cred-form .custom-select-field {
    width: 130px;
}

You can use same structure for each field that you want to customize.

Thank you

[fabriceS]

Thank you so much for your help Noma,n !
That light on my lantern 😉

One last question however. What is the way to change the colour of the placeholder in the form ?
For now it's a kind of grey...

Best regards

[Noman]

Hello Fabrice,

Happy to hear that your original issue got resolved. Here is syntax to change placeholder color.

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

For more details:
hidden link

Thank you

[fabriceS]

Hi

I'm very sorry to bother you with my issues, but it seems to be quite difficult to override some css settings.
I can't align the checkbox itself with it's label to be "in the middle", and it's impossible to set the submit button (here "envoyer") to the bottom of my div.

Any idea to help ?

Thanks a lot for you help.

[Noman]

Hello Fabrice,

Please kindly open a new ticket for each issue and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/ You can assign those tickets to me directly if you wish to.

Thank you