• I virtually tried everything in regards to conditionally loading CF7’s CSS directives but to no avail…

    I followed the offical docs and while the JS is removed just fine I can’t seem to remove the inlining of the CSS.

    Tried the WP-CONFIG variant as well as the filters (they don’t even un-register the JS) and ended up with this:

    /*
     * Disable CF7 outputting CSS / JS on all pages
     */
    function remove_cf7_scripts() {
        if (!is_page(686)) {
            wp_deregister_style('contact-form-7');
            wp_deregister_script('contact-form-7');
        }
    }
    add_action('wp_enqueue_scripts', 'remove_cf7_scripts');

    But that won’t remove the CSS being output. I am talking about this passage in the HTML markup:

    <style type="text/css">
      div.wpcf7 .screen-reader-response {
        position: absolute;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        margin: 0;
        padding: 0;
        border: 0;
      }
    
      div.wpcf7 .form-inline img.ajax-loader {
        display: inline;
      }
    
      div.wpcf7 .ajax-loader {
        visibility: hidden;
        display: inline-block;
        background-image: url('https://querstadtein.org/app/plugins/contact-form-7/images/ajax-loader.gif');
        width: 16px;
        height: 16px;
        border: none;
        padding: 0;
        margin: 0 0 0 4px;
        vertical-align: middle;
      }
    
      div.wpcf7 .ajax-loader.is-active {
        visibility: visible;
      }
    
      div.wpcf7 div.ajax-error {
        display: none;
      }
    
      div.wpcf7 .wpcf7-display-none {
        display: none;
      }
    
      div.wpcf7 .placeheld {
        color: #888;
      }
    
      div.wpcf7 .wpcf7-recaptcha iframe {
        margin-bottom: 0;
      }
    
      div.wpcf7 input[type="file"] {
        cursor: pointer;
      }
    
      div.wpcf7 input[type="file"]:disabled {
        cursor: default;
      }
    
      div.wpcf7 .form-inline .form-group {
        max-width: 250px;
      }
    
      div.wpcf7 .input-group-addon img {
        height: 100%;
        width: auto;
        max-width: none !important;
        border-radius: 5px;
      }
    
      div.wpcf7 .input-group-addon.input-group-has-image {
        padding: 0;
      }
    </style>

    How come? Am I missing something? Any ideas?

    Thanks for providing such a great plugin, much appreciated!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    The Contact Form 7 plugin has nothing to do with the embedded HTML. Try switching to the default theme and deactivating all other plugins.

    Thread Starter leanderbraunschweig

    (@leanderbraunschweig)

    Thanks for you response!

    But this clearly is part of CF7’s CSS, see plugins/contact-form-7/includes/css/styles.css – will try to debug further and get back to you.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cannot get rid of CF7’s CSS injects’ is closed to new replies.