联系表格 7 在移动设备上未提交答案

【问题标题】：Contact Form 7 not submitting when on mobile联系表格 7 在移动设备上未提交
【发布时间】：2018-05-26 21:05:26
【问题描述】：

我正在使用联系表格 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"]

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

更新：我发现如果附加了文件，即该字段中有内容，它将起作用。如果该字段为空，它将不起作用。

【问题讨论】：

表格是否可以在没有文件上传字段的移动设备上使用？如果您从头开始编写带有上传的普通表单，它可以在移动设备上使用吗？
是的，如果没有文件上传字段，表格可以在移动设备上使用
注意您指的是哪个“移动设备”非常重要。 IOS 在文件方面存在大量问题。
我目前正在IOS测试

标签： javascript php wordpress mobile contact-form-7

【解决方案1】：

好的，我能够整理出一个 hack。有人建议这样做。

$("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 问题的人。

【讨论】：