Adding contact form 7 to manifest


the problem:

i am trying to add contact form 7 scripts and styles to manifest and i got 2 issues:

  1. the default ajax sent form stop working and instead is refresh the page

  2. it is trying to find the ajax-loader gif in sage/images and got 404.

what i have done:

1. i deregister all contact form 7 files:
add_filter( ‘wpcf7_load_js’, ‘__return_false’ );
add_filter( ‘wpcf7_load_css’, ‘__return_false’ );

2. i added the plugin paths to manifest:
“main.js”: {
“files”: [
“vendor”: [
“main”: true
“main.css”: {
“files”: [
“main”: true

  1. for the image issue i tired to copy the image from the the plugin to the sage/assets/images but it did not work.

please help, what am i missing here?


Try to change the image path of the ajax-loader.gif in your sass file.

The default cf7 css is:

div.wpcf7 .ajax-loader {
visibility: hidden;
display: inline-block;
background-image: url(’…/…/images/ajax-loader.gif’);
width: 16px;
height: 16px;
border: none;
padding: 0;
margin: 0 0 0 4px;
vertical-align: middle;

background-image: url(’…/…/images/ajax-loader.gif’); uses two (2) directory level down but sage image directory only needs one (1) directory level down.

Try to override the css to:

div.wpcf7 .ajax-loader {
background-image: url(’…/images/ajax-loader.gif’);

I did not replicate the problem but I think it will solve your issue.

I was trying to get this work as well. See my post

I ended up just manually copying the css files from the contact form 7 plugin folder and adding them into my partial scss files.

I updated the .ajax-loader line to:
background-image: url("/plugins/contact-form-7/images/ajax-loader.gif");

Obviously not ideal but I’m just going to do it this way for now until I get a chance to rebuild my forms without a plugin.