Recaptcha contact form 7 "status: spam" at Vue.js App

Question

I built a small Vue.js app that runs under a subdomain (same main domain as WordPress) and uses the axios package to submit a form to the contact form 7 rest API. Unfortunately I always get only "status: spam" back as a response. I have already set up a recaptcha for the Vue.js app and at the recaptcha of the WordPress on the main page I have also whitelisted the new subdomain.

If I turned off the Recaptcha it works as expected.

const formData = new FormData();
      formData.append('customerName', this.formInput.customerName);
      formData.append('customerEmail', this.formInput.customerEmail);
      formData.append('customerPhonenumber', this.formInput.customerPhonenumber);
      formData.append('date', this.formInput.date);
      formData.append('privacy', this.formInput.privacy);

axios.post('https://MY_DOMAIN/wp-json/contact-form-7/v1/contact-forms/1347/feedback', formData)
        .then((response) => {
          console.log(response);
          this.result.status = response.data.status;
          this.result.message = response.data.message;

          if (response.data.status === 'mail_sent') {
            this.formInput.customerName = '';
            this.formInput.customerEmail = '';
            this.formInput.customerPhonenumber = '';
            this.formInput.date = '';
            this.formInput.privacy = 0;
          }
        });

wandyyd wandyyd · Accepted Answer · 2020-09-09T02:25:43

For those who's seeking for the answer to this particular question (I know it's super late to give an answer).

The reason why it's marked as spam as OP mentioned are,

We're not sending WP Nonce as part of submission as I see on OP code snippet, there's no WP Nonce being included. It's the best practice if you can include WP Nonce as part submission to any Wordpress-end (Rest-API etc), to avoid any issue. See the code below, where Contact Form 7 is also checking for WP Nonce.


    private function spam() {
        $spam = false;

        if ( $this->contact_form->is_true( 'subscribers_only' )
        && current_user_can( 'wpcf7_submit', $this->contact_form->id() ) ) {
            return $spam;
        }

        $user_agent = (string) $this->get_meta( 'user_agent' );

        if ( strlen( $user_agent ) verify_nonce() ) {
            $spam = true;
        }

        if ( $this->is_blacklisted() ) {
            $spam = true;
        }

        return apply_filters( 'wpcf7_spam', $spam );
    }

    private function verify_nonce() {
        if ( ! $this->contact_form->nonce_is_active() ) {
            return true;
        }

        return wpcf7_verify_nonce( $_POST['_wpnonce'] );
    }

Like OP mentioned on the last part, I suspecting that the Contact Form field that OP targeting is having Recaptcha field being included, in that case, we MUST includes Recaptcha response in that particular form - since Contact Form 7 do a check, whether or not there's a Recaptcha field and/or that field is NOT EMPTY. Below is the snippet, which checking for Recaptcha.

    add_filter( 'wpcf7_spam', 'wpcf7_recaptcha_check_with_google', 9 )
    function wpcf7_recaptcha_check_with_google( $spam ) {
        if ( $spam ) {
            return $spam;
        }

        $contact_form = wpcf7_get_current_contact_form();

        if ( ! $contact_form ) {
            return $spam;
        }

        $tags = $contact_form->scan_form_tags( array( 'type' => 'recaptcha' ) );

        if ( empty( $tags ) ) {
            return $spam;
        }

        $recaptcha = WPCF7_RECAPTCHA::get_instance();

        if ( ! $recaptcha->is_active() ) {
            return $spam;
        }

        $response_token = wpcf7_recaptcha_response();
        $spam = ! $recaptcha->verify( $response_token );

        return $spam;
    }

To solve that,

For WP Nonce, we can simply include that when sending the submission
For Recaptcha, we must somehow generate Recaptcha result, on my case, fortunately, I also have Recaptcha field, so I can just simply took that result and pass it on submission.
For future reference, you can check this answer - essentially it's the same like I've mentioned before

Good luck for future guy who encountering this issue! :)

Recaptcha contact form 7 "status: spam" at Vue.js App

1 Answers