Setting the background color using !important makes editing impossible

Hi @taiswebsites,

Thanks for reaching out and reporting this issue!

A report has been created about this issue to notify our development team about it. I apologize for the inconvenience in the meantime and if I can’t provide an ETA when a fix will be released.

However, I’ll make sure to message you as soon as I have any updates regarding a release that addresses this issue.

In the meantime, if you’d like to update to WPForms Lite 1.8.9.6, you can override the hover styles by making your CSS more specific. Here’s an example:

#wpforms-submit-540:hover {
    background: #aad113 !important;
}

Just replace “540” with your Form ID in this CSS snippet. And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Thanks!

Thank you for the reply.

I have many forms and websites, so it would be impossible to create CSS for each form specifically.
I’ll wait for the update with the correction.

Hi @taiswebsites,

Thanks for letting me know, and I completely understand your situation.

As soon as I have any updates on when a fix will be released, I’ll be sure to let you know.

Thanks!

Hi @taiswebsites,

I wanted to let you know that we are working on resolving the issue with WPForms Lite 1.9.1.

I’ll keep track of this topic and make sure to send you an update as soon as the fix is released.

If you have any questions in the meantime, please feel free to reach out.

Thanks!

Hi, @rsouzaam

I can’t wait for you to fix this small bug. Thank you, and I will continue to wait! Have a nice day.

Hi @taiswebsites,

Thank you for your understanding and patience while we work to fix the issue.

As soon as the new version that resolves the issue is released, I will send you an update.

Thanks, and have a fantastic day!

Hello, @rsouzaam

We haven’t had an update on this issue yet. It’s taking too long, and I need to deliver projects with version rollbacks, which isn’t ideal. Do you have an estimated date for the solution?

Another issue has appeared with JavaScript on all of my clients’ contact forms. I would also like to know if this will be resolved in the current version of the color fix. Attached is a screenshot of the JavaScript error: https://tatitaswebsites.com.br/wp-content/uploads/error-javascript.png

I’m using Elementor Free on the latest version and the WP Forms Widget from ElementsKit Lite Free on the latest version.

Thanks!

Hi @taiswebsites,

We expect to release WPForms Lite 1.9.1 by the first week of October.

If you’d like to fix the issue right now, you can use CSS Variables. Here’s a CSS snippet to help you with that:

:root {
    --wpforms-button-background-color-mycustom: #ff0000;
}

div.wpforms-container-full input[type=submit]:hover, div.wpforms-container-full input[type=submit]:active, div.wpforms-container-full button[type=submit]:hover, div.wpforms-container-full button[type=submit]:active, div.wpforms-container-full .wpforms-page-button:hover, div.wpforms-container-full .wpforms-page-button:active, .wp-core-ui div.wpforms-container-full input[type=submit]:hover, .wp-core-ui div.wpforms-container-full input[type=submit]:active, .wp-core-ui div.wpforms-container-full button[type=submit]:hover, .wp-core-ui div.wpforms-container-full button[type=submit]:active, .wp-core-ui div.wpforms-container-full .wpforms-page-button:hover, .wp-core-ui div.wpforms-container-full .wpforms-page-button:active {
    background-color: var( --wpforms-button-background-color-mycustom ) !important;
}

Then, you can replace #ff0000 with any color of your choice.

Regarding the alert that says, “Please enable JavaScript in your browser to complete this form”, could you please share the URL to the form where you’re experiencing this issue? This will help me provide you with more information.

Additionally, we always recommend using our WPForms widget for Elementor. I’d like to ask you to create a test page using both the WPForms widget from ElementsKit and our WPForms widget. This way, I can check if the JavaScript issue occurs with both widgets.

Thanks!

Hi, @rsouzaam

Thank you for providing a date for the version update.

I have always used the ElementsKit Lite plugin because I use it for multiple things on websites, such as headers, footers, WPForms, and other widgets. I don’t like installing plugins just to use a contact form. I believe that a recent update might have caused this problem.

