Проблема с пользовательской формой контактов на PHP

Вопрос или проблема

Я создаю сайт на WP с пользовательской контактной формой на PHP, HTML и Javascript.

Проблема в том, что когда пользователь нажимает кнопку отправки, форма перенаправляет на страницу 404.

PHP функция:

add_shortcode( 'contact-form', 'display_contact_form' );

function display_contact_form() {

    $validation_messages = [];
    $success_message="";

    if ( isset( $_POST['contact_form'] ) ) {

        //Очистка данных
        $name = isset( $_POST['name'] ) ? sanitize_text_field( $_POST['name'] ) : '';
        $surname = isset( $_POST['surname'] ) ? sanitize_text_field( $_POST['surname'] ) : '';
        $email     = isset( $_POST['email'] ) ? sanitize_text_field( $_POST['email'] ) : '';
        $message   = isset( $_POST['message'] ) ? sanitize_textarea_field( $_POST['message'] ) : '';

        //Проверка данных
        if ( strlen( $name ) === 0 ) {
            $validation_messages[] = esc_html__( 'Пожалуйста, введите имя.', 'mysite' );
        }

        if ( strlen( $surname ) === 0 ) {
            $validation_messages[] = esc_html__( 'Пожалуйста, введите фамилию.', 'mysite' );
        }

        if ( strlen( $email ) === 0 or
             ! is_email( $email ) ) {
            $validation_messages[] = esc_html__( 'Пожалуйста, введите корректный адрес электронной почты.', 'mysite' );
        }

        if ( strlen( $message ) === 0 ) {
            $validation_messages[] = esc_html__( 'Пожалуйста, введите сообщение.', 'mysite' );
        }

        //Отправка письма администратору WordPress, если ошибок валидации нет
        if ( empty( $validation_messages ) ) {

            $mail    = get_option( 'admin_email' );
            $subject="Новое сообщение от " . $surname;
            $message = $message . ' - Электронная почта клиента: ' . $mail;

            wp_mail( $mail, $subject, $message );

            $success_message = esc_html__( 'Ваше сообщение было успешно отправлено.', 'mysite' );

        }

    }

    //Отображение ошибок валидации
    if ( ! empty( $validation_messages ) ) {
        foreach ( $validation_messages as $validation_message ) {
            echo '<div class="c-form__validation-message">' . esc_html( $validation_message ) . '</div>';
        }
    }

    //Отображение сообщения об успехе
    if ( strlen( $success_message ) > 0 ) {
        echo '<div class="c-form__success-message">' . esc_html( $success_message ) . '</div>';
    }

    ?>

    <div id="validation-messages-container" class="c-form__validation"></div>

    <form id="contact-form" class="c-form__form" action="<?php echo esc_url( get_permalink() ); ?>" method="post">

        <input type="hidden" name="contact_form">

        <div class="c-form__section">
            <label for="name" class="c-form__label"><?php echo esc_html( 'Имя', 'mysite' ); ?></label>
            <input type="text" id="name" class="c-form__input" name="name" placeholder="<?php echo esc_html( 'Имя', 'mysite' ); ?>">
        </div>

        <div class="c-form__section">
            <label for="surname" class="c-form__label"><?php echo esc_html( 'Фамилия', 'mysite' ); ?></label>
            <input type="text" id="surname" class="c-form__input" name="surname" placeholder="<?php echo esc_html( 'Фамилия', 'mysite' ); ?>">
        </div>

        <div class="c-form__section">
            <label for="email" class="c-form__label"><?php echo esc_html( 'Электронная почта', 'mysite' ); ?></label>
            <input type="email" id="email" class="c-form__input" name="email" placeholder="<?php echo esc_html( 'Электронная почта', 'mysite' ); ?>">
        </div>

        <div class="c-form__section">
            <label for="message" class="c-form__label"><?php echo esc_html( 'Сообщение', 'mysite' ); ?></label>
            <textarea id="message" class="c-form__textarea" name="message" placeholder="<?php echo esc_html( 'Сообщение', 'mysite' ); ?>"></textarea>
        </div>

        <input type="submit" id="contact-form-submit" class="c-form__submit" value="<?php echo esc_attr( 'Отправить', 'mysite' ); ?>">

    </form>

    <?php
}

JS:

const contactFormSubmit = document.getElementById('contact-form-submit');
contactFormSubmit.addEventListener('click', validateForm);

