WordPress. Контактна форма на AJAX з використанням wp_mail()

06.06.2023 | Написав eugenem

Наша задача – контактна форма довільної форми без плагінів. Створимо її з використанням AJAX, та для відправки будемо використовувати вбудовану функцію WordPress wp_mail().

1. Створимо в консолі сторінку «Contact Us» зі слагом contact-us. До нього ми будемо прив’язуватись, щоб створити окремий шаблон в темі. Відповідно створимо в темі копію файла page.php з ім’ям page-contact-us.php. І додамо після блока the_content() саму форму:

<?php 
$user = wp_get_current_user();
?>
<div class="woocommerce-error"></div>
<form method="post" autocomplete="off" class="form-contact-us" id="contact-us-form" action="">
    <p>
        <label for="account_first_name"><?php esc_html_e( 'Name', 'my-theme' ); ?></label>
        <input type="text" name="contact-us_first_name" id="contact-us_first_name" autocomplete="given-name" value="<?php if ($user) echo esc_attr( $user->first_name ); ?>" />
    </p>
    <p>
        <label for="account_email"><?php esc_html_e( 'E-mail', 'my-theme' ); ?></label>
        <input type="email" name="contact-us_email" id="contact-us_email" autocomplete="email" value="<?php if ($user) echo esc_attr( $user->user_email ); ?>" />
    </p>
    <p>
        <textarea name="contact-us_message" id="contact-us_message" placeholder="<?php echo __( 'Message...', 'my-theme' ); ?>"></textarea>
    </p>                        
    <p class="contact-us-submit">
        <button type="submit" class="contact-us__submit" name="contact-us_submit" value=""><?php echo __( 'Send', 'my-theme' ); ?></button>
    </p>
</form>

Тобто на фронті в нас буде заголовок сторінки, текст сторінки, форма.
2. Створимо JS-файл для обробки форми contact-us.js. В ньому ми, по-перше, зробимо перевірку на непусті поля, а, по-друге, відправимо данні далі у функцію відправки та приймемо відповідь від неї для вивода відповідного сповіщення.

jQuery(function($){
    $(document).ready(function() {
 
        let name = $('input[name="contact-us_first_name"]');
        let email = $('input[name="contact-us_email"]');
        let message = $('textarea[name="contact-us_message"]');
        let submit = $('.contact-us-submit');
 
        email.on('input', function () {
            if ($(this).val() != "") {
                $('.error-email').remove();
            }
        });
 
        name.on('input', function () {
            if ($(this).val() != "") {
                $('.error-name').remove();
            }
        });
 
        message.on('input', function () {
            if ($(this).val() != "") {
                $('.error-message').remove();
            }
        });        
 
        $('#contact-us-form').on('submit', function(e){
            e.preventDefault();
 
            if (name.val() == '') {
                $('.woocommerce-error').html('<p class="error-name">Input your name</p>');
 
            } else if (email.val() == '') {
                    $('.woocommerce-error').html('<p class="error-email">Input your email</p>');
 
            } else if (message.val() == '') {
                    $('.woocommerce-error').html('<p class="error-message">Input your message</p>');                    
 
            } else {
 
                $.ajax({
                    url: ajaxurl,
                    type: 'POST',
                    data: {
                        action: 'my_theme_contact_us',
                        name: name.val(),
                        email: email.val(),
                        message: message.val()
                    },
                    beforeSend: function( xhr ) {
 
                    },
                    success: function( data ) {
                        message.val('');
                        submit.text('Your message send!');
                    }
                });
            }
        });
    });
});

3. Додамо у fanction.php безпосередньо відсилку листа:

//Contact Form
add_action( 'wp_ajax_my_theme_contact_us', 'my_theme_contact_us' );
add_action( 'wp_ajax_nopriv_my_theme_contact_us', 'my_theme_contact_us' );
 
function my_theme_contact_us(){
 
  $subject = 'My Site - Contact Us';
  $html = '<p>Name: ' . $_POST[ 'name' ] .'</p><p>E-mail: '. $_POST[ 'email' ] .'</p><p>Message: '. $_POST[ 'message' ] .'</p>';
  $headers = array(
   'From: ' . get_bloginfo('name') . ' <test@test.com>',
    'content-type: text/html',
   );
 
   wp_mail( 'info@test.com', $subject, $html, $headers);
 
   echo $html; // виведе в консоль данні листа
 
   die;
}

Рубрика: Веброзробка

Позначки:Ajax, JavaScript, PHP, WordPress, функції WordPress

Коментарі читачів статті "WordPress. Контактна форма на AJAX з використанням wp_mail()"

Немає коментарів.

Залишити відповідь

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.