Ricci Fothergill asked 4 weeks ago
Hi experts!
I have one form field (text entry) which I need to look different to the others (needs to look like a UK vehicle number place). I can style the text entry box in the settings but it applies to all the fields whereas I only need it on the one.
I tried to create a separate form with just that entry, which worked, but when I embed that one into the main form, it loses its styling and looks like the standard text entry boxes.
Can I apply a style to one form text entry only? Or embed the single text box form with it's styling and override the main form style?
Many thanks
Victor Font Staff answered 4 weeks ago
If you use your browser's inspection tool, find the field id for the field you are targeting. The field id is a combination of the word "field" plus "_" plus the field key. It looks something like this: "field_myfieldkey". Create custom CSS targeting that field key and place the style in the before fields area of the form's customize html settings page.
Ricci Fothergill
replied 4 weeks ago Sorry, you lost me a bit there! I have the field key from Inspect, and this is the style/code I'd like to apply (taken from https://codepen.io/OshJones/pen/zYOBGxj) to the text field..where on the form do I paste this code? Thanks 🙂
HTML
GB
CSS
.codepen-wrapper {
width: 25%;
margin: 50px 37.5%;
}
.registration-ui {
background: linear-gradient(to bottom, #f8d038 0%,#f5ca2e 100%);
padding: .25em 1em .25em 1.75em;
font-weight: bold;
font-size: 2em;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 1px 1px 1px #ddd;
position: relative;
font-family: helvetica, ariel, sans-serif;
text-transform: uppercase;
}
.unit:after {
content: '';
display: block;
position: absolute;
top: 7px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 30px;
border: 1px dashed #f8d038;
}
.input-box { position: relative; }
input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; }
.unit {
content: 'GB';
font-family: helvetica, ariel, sans-serif;
font-weight: bold;
display: block;
width: 30px;
height: 100%;
font-size:1em;
background: #063298;
position: absolute;
top: 0;
border-radius: 5px 0 0 5px;
color: #f8d038;
line-height: 85px;
padding-left: 5px;
}
Ricci Fothergill
replied 4 weeks ago I've copied the css code exactly as per the test site to the global settings/css section. Copied the html code exactly as per the website in custom html on the form itself, but the form field looks nothing like on the test site.
Am I doing something wrong? 🙁
Ricci - you can't just apply CSS that you found somewhere and expect it to work for your situation. The CSS selectors in your sample code won't apply to your situation, regardless of whether the style does. I suggest you either read up on how CSS works (you can start here https://www.w3schools.com/cssref/css_selectors.php though there's a lot more to it than that). Alternatively, you can hire a developer https://formidable-masterminds.com/developers-directory/ or you can find a design person who knows about CSS.
Ricci Fothergill
replied 3 weeks ago Thank you, I figured it out in the end 😊. As suggested, grabbed the field name from Inspect and added custom css in global settings. My browser wasn’t refreshing the settings properly until I added the important! string to each line of css code, then it worked perfectly
The CSS !important modifier is derived from the first letter of CSS, which stands for Cascading. Cascading refers to a LIFO (Last In, First Out) principle, indicating that the most recently loaded style sheet takes precedence in the browser. The !important modifier modifies the priority of CSS code execution.
If your CSS code requires the !important modifier for proper functioning, it suggests an underlying issue. This could indicate that you have named classes with identical names to those loaded later on your website. These classes may be Formidable’s or part of your theme’s style sheet. The excessive use of the !important modifier may have unintended consequences elsewhere.
The !important modifier should be employed sparingly for specific tasks. It is not intended to modify a large portion of CSS simultaneously. WordPress and Formidable provide tools that enable you to adjust the load priority of style sheets.
Please login or Register to submit your answer
Rob LeVine