Adding contact form 7 to manifest

sage
,
1

Hi,

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”: [
“scripts/offcanvas.js”,
“scripts/main.js”
],
“vendor”: [
"…/…/plugins/contact-form-7/includes/js/jquery.form.min.js",
"…/…/plugins/contact-form-7/includes/js/scripts.js"
],
“main”: true
},
“main.css”: {
“files”: [
“styles/main.scss”
],
“vendor”:[
"…/…/plugins/contact-form-7/includes/css/styles.css",
"…/…/plugins/contact-form-7/includes/css/styles-rtl.css"
],
“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?

thanks,
daniel

2

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.

3

I was trying to get this work as well. See my post
https://discourse.roots.io/t/css-files-not-compiling/14890

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.