php ФормаобратнойсвязисзагрузкойфайлавWordPressнаосновеплагинаAjaxSimply。

Posted 2021-05-05

<?php
/**
 * Работает на основе плагина Ajax Simply (без него работать не будет).
 * Документация Ajax Simply - https://goo.gl/iFeLsZ
 */

// HTML верстка формы и стили
add_shortcode( 'form', 'contact_form_html' );

function contact_form_html() {
	ob_start();
	?>

    <form id="contform">
        <p>
            <label>Ваше имя <i>*</i></label>
            <input type="text" name="your_name" maxlength="50" value="">
        </p>
        <p>
            <label>E-mail <i>*</i></label>
            <input type="text" name="email" maxlength="50" value="">
        </p>
        <p>
            <label>Тема письма <i>*</i></label>
            <input type="text" name="subject" maxlength="50" value="">
        </p>
        <p>
            <label>Сообщение <i>*</i></label>
            <textarea name="message" rows="4"></textarea>
        </p>
        
        <p>
            <input type="file" name="attached_file">
        </p>

        <button type="submit" class="button-primary contform_submit">
            Отправить
        </button>

        <span class="file_upload_progress"></span>
    </form>

    <div class="contform_respond"></div>

    <style>
        #contform {
            margin-top: 2em;
        }

        #contform i {
            color: #e91e63;
            font-style: normal;
        }

        #contform label {
            display: block;
        }

        #contform .error {
            border-color: #e91e63;
        }

        #contform .contform_submit {
            width: 15em;
            margin-top: 1.5em;
        }

        .contform_respond {
            display: none;
            margin-top: 1.5em;
            padding: 1em;
            border-radius: 3px;
            border: 1px solid #89d88c;
            background: #cdefce;
            color: #2a752d;
        }

        .contform_respond.err {
            border: 1px solid #ffb0cb;
            background: #ffe1ec;
            color: #E91E63;
        }
    </style>
	
	<?php
	
	// Подключим JS
	add_action( 'wp_footer', 'contact_form_js', 99 );
	
	return ob_get_clean();
}

// JavaScript
function contact_form_js() {
	?>

    <script>
        jQuery(document).ready(function ($) {
            var $contform = $('#contform'),
                $submit_btn = $contform.find('.contform_submit'),
                $file_upload_progress = $contform.find('.file_upload_progress'),
                $ajaxs_res = $('.contform_respond');

            // Реагируем на отправку формы
            $contform.on('submit', function (e) {
                // Отменим дефолтное действие при сабмите формы
                e.preventDefault();

                // Анимация кнопки отправки - делаем ее полупрозрачной
                $submit_btn.css({opacity: 0.3});

                // Запрос
                ajaxs(
                    'contact_form_submit',
                    {
                        foo: $contform,
                        uploadProgress: function (percentComplete) {
                            $file_upload_progress.text(percentComplete + '%');
                        }
                    },
                    // success
                    function (res) {
                        if (res.ok) {
                            $contform[0].reset();
                            $ajaxs_res.removeClass('err').slideDown(200).html(res.data);
                        } else {
                            $ajaxs_res.addClass('err').slideDown(200).html(res.data);
                        }

                        setTimeout(function () {
                            $ajaxs_res.slideUp(200);
                        }, 3000);
                    },
                    // always
                    function () {
                        $submit_btn.css({opacity: 1});
                        $file_upload_progress.text('');
                    }
                );
            });

            // Убираем CSS класс ошибки при фокусе в поле
            $contform.find('input,textarea').on('focus', function () {
                $(this).removeClass('error');
            });
        });
    </script>
	
	<?php
}

// PHP обработчик ajax запроса
function ajaxs_contact_form_submit( $jx ) {
	// Проверка полей
	$name    = sanitize_text_field( $jx->your_name );
	$subject = sanitize_text_field( $jx->subject );
	$message = esc_html( $jx->message );
	
	$error_fields = [];
	if ( ! $name ) {
		$error_fields[] = 'your_name';
	}
	if ( ! is_email( $jx->email ) ) {
		$error_fields[] = 'email';
	}
	if ( ! $subject ) {
		$error_fields[] = 'subject';
	}
	if ( ! $message ) {
		$error_fields[] = 'message';
	}
	
	if ( $error_fields ) {
		foreach ( $error_fields as $field ) {
			$jx->jseval( "jQuery('[name=$field]').addClass('error')" );
		}
		
		$jx->error( 'Ошибка: проверьте все поля!' );
	}
	
	// Отправляем письмо
	$to = get_option( 'admin_email' );
	
	$subject = "[{$_SERVER['HTTP_HOST']}] $subject";
	
	$msg = "<b>$name</b> написал: <br><br>";
	$msg .= $message;
	$msg .= "<br><br>-<br><br>email: $jx->email<br>";
	$msg .= "IP: {$_SERVER['REMOTE_ADDR']}";
	
	$headers = [
		"MIME-Version: 1.0",
		"From: $name <$jx->email>",
		"Content-Type: text/html",
	];
	
	$attached_file_path = '';
	if ( $jx->attached_file && ! $jx->attached_file['error'] ) {
		// Переименуем файл
		$attached_file_path = dirname( $jx->attached_file['tmp_name'] ) . '/';
		$attached_file_path .= sanitize_file_name( $jx->attached_file['name'] );
		@rename( $jx->attached_file['tmp_name'], $attached_file_path );
	}
	
	$done = wp_mail( $to, $subject, $msg, $headers, $attached_file_path );
	
	// Удалим переименованный файл
	if ( $attached_file_path ) {
		@unlink( $attached_file_path );
	}
	
	if ( $done ) {
		$jx->done( 'Письмо отправлено. Спасибо!' );
	}
	
	$jx->error( 'Письмо не отправлено. Неизвестная ошибка.' );
}