Title: Trying to use CSS on code Last modified: April 29, 2024 --- # Trying to use CSS on code * Resolved [moreden21](https://wordpress.org/support/users/moreden21/) * (@moreden21) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/) * Hello! I trying to customize my form but I don’t want to use the Custom CSS inside each form to do so, I want to create a customize CSS for every Form that later I can create, is this possible? Because I couldn’t figure it out yet, I tried overriding the style inside the Theme CSS but some things only work if you use the specific form ID and that’s not the solution I’m looking for. Thanks for the help! - This topic was modified 2 years, 1 month ago by [moreden21](https://wordpress.org/support/users/moreden21/). Viewing 8 replies - 1 through 8 (of 8 total) * Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/) * (@wpmudev-support8) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720349) * Hi [@moreden21](https://wordpress.org/support/users/moreden21/) * I hope you’re doing fine today! * Yes, it is possible in most cases but may require use of some specific/precise CSS selectors. * It’s a bit difficult to say what exactly that would be without checking the form and the CSS itself so would you mind * 1. sharing link(s) to page(s) with form(s) in question? 2. and sharing example CSS that doesn’t work for you 3. along with description of what/how it should be changing on the form(s)? * Kind regards, Adam * Thread Starter [moreden21](https://wordpress.org/support/users/moreden21/) * (@moreden21) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720404) * Hi Adam [@wpmudev-support8](https://wordpress.org/support/users/wpmudev-support8/), * Thanks for the reply, actually I can’t provide any link because it’s a local project so I’m actually testing this kind of things for some internship Anyway, so the thing is that I want to be able to change the general style for every form that I can make for example:– This is the basic look of a Custom Form with pagination: [https://imgur.com/i7QyUO3](https://imgur.com/i7QyUO3)– This is what I have made until now “overriding” the forminator style with my theme custom CSS: [https://imgur.com/UAhrW3A](https://imgur.com/UAhrW3A)– And here are some examples of the coding I made to do this things:[https://imgur.com/yqgW73r](https://imgur.com/yqgW73r), [https://imgur.com/0MpN27v](https://imgur.com/0MpN27v)This, as you can see, actually works but it only works for Form-Module-51 (and just with Plain Style specifically), if I create a new one as the ID (or basic style) changes it won’t work because ID won’t match.If you can help me to solve this or have any idea of how to do it I’ll be very grateful. * Thanks in advance! * Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/) * (@wpmudev-support8) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720545) * Hi [@moreden21](https://wordpress.org/support/users/moreden21/) * Thanks for response! * You don’t need to use this part of selector (unless you actually want to apply CSS to specific form): * `.forminator-ui#forminator-module-51.forminator-design-flat` * The f_orminator-module-X_ (where X is a number) limits it to specific form and the _forminator-design-flat_ class limits it to the “Flat” appearance/design style only. * So instead, you can use * `.forminator-ui .forminator-pagination-steps .forminator-step .forminator-step- label` * or just * `.forminator-pagination-steps .forminator-step .forminator-step-label` * and it should work for all the forms (any other form-related CSS should also be modified accordingly) * Have you tried that already? * Kind regards, Adam * Thread Starter [moreden21](https://wordpress.org/support/users/moreden21/) * (@moreden21) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720576) * Thanks for the fast reply, * So I tried this before and that’s why I ended up trying with the ID to see if the Theme CSS overrides Form CSS because I thought it wasn’t doing it. And if you change the code for something like this [https://imgur.com/HaJUVPT](https://imgur.com/HaJUVPT), [https://imgur.com/kmH1g7O](https://imgur.com/kmH1g7O)And the result is this: [https://imgur.com/6EWaMfq](https://imgur.com/6EWaMfq)It loses all the style that was working before (in this case the black underline on hover and button styling), that’s the actual problem, on my point of view it should work but I don’t know if there is other way to maybe replace the code that generates the CSS form every form or just overriding it with the Theme it should workThanks in advance, Adam. - This reply was modified 2 years, 1 month ago by [moreden21](https://wordpress.org/support/users/moreden21/). * Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/) * (@wpmudev-support8) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720609) * Hi [@moreden21](https://wordpress.org/support/users/moreden21/) * Thank you for response! * It’s a bit difficult to diagnose this without being able to check actual page with the form but based on your screenshots I noticed two things: * 1. On this screenshot * > [View post on imgur.com](https://imgur.com/kmH1g7O) * you are using nested selectors with amperstand (parent selector). This wouldn’t usually be parsed correctly by browser as it’s a thing/structure specific to SASS so, basically, needs to be passed through the SASS compiler (may it be “ on the fly” solution built-in into theme or a tool that compiles CSS and outputs its result into a CSS file); Forminator does not support that. * 2. Also, you may need to use “!important” property in some cases. What I mean is something like this: * `margin:10px!important;` * That’s not really an “elegant” solution and usually I wouldn’t recommend it as it would not be then easy/possible to override later with another CSS but in some cases it it necessary with Forminator forms. * Note though: I gave example related to margin but you’d need to inspect form elements first to make sure about which custom CSS rules are and which are not applied – and then only use taht for those that are not reflected on front-end. * Best regards, Adam * Thread Starter [moreden21](https://wordpress.org/support/users/moreden21/) * (@moreden21) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17720631) * Hi!, * Apologies on my examples, I had a mistake there, this is the correct example: [https://imgur.com/fI7itM6](https://imgur.com/fI7itM6) * So what you mentioned about the SASS compiler, the theme that I’m using has it so before when I compile the last instructions I show you where I used the specific form ID this worked when I compile the editing on the theme code, also I noticed that sometimes the !important tag worked but again, only when I specific form ID. I understand this question is kinda specific and unclear but if there is a different solution rather than overriding it like this, it works for me.Thanks again! - This reply was modified 2 years, 1 month ago by [Yui](https://wordpress.org/support/users/fierevere/). - This reply was modified 2 years, 1 month ago by [moreden21](https://wordpress.org/support/users/moreden21/). - This reply was modified 2 years, 1 month ago by [moreden21](https://wordpress.org/support/users/moreden21/). * Plugin Support [Laura – WPMU DEV Support](https://wordpress.org/support/users/wpmudev-support8/) * (@wpmudev-support8) * [2 years, 1 month ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17723584) * Hi [@moreden21](https://wordpress.org/support/users/moreden21/) * Thanks for response! * If you do have SASS compiler with theme, that part should be fine so I think we can rule it out. * As for “important” tag, that actually may be necessary in some cases due to how form’s CSS works, being kinda “forced” – either with already existing “important” tags there (we are clearing that out gradually but there are “leftovers”) or by being modified via JS. * Yet, it should still be working fine even without form-specific selectors unless there already is some other custom CSS code that overrides it or your custom CSS is loaded “too early”. I mean, if there’s e.g. “clash” of rules the order in which they are specified would be related. * But all in all, yes – it is quite difficult to say more without being able to check the form/page in question to see what happens there (inspect elements/CSS and track down rules that are actually applied instead of your custom ones). * I understand that this is a local project but perhaps you’d be able to set some sort of staging/dev site which we could check? It doesn’t have to be all the same as your local one for as long as it has such a form and CSS added so we could see the issue happening there. * Would that be possible? * Best regards, Adam * Plugin Support [Nebu John – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport14/) * (@wpmudevsupport14) * [2 years ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17743062) * Hi [@moreden21](https://wordpress.org/support/users/moreden21/), * As we haven’t received any updates from you recently, I’ll proceed to mark this thread as resolved. However, if you have any further questions or require additional assistance, please don’t hesitate to contact us anytime! * Kind Regards, Nebu John Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Trying to use CSS on code’ is closed to new replies. * ![](https://ps.w.org/forminator/assets/icon-256x256.gif?rev=3443182) * [Forminator Forms – Contact Form, Payment Form & Custom Form Builder](https://wordpress.org/plugins/forminator/) * [Frequently Asked Questions](https://wordpress.org/plugins/forminator/#faq) * [Support Threads](https://wordpress.org/support/plugin/forminator/) * [Active Topics](https://wordpress.org/support/plugin/forminator/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/forminator/unresolved/) * [Reviews](https://wordpress.org/support/plugin/forminator/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [form](https://wordpress.org/support/topic-tag/form/) * [style](https://wordpress.org/support/topic-tag/style/) * [styling](https://wordpress.org/support/topic-tag/styling/) * 9 replies * 3 participants * Last reply from: [Nebu John – WPMU DEV Support](https://wordpress.org/support/users/wpmudevsupport14/) * Last activity: [2 years ago](https://wordpress.org/support/topic/trying-to-use-css-on-code/#post-17743062) * Status: resolved