1

estoy trabajando en un proyecto wordpress en el cual me encuentro en una situación en la que quiero implementar un reCaptcha invisible en un formulario de contacto sobre los perfiles de una empresa, aqui les dejo un link para su demostración: https://www.bodacentro.com/item/prueba4/

Lo que trato de hacer es integrar y estructurar muy bien la forma en la que se maneja la información desde que se envia hasta que se recibe, he usado el ejemplo que pone google en su web oficial para implementar reCaptcha, pero en este caso se trata de una manera diferente ya que la información que el reCaptcha envía y recibe debe ser tratada usando jQuery con su función ajax.

aquí esta el código HTML/PHP del formulario actual

<form class="ajax-auth" id="booknowbox" method="post">
  <?php wp_nonce_field('ajax-vendor-send-me', 'security'); ?>
  <div class="form-group">
    <input type="text" class="form-control required" id="name" name="name" placeholder="<?php esc_attr_e('Your Name *','weddlist'); ?>"/>
  </div>
  <div class="form-group">
    <input type="email" class="form-control required" id="email" name="email" placeholder="<?php esc_attr_e('Email Address *','weddlist'); ?>"/>
  </div>

  <div class="form-group">
    <div class="date-picker">
      <input type="text" class="form-control book_date check_book_date" id="date" name="book_date" placeholder="<?php esc_attr_e('Wedding Date','weddlist'); ?>"/>
      <label>
        <i class="fa fa-calendar" aria-hidden="true"></i>
      </label>
    </div>
  </div>
  <div class="form-group">
    <textarea id="details" name="details" placeholder="<?php esc_attr_e('Your Message','weddlist'); ?>" class="form-control"></textarea>
  </div>


  <div id="emplacementRecaptcha"></div>


  <div class="form-group">
    <button type="submit" id="book-now-on" class="g-recaptcha btn btn-pink"><?php esc_html_e('Submit','weddlist'); ?></button>
  </div>
  <div class="status"></div>
  <input type="hidden" id="user_email_id" value="<?php echo esc_attr($item_vendor_email);?>"  />
  <input type="hidden" id="vendorid" value="<?php echo esc_attr($post_author_id);?>"  />
  <input type="hidden" id="post_id" value="<?php echo get_the_ID();?>"  />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>

Posteriormente este formulario envía la información a este otro pedazo de código JavaScript que maneja la petición:

function onSubmitValidateRecaptchaCallback() {
        grecaptcha.render("emplacementRecaptcha",{
            "sitekey": "6LeA_0MbAAAAAEyhe6iN1VCawqmBQ9yD2auBUXY1",
            "badge": "inline",
            "type": "image",
            "size": "invisible",
            "callback": onSubmitValidateRecaptcha
        });
    };

    function onSubmitValidateRecaptcha(token) {
        if (!jQuery("#booknowbox").valid()) return false;

        jQuery('.status', this).show().text(ajax_login_object.loadingmessage);
        action = 'weddlist_ajax_sendme';
        name = jQuery('#booknowbox #name').val();
        phone = jQuery('#booknowbox #phone').val();
        email = jQuery('#booknowbox #email').val();
        date = jQuery('#booknowbox #date').val();
        details = jQuery('#booknowbox #details').val();
        post_id = jQuery('#booknowbox #post_id').val();

        item_title = jQuery('.item_title').text();

        user_email_id = jQuery('#booknowbox #user_email_id').val();
        vendorid = jQuery('#booknowbox #vendorid').val();
        security = jQuery('#booknowbox #security').val();

        var sendme='';
        jQuery('input[name="sendme"]:checked').each(function() {
           sendme=sendme+'--'+this.value;
        }); 
        
        jQuery('.status').html('Loading..... ');


        jQuery.ajax({
            type: 'POST',
            url: ajax_login_object.ajaxurl,
            dataType: "json",
            data: {
                'action': action,
                'name': name,
                'phone': phone,
                'email': email,
                'date': date,
                'details': details,
                'sendme': sendme,
                'item_title':item_title,
                'user_email_id':user_email_id,
                'post_id':post_id,
                'vendorid':vendorid,
                'item_url':window.location.href,                
                'security': security,
                'g-recaptcha-response': token           
            },
            success: function (data) {

                console.log(data);
                if (data) {
                    console.log(typeof data);
                } else {
                    grecaptcha.reset();
                }
                jQuery('.status').show();
                jQuery('.status').html(data);
                jQuery('#booknowbox #name').val('');
                jQuery('#booknowbox #phone').val('');
                jQuery('#booknowbox #email').val('');
                jQuery('#booknowbox #date').val('');            
            },
            error: function () {

                grecaptcha.reset();
            }
        });
    }

    jQuery(window).on("load", () => {
        jQuery('#book-now-on').on('click', function(e){
            e.preventDefault();
            onSubmitValidateRecaptchaCallback();
            grecaptcha.execute();
        }); 
    });

