Custom Javascript & CSS

Hello @rpalex !

I trust you’re doing well today!

Forminator supports only general CSS for the entire form in the Custom CSS section, there’s no option to add the CSS per field, but you can still customise each field regardless.

Let’s take an example of a form with a Text field. It’s best if you can inspect the HTML code so you have a better understanding of how the fields are built (each one is slightly different based on the type).

To inspect the code, please turn on the Preview and then right-click on the form, choose “Inspect” (or similar). A window will pop up with all the HTML code. There will be a “target” button there which will allow you to target elements and focus on their code.

In my case the text field has this code: https://imgur.com/a/QmNMdaL

The important part here is the ID: text-1

So when you add the code to change something you add it like this:

#text-1 input {
  color: red;
}

or

#text-1 label {
color: red;
}

etc.

In your case it will be:

#calculation-1 {
color: red; // all text inside will have red colour
}

Hope this helps!

Kind regards,
Pawel

Thank you for that support.
I tried the same thing, but unfortunately it does not seem to be working. I tried adding that CSS to the calcualtion-1 also but no effect.

Please see the images at this link to see exactly what I did. Something is missing!

View post on imgur.com

Hi @rpalex

Since it is a custom class you would need to use

.calculation-1 input {
color: red; // all text inside will have red colour
}

if the issue persists, would be possible to send the form URL and we can verify the correct CSS?

Best Regards
Patrick Freitas

That worked nicely. Thank you. I was missing the input in that code.
But to push my luck a bit more, if I wanted to change the style of the description field in the field below, what should I add?

<div class="forminator-field forminator-is_filled"><label for="calculation-4-field" class="forminator-label">HALF YEAR</label><input name="calculation-4" value="" id="calculation-4-field" class="forminator-calculation forminator-input" data-formula="{number-1}*150" data-required="" data-decimal-point="." data-precision="2" data-is-hidden="" disabled="disabled" data-decimals="2" data-inputmask="'groupSeparator': '', 'radixPoint': '.', 'digits': '2'" inputmode="text"><span class="forminator-description" aria-describedby="calculation-4-field">Payment Amount</span></div>

I just want to change the color of the description “Payment Amount” to green, JUST FOR THIS FIELD ONLY.

I tried this, but did not work

.calculation-4-field forminator-description {
    color:green;
}

Something is missing!!

Hi @rpalex,

I couldn’t find a unique identifier to help with this from the above code that you have shared. Can you please share the export of the form so that we can help you with this?

You can share the export of the form using Google Drive or DropBox.

Reff: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export

Kind Regards,
Nebu John

Hi Nebu, I am sharing a sample form that I have been using for testing purpose. You can download the file directly from this link.

https://cloud.zeroserver.ca/s/cLABCXL3YnoL3Cw

Thank you.

• This reply was modified 2 years, 9 months ago by rpalex.

Hello @rpalex !

I wasn’t able to access the export due to no permission error, but based on the original code you’ve shared, please try this CSS:

#calculation-4-field .forminator-description {
color: green;
}

Warm regards,
Pawel

Hi Pawel,

I tried that, but unfortunately, that did not work.

Here’s the code from a Google drive. Hope you will be able to get this one.

https://drive.google.com/file/d/1O3VCvQAFPuLHcNXZrQq716l_R1D0W3Y0/view?usp=sharing

Thank you.
Rej

• This reply was modified 2 years, 9 months ago by rpalex.

Hi @rpalex

Can you verify if it is the right code?

The shared code is a script to add unique Ids, while this ticket is about CSS, could you share your Form URL or Exported file?

Best Regards
Patrick Freitas

Hi Pat,

That is indeed the form that I was referring to for this ticket related to custom CSS.

You will see that I have some custom CSS in the Appearance tab.

.calculation input {
color: blue; // all text inside will have red colour
font-weight: 500;
}

.forminator-field input {
    border-radius:10px;
}
.forminator-is_filled {
    color: brown;
}
.calculation input {
    color: orange;
}

The goal is to make the Description for Calculation-4 and calculation-5 appear as GREEN text when it appears on the screen. That’s just an example. But I am trying to understand exactly how to effect a change to one attribute of one particular field, whether it be its description text, its border, the font inside the field etc.

Here’s the link again for the form export.
https://drive.google.com/file/d/1kH3qFasGkZmz3CYcSHBbde2nzS26fbhj/view?usp=sharing

• This reply was modified 2 years, 9 months ago by rpalex.
• This reply was modified 2 years, 9 months ago by rpalex.
• This reply was modified 2 years, 9 months ago by rpalex.

Hi @rpalex

Thank you,

You can use this selector:

#calculation-4 .forminator-description,
#calculation-5 .forminator-description {
color: green !important;
}

https://monosnap.com/file/ZdHlWPJ0ObXsvS0Hi0xSLxqFrzi9KZ

For others:

#calculation-4 label{ }
#calculation-4 input{ }
#calculation-4 .forminator-field.forminator-is_filled{ }

To find the correct ID or class you can use the browser console ( Right button of mouse > inspect ) https://monosnap.com/file/gj8EloMPc7L3iPdHpi8plLd6ieyn61

Best Regards
Patrick Freitas

Finally its working for me as well. The solution was so simple and straight forward, but for some reason it was not doing it for me.

Thank you for you patience in helping me sort this out.