WordPress表单如何添加验证码

---

首先创建生成随机数字：

function generate_verification_code($length = 6) {
    $characters = '0123456789';
    $verification_code = '';
    for ($i = 0; $i < $length; $i++) {
        $verification_code .= $characters[rand(0, strlen($characters) - 1)];
    }
    return $verification_code;
}

创建随机数字的图片： 注意： 本地的话要开启php的gd库的支持，在php.ini里面将extension=gd前面的逗号取消

function generate_verification_image($verification_code) {
    $image = imagecreatetruecolor(200, 75);
    $bg_color = imagecolorallocate($image, 255, 255, 255);
    $text_color = imagecolorallocate($image, 0, 0, 0);
    imagefill($image, 0, 0, $bg_color);

    // Use a font that's available on your system
    $font_size = 30;
    
    $font_path = get_template_directory() . '/css/webfonts/fa-brands-400.ttf';

    imagettftext($image, $font_size, 0, 10, 50, $text_color, $font_path, $verification_code);

    // Get the uploads directory information
    $upload_dir_info = wp_upload_dir();
    $image_path = $upload_dir_info['basedir'] . '/' . uniqid() . '.png'; // Adjust the path

    imagepng($image, $image_path);
    imagedestroy($image);

    $image_url = str_replace($upload_dir_info['basedir'], $upload_dir_info['baseurl'], $image_path);
    return $image_url; // Return the URL of the generated image
}

在form里面执行函数：

function custom_contact_form_shortcode() {
    ob_start(); // Start output buffering
    $verification_code = generate_verification_code();

    // Generate the verification code image
$verification_image_url = generate_verification_image($verification_code);
    ?>
    <form action="#" method="post" class="wpcf7-form init" name="Inquiry">
        
        
        <input type="hidden" id="generated-code" value="<script>document.write(verificationCode)</script>">

        <p> <span class="wpcf7-form-control-wrap your-name">
            <input type="text" name="contacts" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name" placeholder="Your Name (required)">
            </span> </p>

        <p> <span class="wpcf7-form-control-wrap your-phone">
            <input type="tel" name="mobile" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" id="your-phone" placeholder="Your Phone">
            </span> </p>
        <p> <span class="wpcf7-form-control-wrap your-email">
            <input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" id="your-email" placeholder="Your Email (required)">
            </span> </p>
        <p> <span class="wpcf7-form-control-wrap your-message">
            <textarea name="content" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" id="your-message" placeholder="Please fill in the details"></textarea>
            </span> </p>

             <label for="user_verification_code">Enter the Verification Code:</label>
    <img src="<?php echo $verification_image_url; ?>" alt="Verification Code">
    <input type="hidden" name="actual_verification_code" value="<?php echo $verification_code; ?>">
    <input type="text" name="user_verification_code" required>
    <br>
    <br>


        <p class="btn-submit">
            <input type="submit" value="Submit" class="wpcf7-form-control wpcf7-submit" name="button">
        </p>

       
    </form>
    <?php

    return ob_get_clean(); // Return the buffered content
}
add_shortcode('tr_contact_form', 'custom_contact_form_shortcode');

这样form里面就会生成随机数字的图片。 <input type=”text” name=”user_verification_code” required> 这里输入随机数字，在php后端进行验证：

 $actual_verification_code = $data->get_param('actual_verification_code');
    $user_verification_code = $data->get_param('user_verification_code');

    if ($actual_verification_code === $user_verification_code) {
        // Verification code is valid, process the form
        $table_name = $wpdb->prefix . 'message_form_data';
    $title = sanitize_text_field( $data['title'] );
    $contacts = sanitize_text_field( $data['contacts'] );
    $mobile = sanitize_text_field( $data['mobile'] );
    $email = sanitize_email( $data['email'] );
    $content = sanitize_textarea_field( $data['content'] );

    $wpdb->insert(
        $table_name,
        array(
            'id' => $title,
            'name' => $contacts,
            'phone' => $mobile,
            'email' => $email,
            'details' => $content,

        )
    );

我这里form是通过rest api提交的，自定义路由，然后通过路由的callback 函数执行数据库的操作。

验证php gd库是否开启

if (extension_loaded('gd') && function_exists('imagecreatetruecolor')) {
    echo "GD is enabled";
} else {
    echo "GD is not enabled";
}

---