如何用Contact Form 7和Popup Maker实现WordPress带对应图片信息的弹窗联系表单

1. 配置Contact Form 7表单结构 #

先调整你的CF7表单，添加预设主题字段和图片信息存储字段（用隐藏字段避免用户修改）：

<label> 您的邮箱 (必填)
    [email* your-email] </label>

<label> 您的问题 (必填)
    [textarea* your-message] </label>

<!-- 预设主题，设为隐藏不可修改 -->
[hidden your-subject "预设主题内容"]

<!-- 存储图片名称/编号的隐藏字段 -->
[hidden image-info]

[submit "提交"]

若需要让用户看到图片信息，可将[hidden image-info]替换为[text image-info readonly]。

2. 给“更多信息”按钮添加自定义属性 #

给文章内每张图片下方的弹窗触发按钮，添加data-image-name属性，传入对应图片的名称或编号：

<button class="popup-maker-trigger" data-popup-id="你的弹窗ID" data-image-name="图片A-001">更多信息</button>

• 替换你的弹窗ID为Popup Maker中创建的弹窗实际ID
• 如果通过自定义字段/循环批量生成图片和按钮，用PHP动态输出属性值示例：

<?php 
// 以ACF重复字段为例
if( have_rows('图片集合') ): 
    while( have_rows('图片集合') ): the_row(); 
        $img_name = get_sub_field('图片编号');
?>
        <img src="<?php echo get_sub_field('图片')['url']; ?>" alt="">
        <button class="popup-maker-trigger" data-popup-id="123" data-image-name="<?php echo esc_attr($img_name); ?>">更多信息</button>
    <?php endwhile; 
endif;
?>

3. 添加JavaScript实现自动填充 #

在主题的functions.php中添加以下代码（或通过自定义HTML插件插入到页面底部），监听按钮点击事件，把图片信息填充到CF7字段：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带图片信息的弹窗触发按钮
    const infoButtons = document.querySelectorAll('.popup-maker-trigger[data-image-name]');
    
    infoButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetImageName = this.getAttribute('data-image-name');
            // 找到CF7的图片信息字段（ID格式：wpcf7-字段名）
            const imageField = document.querySelector('#wpcf7-image-info');
            if (imageField) {
                imageField.value = targetImageName;
            }
        });
    });
});

• 确保#wpcf7-image-info与你CF7表单中image-info字段的ID对应（CF7自动生成的字段ID规则为wpcf7-字段名）

4. 测试验证 #

1. 点击不同图片下的“更多信息”按钮，打开弹窗后检查CF7表单的隐藏字段是否已填充对应图片名称/编号
2. 提交表单，在WordPress后台的CF7提交记录中确认图片信息已正常提交

内容的提问来源于stack exchange，提问作者Artūrs Kalugs