I have several sites with this issue. Here are some examples:
(When you open the site, the form will display without a JavaScript error. Refresh the page with F5, and the error will appear)
https://morandonagringa.tatitas.com.br/contato/
https://iaut.tatitaswebsites.com.br/fale-com-a-iaut/
https://iterapiasmanipulativas.tatitas.com.br/contato/
https://dallasound.tatitas.com.br/atendimento-dalla-sound/

Thank you!

Hi @taiswebsites,

Thanks for sharing the links!

I checked your forms and noticed that the essential JavaScript files for WPForms aren’t being loaded, as illustrated in our guide here.

For your reference, I created this screencast. As you can see from my local site in the screencast, your sites should load the WPForms assets (screenshot), but this is not happening.

Most of the time, this issue is caused by optimization plugins or JavaScript optimizations through server settings after activating features like:

• Minify
• Combine
• Load Deferred (Asynchronously)

I recommend checking if you’re using an optimization plugin on your sites. Try disabling JavaScript optimizations and see if the issue persists.

If you’re not using an optimization plugin, please check your server settings to see if any optimization settings, like the PageSpeed module, are enabled.

Regarding this: “I don’t like installing plugins just to use a contact form”. Please know that our WPForms widget is available in Elementor when you use WPForms Lite, as described in our guide here.

I hope this helps!

Hi @rsouzaam !

I’m not using any optimization plugins, and my web hosting doesn’t have any either. I don’t use the PageSpeed module. The only active plugins are Elementor, ElementsKit Lite, WPForms Lite, and Qi Addons for Elementor (somethings Premium Addons). It always worked normally until a recent version introduced this issue, and my clients are using different hosting providers.

My theme includes wp_footer(); as mentioned in your guide. Could it be a configuration issue in Elementor? Whenever a JavaScript error appears and I go to Elementor > Tools and regenerate the CSS + Sync the library, the problem disappears.

Hello again @rsouzaam
I found the problem. It’s always a standard for Elementor to use the element caching function; when I disabled this function, the plugin worked perfectly.
Take a look at this video: https://www.awesomescreenshot.com/video/31507985?key=99deaf025cd035856beb7924a8d8a05b
Will I always have to disable this function? It was never necessary before.

Hi @taiswebsites,

Thank you so much for sharing those details!

However, I could not reproduce the issue using Elementor, ElementsKit, and the Elementor caching. For your reference, I created this screencast.

It appears that the issue might be related to the custom themes you’re using on your sites, particularly with the wp_footer() function. This function is crucial because many plugins, including WPForms, rely on it to load necessary assets on your site pages. If this function is missing or not working correctly, it can prevent WPForms assets from loading, leading to the JavaScript error you’re seeing.

From all the details shared so far, it appears that after the update, there was an error affecting your sites to load WPForms assets, and this issue might be related to the wp_footer() function. Regenerating the CSS and syncing the library resolved the issue, but, if you are using Elementor caching, it may be loading a version of the form page that still has the problem.

To address this issue, please check the duration configured with Element Cache Expiration in Elementor by navigating to Elementor ? Settings ? Performance tab. You can use these settings to clear Elementor’s caching. For detailed instructions, refer to the “Clearing your elements’ cache” section in this Elementor guide.

In case the issue continues, I recommend following the steps in WPBeginner’s detailed guide on troubleshooting WordPress. This guide provides a comprehensive approach to identifying and resolving issues that might be affecting your site.

I sincerely apologize for the inconvenience this issue has caused you, and I truly hope the details above can help to solve it.

Thanks!

Well, my Element Cache Expiration was already set to 1 day. My wp_footer() is present and correctly implemented in my theme (I use Hello Elementor). As I mentioned, this issue started after an update. I will create a function to fix the problem on my own. Thanks for your help!

Hi @taiswebsites,

I understand, and I hope your custom function helps address this unfamiliar issue.

We’re currently investigating this issue related to Elementor caching and are working diligently to find the conflict. This will allow us to improve our code to avoid this issue in the future. Your detailed report has been incredibly helpful, and we appreciate it.

Also, I will make sure to send you a message when we release WPForms Lite 1.9.1, which will include a fix for the issue with the !important flag in the background color property.

Thanks!