Контактная форма, которая не обновляет страницу при отправке при использовании Wordpress

Question

Я настроил следующий код для создания контактной формы, которая не обновляет страницу при отправке.

HTML:

<form method="POST" id="contact-form">
  <div class="contact-element flex-row">
    <input class="" type="text" name="name" placeholder="Name" id="name" Required>
    <input class="" type="text" name="email" placeholder="Email Address" id="email" Required>
  </div>
  <input class="" type="text" name="subject" placeholder="Subject" id="subject" Required>
  <textarea type="text" name="message" rows="5" placeholder="Message" id="message" Required></textarea>
  <input class="contact-submit" id="submit" name="submit" type="submit" value="Submit">
    <input type="hidden" name="action" value="form-action">
</form>

Запрос JavaScript / AJAX:

$("#contact-form").submit(function(event) {
  event.preventDefault();
  var $form = $( this ),
      url = "<?php echo get_template_directory_uri(); ?>/library/contact-form.php";
  var posting = $.post( url, {
    name: $('#name').val(),
    email: $('#email').val(),
    subject: $('#subject').val(),
    message: $('#message').val(),
  });
  posting.done(function( data ) {
    alert('success');
  });
});

PHP:

// Set $to as the email you want to send the test to.
$to = "my@email.com";

// Email subject and body text.
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = $_POST["message"];

// send test message using wp_mail function.
if(isset(($_POST['name']), ($_POST['email']), ($_POST['message']), ($_POST["subject"]))) {
  $sent_message = wp_mail( $to, $subject, $message, $headers );
} else {

};

//display message based on the result.
if ( $sent_message ) {
    // The message was sent.
    echo 'The test message was sent. Check your email inbox.';
} else {
    // The message was not sent.
    echo 'The message was not sent!';
}

Код работает, когда я запускаю его на локальном веб-сайте, он возвращает успехоповещения.PHP-код также успешно отправляет информацию контактной формы на мой адрес электронной почты.

Когда я запускаю его на своем веб-сервере, я получаю сообщение «сервер ответил со статусом 500 (внутренняя ошибка)».

Я думаю, что, должно быть, я здесь упустил что-то глупое, но я не вижу этого и надеюсь, что кто-то еще может увидеть это и помочь мне?Заранее спасибо!

Answer 1

Вот так я и делаю свое представление ajax для формы.Он содержит меры безопасности WordPress, вы можете узнать их в Google подробно, но я предоставлю небольшое описание.

HTML

<form method="POST" id="contact-form">
    <div class="contact-element flex-row">
        <input class="" type="text" name="name" placeholder="Name" id="name" Required>
        <input class="" type="text" name="email" placeholder="Email Address" id="email" Required>
    </div>
    <input class="" type="text" name="subject" placeholder="Subject" id="subject" Required>
    <textarea type="text" name="message" rows="5" placeholder="Message" id="message" Required></textarea>
    <input class="contact-submit" id="submit" name="submit" type="submit" value="Submit">
    <input type="hidden" name="action" value="contact_form" id="cf_action" url="<?= admin_url('admin-ajax.php'); ?>">
    <?php wp_nonce_field( 'contact_form', 'contact_form_wpnonce' ); ?>
</form>

Javascript

jQuery(function($){
    $("#contact-form").submit(function(e){
        var url = $('#cf_action').attr('url');
        $.ajax({
            type: "POST",
            url: url,
            data: $("#contact-form").serialize(),
            success: function(data) { 
                alert(data.data);
            }
        });
        e.preventDefault(); // avoid to execute the actual submit of the form.
    });
});

Функция

add_action('wp_ajax_contact_form', 'contact_form_function');
add_action('wp_ajax_nopriv_contact_form', 'contact_form_function'); 
function contact_form_function()
{   
    if ( !isset($_POST['xyz_contact_email_meta_box_nonce']) && !wp_verify_nonce($_POST['xyz_contact_email_meta_box_nonce'], 'xyz_save_contact_email_data')) {
        # code...
        return;
    }
    $user_name  = sanitize_text_field( $_POST['name'] );
    $user_email = sanitize_email( $_POST['email'] );
    $user_subject = sanitize_text_field( $_POST['subject'] );
    $user_message = sanitize_textarea_field( $_POST['message'] );
    $to = 'xyz@gmail.com';
    $subject = $user_subject;
    $body = 'Hi you recived a message from '.$user_name.'('.$user_email.'),<p>'.$user_message.'</p>';
    $headers = array('Content-Type: text/html; charset=UTF-8');
    $status = wp_mail( $to, $subject, $body, $headers );
    if($status){
        wp_send_json_success('sent successful');
    }else{
        wp_send_json_error('something went wrong');
    }
}

Описание

хорошо, позвольте мне немного рассказать о WordPress.WordPress уже имеет встроенную функциональность для обработки ajax-запроса из functions.php своей темы, вы должны скопировать и вставить html-код туда, где хотите отображать форму, js-код в нижнем колонтитуле и код функции в functions.php

ЗдесьВот несколько советов: -

1. wp_nonce_field = он используется в целях безопасности и не позволяет хакерам использовать форму для других целей.
2. Очистите данные, чтобы убедиться, что вы не получаете вредоносный код отопубликованные данные, вы также можете использовать esc_attr (он преобразует любые теги и сценарии в html).
3. Хорошая привычка отправлять данные обратно с помощью функции WordPress по умолчанию wp_send_json_success & wp_send_json_error.

(Простите, если вам трудно понять, так как это мой первый ответ на stackoverflow) Ура !!