Al final de todo este es capturado por el código del servidor PHP de la siguiente manera.

function weddlist_ajax_sendme()
{
    global $current_user,$weddlist;
    wp_get_current_user();
    
    $allowed_html   =   array();

    $vendorid           =   $_POST['vendorid']; 
    $client_name        =   wp_kses( $_POST['name'] ,$allowed_html) ;
    $client_phone       =   wp_kses( $_POST['phone'] ,$allowed_html) ;
    $client_email       =   wp_kses( $_POST['email'] ,$allowed_html) ;
    $client_wedding_date=   $_POST['date'];
    $client_message     =   wp_kses( $_POST['details'] ,$allowed_html);
    $listing_name       =   get_the_title($_POST['post_id']) ;
    $client_contact     =   $_POST['sendme'];
    $listing_url        =   esc_url($_POST['item_url']);
    $vendor_email       =   $_POST['user_email_id'];

    if (isset($_POST['g-recaptcha-response'])) {
        $secret_key = '<MY_SECRET_KEY>';
        $url = 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_HEADER, false);
        $data = curl_exec($curl);
        curl_close($curl);
        $responseCaptchaData = json_decode($data);
     
        if($responseCaptchaData->success) {
            echo 'Captcha verified';
            //proceed with form values
        } else {
            echo 'Verification failed';
        }
    }





    // Email Subject
    $subject = $weddlist['weddlist_subject_listing_vendor_enquiry'];
    $website_url = site_url();
    $website_name = get_option('blogname');

    $formated_subject = weddlist_sprintf("$subject", array(
        'website_url' => "$website_url",
        'website_name' => "$website_name",
        'listing_name' => "$listing_name",
        'listing_url' => "$listing_url",
        'vendor_email' => "$vendor_email",
    ));
    
    $mail_content = $weddlist['weddlist_content_listing_vendor_enquiry'];
    
    $formated_mail_content = weddlist_sprintf("$mail_content", array(
        'website_url' => "$website_url",
        'website_name' => "$website_name",
        'listing_name' => "$listing_name",
        'listing_url' => "$listing_url",
        'vendor_email' => "$vendor_email",
        'client_name' => "$client_name",
        'client_email' => "$client_email",
        'client_phone' => "$client_phone",
        'client_wedding_date' => "$client_wedding_date",
        'client_contact' => "$client_contact",
        'client_message' => "$client_message",
    ));

    $headers[] = 'Content-Type: text/html; charset=UTF-8';

    weddlist_header_email_append_filter();
    $mail = wp_mail($vendor_email,$formated_subject,$formated_mail_content,$headers);   

    if($mail)
    {
        $on_off_admin_copy = $weddlist['weddlist_listing_vendor_enquiry_admin_copy_enable'];
        if($on_off_admin_copy==1)
        {
            wp_mail(get_option('admin_email'), $formated_subject, $formated_mail_content, $headers);
        }
        echo '<div class="alert alert-success" role="alert"><button aria-label="Close" data-dismiss="alert" class="close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>'.esc_html__('Your request has been successfully sent to vendor.','weddlist').'</div>';    

        $couple_inquiry=get_user_meta( $vendorid, 'couple_inquiry',true) ;
    
        if(!empty($couple_inquiry))
        {
            $final_couple_inquiry=$couple_inquiry+1;
            update_user_meta( $vendorid, 'couple_inquiry', $final_couple_inquiry) ;
        }
        else
        {
            update_user_meta( $vendorid, 'couple_inquiry', 1 ) ;
        }
    }
    else{
        echo '<div class="alert alert-warning" role="alert"><button aria-label="Close" data-dismiss="alert" class="close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>'.esc_html__('Fail, Please try again.','weddlist').'</div>';           
    }    
    die();      
}

El reCaptcha aún no funciona (no se muestra quisier

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.