It seems that the latest Safari has an issue blocking form submission with file uploading fields left blank.
https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
Until Apple fixes the issue, you can
- use non-Ajax submission as the issue is only seen in Ajax submission,
- remove file uploading fields from the contact form, or
- suggest users use another browser.
Thank you very much for the help.
Just removing the File Uploading fields will fix the issue or I have to still make the changes on the Ajax submission?
Thanks,
The issue is only seen with a contact form with file uploading fields, so you just need to remove file uploading fields.
Please report this to Apple – the more bug reports, the sooner the fix.
https://www.apple.com/feedback/safari.html
A little late, but this is how I solved it:
// If file upload field is empty: remove. Otherwise it will not submit in Safari 11.1.1
jQuery(".wpcf7-submit").on('click', function(){
//alert("Clicked");
jQuery("input[type=file]").each(function() {
if(jQuery(this).val() === "") {
//alert(jQuery(this).attr("name"));
jQuery(this).prop('disabled', true);
}
});
})
The reason cf7 dom related (document.addEventListener( ‘wpcf7submit’, function( event )) does not work is it fires after ajax submission. You need to do your work before ajax submission. I used the above function in when dom ready. Use this when you absolutely need file input.
-
This reply was modified 5 years, 8 months ago by
mc2prod.
This alternative option is a really quick and easy fix. Simply add the following to your wp-config.php file (the comment line is optional). I add it fairly near the top after the intro comment in that file. The form works a treat even with the file upload feature.
// ** Turn off JS for Contact Form 7 ** //
define('WPCF7_LOAD_JS', false);
@mc2prod where should I write that code?
When using in child theme’s functions.php I get an error message: “Only variables can be passed by reference”
@noez_design
This code goes into any custom javascript file or you can load it in your child themes footer via <script></script> tags but not in the functions.php
jQuery( document ).ready(function() {
// If file upload field is empty: remove. Otherwise it will not submit in Safari 11.1.1
jQuery(".wpcf7-submit").on('click', function(){
//alert("Clicked");
jQuery("input[type=file]").each(function() {
if(jQuery(this).val() === "") {
//alert(jQuery(this).attr("name"));
jQuery(this).prop('disabled', true);
}
});
})
});
@mc2prod Thanks!
I’m aware that this is for IOS/Safari only. Just in case, I was testing in Android/Chrome and I’m not making it work. I put the code into theme properties code boxes in child. They are just for “Space before </head>” or “Space before </body>”. Neither of them worked.
Would be great if @takayukister could solve it because it seems this is a general issue. I hope he will (I’m gratefull for the plugin).
In the meanwhile, for the sake of testing, in my case, file button needs to be “required”. When filling the form, I can attach any permitted file but the send action wouldn’t work. But if I try to send the form whithout attaching any file then it works fine and shows the error message advising user to fill in that field.
Anybody can give any hint to handle this?
I agree, would be great to have something that fixes this in the coming update @takayukister, if you have the time and will 🙂
Amazing plugin otherwise! I use it since three years and since a year we did put a warning.
It’s on our apply page of the website http://www.criticalconcrete.com
Thanks!!!
In the end, the attach button works fine in Firefox for Android and IOS Safary. This is fine enought in our case, and we added a notice visible only in smartphones (CSS fix) advising users to make it throught Firefox in case of experimenting the problem.
It seems to me that the problem is more related with Smartphone browsers than with @takayukister plugin.
I also have problem with contact 7 form in safari.I can’t give inputs to the form fields.How to fix this?it is working fine with other browsers.
I actually found the “real” problem why contact form 7 isn’t submitting correctly. I removed the Google Recaptcha v3 integration and it started to work in safari.
I came up with this idea because my console gave me the following error:
The source list for Content Security Policy directive ‘script-src’ contains an invalid source: ”strict-dynamic”. It will be ignored.
Hopefully this will help you out.
Thanks.
And please fix this @takayukister
I’m also facing the issue (in the latest plugin version) with the Recaptcha v3 not showing on Safari and the following console error:
The source list for Content Security Policy directive ‘script-src’ contains an invalid source: ”strict-dynamic”. It will be ignored.
What is the fix @takayukister ??
Thanks.
