Input & text area appearance issue

Hi @wireofhope

I hope you are doing good today.

This issue could be a plugin conflict that is caused by your theme or other plugins and own CSS styles.

Would you please run a conflict test? Please deactivate all plugins except Frominator and check if the problem is gone. If so, then enable all plugins one by one and find which one is having a conflict. If there is no positive result, switch to the default WordPress theme like 2019 and see if it works.

Please make a full site backup or consider to run this test on a staging site.

===============

If this test will give 0 results, please follow the below guide:

Please email us through our secure contact form here https://premium.wpmudev.org/contact/#i-have-a-different-question and make sure that subject is “I have a different question” and:
– ATTN: Kris
– Link back to this thread

Kind Regards,
Kris

Hi @wpmudevsupport13 !

And thanks so much for taking the time to look into this ?? So, I deactivated all of the plugins, no change, but then I went for a default theme and bingo! That’s what it was, the form looks perfect with the 2019 WordPress theme.

Problem is, I don’t want to change my theme. Is there any way around this?

Thank you!!

Hi @wireofhope,

Thanks for following up.

So based on conflict, it seems the culprit is with your current theme. What I would suggest is to verify in your theme options if there are any global styling being enforced that are overriding your Forminator appearance settings. You may also check on your theme documentation for reference. One additional verification is to check with theme support on why the styling may be causing a conflict.

In case you still have no luck, one other alternative would be to adjust the styling of the form using custom CSS and enforce the styling to be changed on the form input and text area. In case you need help with this, let us know the specific styling changes you would like, and we can provide you with some custom CSS.

Best,
Jonathan S

Hi @wpmudev-support9 !

And thanks so much for your time and work ??

i’ve been looking into my theme and realized it is very limited when it comes to the choice of colors. Only 3 settings are showing, and I tried to change them all, with no effect on my form. I reached out to the theme’s support team but I’m not sure I’ll get an answer, so I’d like to know if you could help me with the custom CSS.

I would need to know which codes to use in the CSS to modify the color of the input and text area settings, which are:

– Default: border color, background color, placeholder, text color
– Hover: border color, background color
– Focus: border color, background color
– Error: border color

That would be GREATLY appreciated.
Thank you!

Hi @wireofhope,

Thanks for following up,

Once you can check each of the fields selectors, you will be able to add the different attributes for the colors:

For inputs, each has its own id or class, so you can use a selector such as this one for the email input:

input#forminator-field-email-1

and the remaining:

input#forminator-field-name-1 (This is for first name field)
input#forminator-field-name-2 (This is for last name field)
textarea#forminator-field-textarea-1

For hover, it would be:

input#forminator-field-email-1:hover

For focus, it would be:

input#forminator-field-email-1:focus

and for the error message, use this selector:

span.forminator-error-message

If you like me to provide you with an actual example, here is one to change the email field background and text color:

input#forminator-field-email-1 {
    background-color: gray;
    color: white;
}

You can use your browser developer tools to inspect each of the field’s ID or Class and use this to target them and add styling:https://snipboard.io/SOvDXx.jpg

I noticed there were some colors being shown in checkbox, did you make these changes in appearances? https://snipboard.io/nMILNa.jpg

Also, from a basic step, would it be possible you made appearance changes to input and text area fields, but the changes were not published and perhaps save as draft?

Best,
Jonathan S

@wpmudev-support9

Thank you so much Jonathan for bearing with me!

So, yes, I made a couple of changes yesterday to make sure of what was working and what wasn’t before asking my questions to you. Also I want to reassure you that my settings were indeed published, and not saved only as draft.

Thanks so much for all of the codes, most of them work great, but I still have a couple of questions for you, if you don’t mind ??

1. For the default settings of my fields, I made the CSS work for the background, the text and the border colors, but I still can’t figure out the attribute to change the color of the placeholder. Could you give me the CSS code for it?

2. As for the error message thing, I was actually referring to the “error” tab of the field color settings, where you can pick the color of the border of your field that shows when there’s an error. I couldn’t figure that one out. I tried the code you gave me but it doesn’t work, I’m thinking maybe there was a misunderstanding on that one, sorry if I wasn’t clear enough!

3. Right now if I apply some CSS on the field “email-1”, all of my e-mail-1 fields from all of my different forms on the site are going to be impacted. Is there any way around that? Can I name the email field in my second form “email-2”, for example, to apply a different CSS on that one? Is this possible?

4. And finally, if I were to decide to have the same CSS code for all of my input fields & text areas in the same form or in all of the forms displayed on the site, would there be way to attribute the same CSS to all of them or would I have to create the CSS code for one field at a time like in your example?

Thanks so much for taking the time to explain everything to me, I’m so grateful for your help! I promise that’s all I need and I’ll be out of your hair after that one!!! ??

Hello @wireofhope

1.

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

2.
This is about the border color of the field itself, not of the error message, when there is a validation error. And that would be something like:

.forminator-has_error .forminator-input {
  border-color: #8936af;
}

3.
There is the solution of adding the CSS in Edit form -> Appearance -> Custom CSS. Obviously that would be for the specific form only.
If you want to move CSS somewhere else, you can prepend the following selector, based on the form’s ID. Example with your current form:

#forminator-module-13515 .forminator-has_error .forminator-input {
  border-color: #8936af;
}

4.
I think that #3 above responds to that as well. To conclude:
– for form specific rules, use Custom CSS in Edit form -> Appearance -> Custom CSS
– for global rules, use Appearance -> Customize -> Additional CSS (native WP Customizer)

Warm regards,
Dimitris

Thank you so much @wpmudev-support6 ! I ran some tests and everything looks perfect!

I appreciate you and your amazing team for taking the time to address all of my questions in such a timely fashion. You take care & stay safe!