0

I am having issues with a contact form using Ajax and jQuery.

I followed this guide: https://www.youtube.com/watch?v=LYvx_L9ESn0, and it works on my local server (Laragon), by that laragon catches the email being sent to me.

But using the contact form in my live server doesn't seem to send the form to my admin_email. I already made sure the admin email of my wordpress site is my own email address.

Here is the code for the form (jQuery and Ajax only, no HTML):

<script>
    (function($) {
        $('#FormControlSelectService').change(function() {
            // Shows the Online Program Options if Online Training is chosen
            ($(this).val() == 'Online' ? $('#OnlineSelectProgram').show() : $('#OnlineSelectProgram').hide());
        });

         

        $('#enquiry').submit( function(event) {
            event.preventDefault(); // Allows the event to be cancelled if it is cancelable

            var endpoint = '<?php echo admin_url('admin-ajax.php'); ?>';
            var form = $('#enquiry').serialize(); // Serializes all the data entered
            var formdata = new FormData;

            formdata.append('action', 'enquiry');
            formdata.append('nonce', '<?php echo wp_create_nonce('ajax-nonce');?>');
            formdata.append('enquiry', form);

            $.ajax(endpoint, {
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,

                success: function(res) {
                    $('#enquiry').fadeOut(200);
                    $('#success_message').text('Thank You for Your Enquiry').show();
                    $('#enquiry').trigger('reset');
                    $('#enquiry').fadeIn(500);
                },

                error: function(err) {
                    alert(err.responseJSON.data);
                }
            })
        });

    })(jQuery) </script>

And the code for it in my functions.php:

add_action('wp_ajax_enquiry', 'enquiry_form');
    add_action('wp_ajax_nopriv_enquiry', 'enquiry_form');
    /**
     * 
     * Ajax Form
     */
    function enquiry_form() 
    {
        if (!wp_verify_nonce($_POST['nonce'], 'ajax-nonce')) {
            wp_send_json_error('Nonce is incorrect', 401);
            die();
        }

        $formdata = [];
        wp_parse_str($_POST['enquiry'], $formdata);

        // Sending the Email
        $admin_email = get_option('admin_email');

        // Email Headers
        $headers[] = 'Content-Type: text/html; charset=UTF-8';
        $headers[] = 'From: My Website <' . $admin_email . '>';
        $headers[] = 'Reply-to: ' . $formdata['email'];

        // Sending Email To
        $send_to = $admin_email;

        // Subject
        $subject = "Enquiry from " . $formdata['fname'] . ' ' . $formdata['lname'];

        // Message
        $message = '';

        foreach($formdata as $index => $field)
        {
            $message .= '<strong>' . $index . '</strong>: ' . $field . '<br/>';
        }

        try {
            if (wp_mail($send_to, $subject, $message, $headers)) {
                wp_send_json_success('Email Sent!');
            } else {
                wp_send_json_error('Email Error');
            }
        } catch (Exception $e) {
            wp_send_json_error($e->getMessage());
        }
    }
3
  • What do you see in your console? I always have my console open (CTRL+Shift+K in Firefox) so I can see any errors. Another important tab in there is Network. Clear everything in it with the trash can symbol, then hit your submission. You'll see the POST appear and then click it so you can see more details. You can see what was requested by the front end, as well as the response from the back end. It's indispensable to figuring out what's gone wrong.
    – Elkrat
    Oct 26, 2020 at 1:30
  • It shows me that the "admin-ajax.php" is still pending while also giving me an error of "Failed to load resource: the server responded with a status for 500 (Internal Server Error)"
    – Steve
    Nov 13, 2020 at 1:44
  • This is not how I do AJAX, so I'm suspicious about your variable 'action' being one level too deep. Are you sure your function enquiry_form() is firing? To test if the function is actually firing, just insert an error return at the top of it: wp_send_json_error(array( 'data'=>'Enquiry Form Function!', )); // sends json_encoded success=false die(); And examine your request on the POST in your browser. I think 'action:enquiry' needs to be top level, not under 'data' like this: data:{action:enquiry}, But I'm not an expert. I do the same thing over and over.
    – Elkrat
    Nov 14, 2020 at 18:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.