javascript - 从 HTML(静态)迁移到 WP 后，联系表单不起作用

Question

预先感谢您的阅读。在联系表单停止工作后，我将静态 HTML 页面转换为 Wordpress。我认为这与 form.js 和 handler.php 中的链接有关。请参阅 handler.php 和 form.js 中的 **。帮帮我 !!! :)

实时版本:050management.nl

表单 HTML

                        <div class="row">
                            <div class="col-md-7">
                                <div class="input-group">
                                    <input type="text" class="form-control" type="text" name="Name" id="name" placeholder="Uw naam..." required data-error="Voer uw naam in">

                                </div>
                            </div>
                        </div>


                      <div class="row">
                            <div class="col-md-7 pt-2">
                                <div class="input-group">
                                    <input type="text" class="form-control" type="email" name="Email" id="email" placeholder="Uw e-mailadres..." required data-error="Voer uw e-mailadres in">

                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 pt-2">
                                <div class="input-group">
                                    <textarea name="Message" id="message" class="form-control" cols="30" rows="5" placeholder="Uw bericht..." data-error="Stel uw vraag"></textarea>

                                </div>
                            </div>
                        </div>
                        <div class="input-group pt-2">
                        <div class="g-recaptcha" data-sitekey="6LddA2oUAAAAAHmFtwEkS68c4_UUi3hGpd7AZyOo"></div>

                        </div>
                        <div class="row">
                            <div class="col-md-9 pt-2">
                                <div class="input-group">
                                    <input type="submit" class="contact-submit" value="Verzenden">
                                </div>
                            </div>
                       </div>

                 </form>
 <div  id="success_message" style="display:none">
  <h4>Dank voor uw bericht.</h4>
  <p>
  We zullen spoedig contact met u opnemen.
  </p>
  </div>
 <div id="error_message"
    style="width:100%; height:100%; display:none; ">
        <h4>Er ging iets mis...</h4>
        <p><a href="mailto:info@050management.nl">Mail </a>ons of <a href="tel:0031502115149">bel </a>ons rechtsreeks. Dank u wel. 
 </div>
 </div>

......

<script src="<?php echo get_template_directory_uri().'/js/form.js' ?>"></script>

form.js(网址:/js/form.js)

 $(function()
 {
function after_form_submitted(data) 
{
    if(data.result == 'success')
    {
        $('form#reused_form').hide();
        $('#success_message').show();
        $('#error_message').hide();
    }
    else
    {
        $('#error_message').append('<ul></ul>');

        jQuery.each(data.errors,function(key,val)
        {
            $('#error_message ul').append('<li>'+key+':'+val+'</li>');
        });
        $('#success_message').hide();
        $('#error_message').show();

        //reverse the response on the button
        $('button[type="button"]', $form).each(function()
        {
            $btn = $(this);
            label = $btn.prop('orig_label');
            if(label)
            {
                $btn.prop('type','submit' ); 
                $btn.text(label);
                $btn.prop('orig_label','');
            }
        });

    }//else
}

$('#reused_form').submit(function(e)
  {
    e.preventDefault();

    $form = $(this);
    //show some response on the button
    $('button[type="submit"]', $form).each(function()
    {
        $btn = $(this);
        $btn.prop('type','button' ); 
        $btn.prop('orig_label',$btn.text());
        $btn.text('Sending ...');
    });


                $.ajax({
            type: "POST",
            **url: 'handler.php',**
            data: $form.serialize(),
            success: after_form_submitted,
            dataType: 'json' 
        });        

  });   
 });

handler.php(url:handler.php)与index.php同一文件夹

 <?php
 ini_set('display_errors', 1);
 ini_set('display_startup_errors', 1);
 error_reporting(E_ALL);

 **require_once '/vendor/autoload.php';**

 use FormGuide\Handlx\FormHandler;


 $pp = new FormHandler(); 

 $validator = $pp->getValidator();
 $validator->fields(['Name','Email'])->areRequired()->maxLength(50);
 $validator->field('Email')->isEmail();
 $validator->field('Message')->maxLength(6000);


 $pp->requireReCaptcha();
 $pp->getReCaptcha()->initSecretKey('REMAINS SECRET :)');


 $pp->sendEmailTo('info@050management.nl'); 

 echo $pp->process($_POST);

Answer 1

在 WordPress 中，事情的处理方式略有不同。

您可以通过 ajax 通过设置正确的操作将数据从客户端发布到服务器。

在 head 标签内或表单处理之前的任何位置指定全局变量 ajaxurl:

<script>
   var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>

当您提交数据时，您可以这样做:

$.post( ajaxurl, {
  action: 'handle_form',
  form_data: $form.serialize()
  }, function(data) {
    // logic after receiving a response
  }, 'json'
);

在服务器端的functions.php中:

function handle_form_ajax_handler() {

    $form_data = $_POST['form_data'];

    // logic with $form_data

    wp_die();

}

add_action('wp_ajax_handle_form', 'handle_form_ajax_handler'); // add action for logged users
add_action( 'wp_ajax_nopriv_handle_form', 'handle_form_ajax_handler' ); // add action for unlogged users