如何在WordPress的Contact Form 7中将file上传字段设为必填并自定义报错

你当前使用的file*短代码本身已经声明了必填属性，没有生效是因为Contact Form 7默认对文件上传字段的样式渲染、前端校验规则存在限制，按以下步骤调整即可：

1 修改短代码配置 #

将原有短代码替换为下方版本，统一文件类型格式、添加自定义类方便后续样式和脚本控制：
[file* Send-file limit:2000000 filetypes:jpg|jpeg|png id:Send-file class:required-upload-field]

2 添加必填星号与报错样式 #

将以下CSS代码添加到WordPress后台「外观」→「自定义」→「额外CSS」中：

/* 字段旁显示必填星号 */
.wpcf7-form-control-wrap.Send-file::after {
    content: "*";
    color: #d63638;
    margin-left: 4px;
    font-weight: bold;
}
/* 调整下方报错提示的显示样式 */
.wpcf7 .wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 0.9em;
    margin-top: 6px;
    display: block;
}

3 自定义验证气泡文本与强制校验 #

将以下JS代码添加到主题的自定义脚本区域，或通过脚本插入插件添加到网站页脚：

document.addEventListener('DOMContentLoaded', function() {
    const uploadField = document.getElementById('Send-file');
    if (!uploadField) return;

    // 修改默认必填气泡提示文本
    uploadField.addEventListener('invalid', function(e) {
        if (this.validity.valueMissing) {
            e.target.setCustomValidity('Fältet är obligatoriskt');
        } else {
            e.target.setCustomValidity('');
        }
    });

    // 选择文件后重置提示
    uploadField.addEventListener('change', function() {
        this.setCustomValidity('');
    });

    // 提交时强制触发校验，避免Contact Form 7异步提交跳过验证
    document.querySelector('.wpcf7-form').addEventListener('submit', function(e) {
        if (!uploadField.files.length) {
            e.preventDefault();
            uploadField.reportValidity();
        }
    });
});

4 校验功能确认 #

进入WordPress后台「Contact」→「设置」页面，确认没有开启「禁用前端验证」的相关选项，如果使用了其他表单增强插件，需要排除插件对文件字段校验规则的覆盖。

内容的提问来源于stack exchange，提问作者Eyahya Khan