WordPress 表单中添加图像选择功能可以显著提高用户参与度，特别是对于调查、投票或需要视觉选择的场景。以下是实现这一功能的方法：

方法 1：使用插件（推荐）

最简单的方法是使用支持图像选择的表单插件，如Contact Form 7配合扩展或Gravity Forms。

Contact Form 7 + 图像选择扩展

  1. 安装并激活 Contact Form 7 插件
  2. 安装 "Contact Form 7 Image Select" 扩展插件
  3. 在表单编辑器中使用类似以下的短代码：
[image-select your-image-select "Option 1|/path/to/image1.jpg" "Option 2|/path/to/image2.jpg"]

方法 2：自定义代码实现

如果需要更多控制权，可以通过自定义代码实现： 
<?php
/*
 * 模板名称：带图像选择的表单
 */

get_header();

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['image_choice'])) {
    $selected_image = sanitize_text_field($_POST['image_choice']);
    
    // 这里添加处理选中值的代码，如保存到数据库或发送邮件
    $success_message = "你选择了: " . $selected_image;
}
?>

<div class="container">
    <h1><?php the_title(); ?></h1>
    
    <?php if (isset($success_message)) : ?>
        <div class="notice notice-success">
            <?php echo $success_message; ?>
        </div>
    <?php endif; ?>
    
    <form method="post" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
        <div class="image-selector">
            <?php
            // 图像选项数组 - 可根据需要修改
            $image_options = [
                'option1' => [
                    'label' => '选项 1',
                    'image' => get_template_directory_uri() . '/images/option1.jpg'
                ],
                'option2' => [
                    'label' => '选项 2',
                    'image' => get_template_directory_uri() . '/images/option2.jpg'
                ],
                'option3' => [
                    'label' => '选项 3',
                    'image' => get_template_directory_uri() . '/images/option3.jpg'
                ]
            ];
            
            // 输出图像选择项
            foreach ($image_options as $value => $option) :
            ?>
                <div class="image-option">
                    <label>
                        <input type="radio" name="image_choice" value="<?php echo esc_attr($value); ?>" 
                               required>
                        <img src="<?php echo esc_url($option['image']); ?>" 
                             alt="<?php echo esc_attr($option['label']); ?>"
                             class="select-image">
                        <span><?php echo esc_html($option['label']); ?></span>
                    </label>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div class="form-submit">
            <input type="submit" value="提交选择" class="button-primary">
        </div>
    </form>
</div>

<style>
.image-selector {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.image-option {
    text-align: center;
    max-width: 200px;
}

.image-option input[type="radio"] {
    display: none;
}

.image-option input[type="radio"]:checked + img {
    border: 3px solid #007cba;
    box-shadow: 0 0 10px rgba(0, 124, 186, 0.5);
}

.select-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.image-option span {
    display: block;
    margin-top: 10px;
}

.form-submit {
    margin-top: 20px;
}
</style>

<?php get_footer(); ?>