function validateForm(event) {

  event.preventDefault();
  event.stopPropagation();

  // Имя
  const name = document.getElementById('name') !== null ?
      document.getElementById('name').value :
      '';

  // Фамилия
  const surname = document.getElementById('surname') !== null ?
      document.getElementById('surname').value :
      '';

  // Электронная почта
  const email = document.getElementById('email') !== null ?
      document.getElementById('email').value :
      '';

  // Сообщение
  const message = document.getElementById('message') !== null ?
      document.getElementById('message').value :
      '';

  const validationMessages = [];
  if (name.length === 0) {
    validationMessages.push('Пожалуйста, введите имя.');
  }
  
  if (surname.length === 0) {
    validationMessages.push('Пожалуйста, введите фамилию.');
  }

  if (email.length === 0 || !emailIsValid(email)) {
    validationMessages.push('Пожалуйста, введите корректный адрес электронной почты.');
  }

  if (message.length === 0) {
    validationMessages.push('Пожалуйста, введите сообщение.');
  }

  if (validationMessages.length === 0) {

    //Отправка формы
    document.getElementById('contact-form').submit();

  } else {

    //Удаление всех существующих сообщений валидации из DOM
    const parent = document.getElementById('validation-messages-container');
    while (parent.firstChild) {
      parent.removeChild(parent.firstChild);
    }

    //Добавление новых сообщений валидации в DOM
    validationMessages.forEach(function(validationMessage, index) {

      //Добавление сообщения в DOM
      const divElement = document.createElement('div');
      divElement.classList.add('validation-message');
      const node = document.createTextNode(validationMessage);
      divElement.appendChild(node);

      const element = document.getElementById('validation-messages-container');
      element.appendChild(divElement);

    });

  }

}

Спасибо.

Ответ или решение

Для решения проблемы перенаправления на страницу 404 при отправке формы обратной связи на вашем сайте WordPress, можно рассмотреть несколько аспектов, которые помогут выявить и устранить причину этого поведения.

1. Проверка действия формы

Убедитесь, что атрибут action в вашей форме указывает на корректный URL. В вашем коде action установлен на <?php echo esc_url( get_permalink() ); ?>. Это должно вести на текущую страницу, однако иногда может возникнуть проблема, если такой URL не существует или если у вас настроены нестандартные правила переписывания URL.

Попробуйте заменить строку:

<form id="contact-form" class="c-form__form" action="<?php echo esc_url( get_permalink() ); ?>" method="post">

на:

<form id="contact-form" class="c-form__form" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>" method="post">

Это гарантирует, что форма будет отправлена на текущий URL.

2. Возврат к исходной странице

При добавлении короткого кода для отображения формы, убедитесь, что он подключен и загружен на странице. Вы можете использовать:

add_shortcode( 'contact-form', 'display_contact_form' );

Чтобы убедиться, что ваш шорткод правильно используется на странице, проверьте, что вы добавили [contact-form] в содержимое вашей страницы.

3. Проверка на наличие ошибок PHP

Иногда ошибка может быть связана с проблемами в PHP-коде, которые могут не отображаться. Включите отображение ошибок в WordPress для устранения потенциальных проблем. Добавьте следующие строки в ваш файл wp-config.php:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Это позволит вам отлавливать ошибки в файле wp-content/debug.log.

4. Переопределение действий перед отправкой

Убедитесь, что JavaScript не мешает стандартной отправке формы. В вашем JS-коде вы используете event.preventDefault();, чтобы остановить стандартное поведение отправки формы. Если при валидации обнаруживается ошибка, форма не отправляется, тогда как ошибка может быть связана с некорректной проверкой.

Также убедитесь, что ваша JavaScript-функция validateForm корректно собирает и обрабатывает значения перед тем, как отправить форму.

5. Проверка конфликта с плагинами и темами

Иногда конфликты с другими установленными плагинами или темами могут вызвать подобные проблемы. Попробуйте временно отключить все плагины, кроме того, который отвечает за форму, и переключитесь на стандартную тему WordPress. Проверьте, сохраняется ли проблема. Если проблема решается, включайте плагины и тему по одному для выявления конфликтующего элемента.

6. Очистка кэша

Если на вашем сайте используется кэширование (плагины кэширования или кэш на уровне сервера), постарайтесь очистить кэш. Изменения могут не применяться, и старые версии страницы могут кэшироваться, что приводит к 404 ошибкам.

Заключение

Пройдите по указанным шагам. Если ошибка останется, пожалуйста, предоставьте дополнительную информацию о конфигурации вашего сайта, и мы сможем помочь в поиске решения. Не забывайте, что фиксирование подобных ошибок требует внимательности к деталям, и с каждым шагом вы приближаетесь к решению вашей проблемы.

Оцените материал
Добавить комментарий

Капча загружается...