Contact Form 7 在手机上不提交

Question

我正在使用 Contact Form 7。我发现如果我使用文件上传输入并且在移动设备上，该表单将不会提交。这是表单代码。

[text* full-name placeholder "Full Name"]
[email* your-email placeholder "Email"]
[tel* phone placeholder "Phone Number"]
<div class="input-wrapper">
[text* city class:input-city placeholder "City"]<span class="styled-select">[select* state class:input-state include_blank data:us_subdivisions.states]</span>
</div>
<div class="upload-wrapper">
[file applicants-resume id:fileuploadfield class:fileuploadfield filetypes:pdf|doc|docx id:applicants-resume][text uploadtextfield id:uploadtextfield class:uploadtextfield placeholder "Resume(PDF,Doc)"]<input type="button" id="uploadbrowsebutton" value="Browse">
</div>
[hidden position-id id:position-id "Position ID"]
[submit "Submit"]

我一直在网上搜索，发现其他人也有这个问题，但目前还没有解决办法。任何帮助深表感谢。

更新：我发现如果有附加文件它会起作用，即该字段中有一些东西。如果该字段为空，它将不起作用。

Answer 1

好的，我能够整理出一个 hack。 1 人提出此建议。

$("input[type=file]").each(function() {
   if($(this).val() === "") {
     $(this).remove();
   }
  });

https://wordpress.org/support/topic/when-typefile-is-set-in-contact-form-7-it-does-not-work-with-safari-ver-11-1/

我不得不修改那个方法。当用户尝试提交无效表单时，我必须添加代码。这是我想出的：

$('body').on('click', '.wpcf7-submit', function(e){

        $("input[type=file]").each(function() {
           if($(this).val() === "") {
             $(this).remove();
           }
        });

    });

document.addEventListener( 'wpcf7invalid', function( event ) {

        if ( 'XXXX' == event.detail.contactFormId ) {

            if( $(".fileuploadfield").parents(".applicants-resume").length == 1 ) {
                // we have a file
            } else {
                $('.applicants-resume').append('<input type="file" name="applicants-resume" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required fileuploadfield" id="fileuploadfield" accept=".pdf,.doc,.docx" aria-required="true" aria-invalid="false">');
            }

        }

    }, false );

代码的第一部分删除文件输入，如果它是空的。这允许 Safari IOS 提交表单。

接下来，我使用 Contact Form 7 的事件处理程序 wpcf7invalid 检查表单是否有错误。

如果有错误，我会检查文件输入是否存在或是否已删除。如果它被删除，我将其添加回表单，以便用户可以在下一次连续尝试时上传文件。

XXXX 代表表单 ID。

我希望这可以帮助其他在移动设备上使用文件输入遇到 Contact Form 7 问题的人。

Contact Form 7 在手机上不提交

Contact Form 7 not submitting when on mobile

javascript

php

wordpress

mobile

contact-form-7