CSS styling never loaded because of error in console

  • Resolved Ronaldt

    (@neejoh)


    1 year, 7 months ago

    On our website we have a dropdown select box, but when you open it the background is transparent which makes the text not readable.

    It does not help when I change the settings of the form and switch from the default styling to custom styling to set a background color, this is never applied to the frontend.

    In the console I get an error 500, when I open that URL I indeed get the Internal Server error:

    ...../wp-content/uploads/forminator/1078_c936b7441a0xxxxxxb981c9df913fe6/css/style-1078.css?ver=1681830955 net::ERR_ABORTED 500

    When I download that file from the server over FTP (I checked file and folder permissions too) there is nothing weird I could find.

    But; When I remove the style-1078.css file via FTP and manually set a background color for the dropdown / select elements (see this image) the file is recreated but malformatted (no opening curly brace, instead a comma):

    #forminator-module-1078.forminator-design--flat .forminator-input-with-icon:hover [class*="forminator-icon-"],
	color: #777771;
}

#forminator-module-1078.forminator-design--flat .forminator-is_active .forminator-input-with-icon [class*="forminator-icon-"],
	color: #777771;
}

#forminator-module-1078.forminator-design--flat .forminator-is_active .forminator-input-with-icon [class*="forminator-icon-"],
	border-color: #17A8E3;
}

    That is not valid CSS in my book, but also in a completely different place than what I’ve added (background settings). When I “fix” the CSS it still does not work and save the file. The browser will never notice it, since that is besides of the problem that the actual style-1078.css file returns an error 500.

    It happens on two different forms, it is not isolated to just this form.

    Normal PHP errors show up on screen, this however does not. Any pointers on how to debug this?

    Thanks,
    Ronald

    • This topic was modified 1 year, 7 months ago by Ronaldt. Reason: Removed a couple tabs from the CSS code for better readability
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @neejoh

    I hope you’re well today and thank you for reporting the issue.

    The CSS that you are showing is, indeed, malformed and shouldn’t be like that. I’m not yet sure why it’s getting corrupted like this, though. I tried to replicate this on my test site multiple times (with existing forms and forms created from scratch) but I wasn’t able too.

    I did find a reference to similar issue in the past in our internal tickets and it was directly related to specific setup, with both WooCommerce and Enfold theme active at once (most likely older versions since it was quite a long ago).

    I’d say then this is either also specific to this site or it’s a bug that happens in particular configurations and we didn’t identify it yet.

    Let us know, please:

    – was it happening with older versions of Forminator as well (only started with recent update) or you didn’t use any previous version?

    – are you using Enfold theme and WooComemrce plugin on site and if yes – does temporarily disabling them help?

    – if you are not using above, did you try to perform full conflict test or, at least, check if the same happens if you use just default theme (like Twenty Twenty Three) and no other plugins than Forminator?

    Best regards,
    Adam

    Thread Starter Ronaldt

    (@neejoh)

    It is a website build with The7 theme (ThemeForest) with Elementor as page builder. I’ve tested switching themes and even falling back to a non-page builder page with a plain shortcode, but the problem stays.

    I’ve downloaded the website to my local development environment, there isn’t a problem there. So it must be the fact that the stylesheet can’t be reached because of the error 500 on the live-server.

    I’ll do some more digging on the server to see if I can find some more info there!
    Will keep you updated.

    Thread Starter Ronaldt

    (@neejoh)

    The problem is that ExecCGI is disabled on our live environment (running CloudLinux), the error is: /wp-content/uploads/forminator/.htaccess: Option ExecCGI not allowed here

    In that .htaccess it states:

    <Files *>
  SetHandler none
  SetHandler default-handler
  Options -ExecCGI
  Options -Indexes
  RemoveHandler .cgi .php .php3 .php4 .php5 .phtml .pl .py .pyc .pyo
</Files>

    Is the option Options -ExecCGI added recently by any chance?
    I can confirm that when I comment (# Options -ExecCGI) that line, the error 500 is no longer there and the styling is loaded correctly.

    Thread Starter Ronaldt

    (@neejoh)

    I’ve had some discussions with our server managers and we’ve come to the conclusion that you can’t expect a host to have ExecCGI enabled. We’re running DirectAdmin and because we’re hosting quite a lot of websites on there (300+) we take security very serious. And due to security reasons we don’t have CGI enabled by default.

    @wpmudev-support8 can you explain why the option is used? Can it maybe first check if it is available on the server before it is added to the .htaccess

    We have clients run their own website but do often recommend Forminator as a plugin to them. If we have to manually change the generated .htaccess for every website that is not manageable.

    Plugin Support Nebu John – WPMU DEV Support

    (@wpmudevsupport14)

    Hi @neejoh,

    We’ve already identified the issue you reported as a bug in Forminator and have reported it to the development team. They’re working on a fix, and we’ll update you here as soon as we have more information.

    I am extremely sorry about the inconvenience caused by this.

    Kind Regards,
    Nebu John

    Hi, I have the same issue, but commenting out this line Options -ExecCGI in ../wp-content/uploads/forminator/.htaccess didn’t solve the issue. @neejoh could you please be more specific, what solved the case?
    Or @wpmudevsupport14 @wpmudev-support8 any information furthermore?

    Thank you!

    Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    HI @zsoltadam

    As per this forum guideline please start a separate ticket of your own and we’ll assist you there.

    Best regards,
    Adam

    I have the same problem as Ronaldt. I have forminator version 1.24.1 installed and we didn’t have this problem before last update.

    If i comment Options -ExecCGI line in .htaccess file of forminator folder then css will load and form works as expected but this is a security issue and we cannot let ExecCGI.

    Any update?

    Plugin Support Williams – WPMU DEV Support

    (@wpmudev-support8)

    Hi @binyaz

    Formiantor Team is working on the fix for this to be included in future releases. It should be one of near upcoming releases but we do not have ETA.

    Kind regards,
    Adam

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @neejoh,

    Unfortunately, a fix hasn’t been released yet. I can confirm our developers are already aware and we’ll be looking at remedying the issue asap. While we cannot provide a specific timeline yet for the fix, you can get updates on our progress by subscribing to our roadmap at?https://wpmudev.com/roadmap/.

    Once new versions are released, any pertinent changes will be described in the changelog, which you can find at:
    https://www.ads-software.com/plugins/forminator/#developers

    Seeing that this issue has been acknowledged and is being addressed, we’re marking this as resolved for now. However, if you have any queries, or information you could share regarding the issues then please don’t hesitate to ask. Thank you for your understanding.

    Best Regards,

    Nithin

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS styling never loaded because of error in console’ is closed to new replies.