WelCartのお問い合わせフォームにreCapcha V3を適用させる

たぶんだけど、参考にしたのはこのサイトだったと思う。
https://knowledge.moshimore.jp/entry/recaptcha_introduction/

Welcartのお問い合わせフォームに指定した固定ページには、カスタムページテンプレートのInqury(inquiry.php)が用意されています。

僕が、カスタマイズしたサイトは、テーマは「Welcart Nova」を使用しているたので、「Welcart Nova」の inquiry.phpを元に「inquiry-reCapchaV3.php」というテンプレートファイルを作り、それを当該固定ページのテンプレートに適用させるという方法をとりました。

inquiry-reCapchaV3.phpのコードは以下です。

<?php
/*
Template Name: Inquiry with ReCaptcha V3
 * @package Welcart
 * @subpackage Welcart_Basic
 */

define( 'SITE_KEY', '[サイトキー]' );
define( 'SECLET_KEY', '[シークレットキー]' );
get_header();
?>
<script src="https://www.google.com/recaptcha/api.js?render=<?php echo SITE_KEY;?>"></script>
<script>
grecaptcha.ready(() => {
  grecaptcha.execute(
    '<?php echo SITE_KEY;?>',
    {
      action: 'homepage'
    }
  ).then((token) => {
    var recaptchaResponse = document.getElementById('recaptchaResponse');
    recaptchaResponse.value = token;
  });
});
</script>

<section id="primary" class="site-content">
    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    <div class="content-wrapper">
        <div id="content" role="main">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article class="inqbox">
                <?php the_content(); ?>
                <?php my_usces_the_inquiry_form(); ?>
                <?php edit_post_link(__('Edit this'), '<p>', '</p>'); ?>
            </article>
            <?php endwhile; endif; ?>
        </div>
        <!-- #content -->
        <?php get_sidebar(); ?>
    </div>
    <!-- .content-wrapper --> 
</section>
<!-- #primary -->

<?php get_footer(); ?>




<?php

function my_usces_the_inquiry_form() {
    global $usces;
    $error_message = '';
    if ( isset( $_POST[ 'inq_name' ] ) && !WCUtils::is_blank( $_POST[ 'inq_name' ] ) ) {
        $inq_name = trim( wp_unslash( $_POST[ 'inq_name' ] ) );
    } else {
        $inq_name = '';
        if ( $usces->page == 'deficiency' )
            $error_message .= __( 'Please input your name.', 'usces' ) . "<br />";
    }
    if ( isset( $_POST[ 'inq_mailaddress' ] ) && is_email( trim( wp_unslash( $_POST[ 'inq_mailaddress' ] ) ) ) ) {
        $inq_mailaddress = trim( wp_unslash( $_POST[ 'inq_mailaddress' ] ) );
    } elseif ( isset( $_POST[ 'inq_mailaddress' ] ) && !is_email( trim( wp_unslash( $_POST[ 'inq_mailaddress' ] ) ) ) ) {
        $inq_mailaddress = trim( wp_unslash( $_POST[ 'inq_mailaddress' ] ) );
        if ( $usces->page == 'deficiency' )
            $error_message .= __( 'E-mail address is not correct', 'usces' ) . "<br />";
    } else {
        $inq_mailaddress = '';
        if ( $usces->page == 'deficiency' )
            $error_message .= __( 'Please input your e-mail address.', 'usces' ) . "<br />";
    }
    if ( isset( $_POST[ 'inq_contents' ] ) && !WCUtils::is_blank( $_POST[ 'inq_contents' ] ) ) {
        $inq_contents = trim( wp_unslash( $_POST[ 'inq_contents' ] ) );
    } else {
        $inq_contents = '';
        if ( $usces->page == 'deficiency' )
            $error_message .= __( 'Please input contents.', 'usces' );
    }

    if ( isset( $_POST[ 'recaptchaResponse' ] ) && !empty( $_POST[ 'recaptchaResponse' ] ) ) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $secret = SECLET_KEY;
        $verifyResponse = file_get_contents( $url . '?secret=' . $secret . '&response=' . $_POST[ 'recaptchaResponse' ] );
        $reCAPTCHA = json_decode( $verifyResponse );
        //$reCAPTCHA->success = false;
        if ( $reCAPTCHA->success ) {
            // メール送信処理など

        } else {
            // エラー処理など
            $usces->page = 'inquiry_error';
        }

    }

    if ( $usces->page == 'inquiry_comp' ):
        $inq_message = apply_filters( 'usces_filter_inquiry_message_completion', __( 'I send a reply email to a visitor. I ask in a few minutes to be able to have you refer in there being the fear that e-mail address is different again when the email from this shop does not arrive.', 'usces' ) );
    ?>
<div class="inquiry_comp">
    <?php _e('sending completed','usces') ?>
</div>
<div class="compbox"><?php echo $inq_message; ?></div>
<?php
elseif ( $usces->page == 'inquiry_error' ):
    ?>
<div class="inquiry_comp">
    <?php _e('Failure in sending','usces') ?>
</div>
<?php
else :
    ?>
<?php if( !empty($error_message) ): ?>
<div class="error_message"><?php echo $error_message; ?></div>
<?php endif; ?>
<form id="inquiry_form" name="inquiry_form" action="<?php //echo USCES_CART_URL; ?>" method="post">
    <input type="hidden" name="kakuninyou" />
    <table border="0" cellpadding="0" cellspacing="0" class="inquiry_table">
        <tr>
            <th scope="row"><?php _e('Full name','usces') ?></th>
            <td><input name="inq_name" type="text" class="inquiry_name" value="<?php echo esc_attr($inq_name); ?>" /></td>
        </tr>
        <tr>
            <th scope="row"><?php _e('e-mail adress','usces') ?></th>
            <td><input name="inq_mailaddress" type="text" class="inquiry_mailaddress" value="<?php echo esc_attr($inq_mailaddress); ?>" /></td>
        </tr>
        <tr>
            <th scope="row"><?php _e('contents','usces') ?></th>
            <td><textarea name="inq_contents" class="inquiry_contents"><?php echo esc_attr($inq_contents); ?></textarea></td>
        </tr>
    </table>
    <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
    <div class="send">
        <input name="inquiry_button" type="submit" value="<?php _e('Admit to send it with this information.','usces') ?>" />
    </div>
</form>
<?php
endif;
}


?>

デフォルトのinqury.php では、フォームのコードは、関数 usces_the_inquiry_form() で出力します。

この関数には、フィルターがなかったので、my_usces_the_inquiry_form()という関数を定義して、フォームのHTMLをカスタマイズしています。コードの青文字部分がデフォルトのusces_the_inquiry_form()とmy_usces_the_inquiry_form()との差分です。

赤文字は、nquiry.phpとinquiry-reCapchaV3.phpの(my_usces_the_inquiry_form()を追記を除いた)

差分です。