Sending a custom form data in email through WP Mail Function

Question

Before posting this post I have browsed these resources:

On form submission how to send 2 email to different users

https://stackoverflow.com/questions/17157685/php-redirect-to-another-page-after-form-submit

https://stackoverflow.com/questions/10927682/how-to-send-e-mail-from-form-in-wordpress

How to send an email using wp_mail and using more than one BCC in the header

An external URL also.

I have a file in plugin by the name of shortcode.php. It has a form and on top of that I have written this code:

add_action('wp_ajax_nopriv_submit_contact_form', 'submit_visa_form');
function submit_visa_form() {
    if(isset($_POST['submit'])) {
        $email=$_POST['email'];
        $firstname=$_POST['firstname'];
        $familyname=$_POST['familyname'];
        $other_names=$_POST['other_names'];
        $dob_day=$_POST['dob_day'];
        $dob_month=$_POST['dob_month'];
        $dob_year=$_POST['dob_year'];
        $city_of_birth=$_POST['city_of_birth'];
        $country_of_birth=$_POST['country_of_birth'];
        $gender=$_POST['gender'];


        $form_message .= "First Name: ".clean_string($firstname)."\n";
        $form_message .= "Family Name: ".clean_string($familyname)."\n";
        $form_message .= "Email: ".clean_string($email)."\n";
        $form_message .= "Other Name ".clean_string($other_names)."\n";
        $form_message .= "DOB: ".clean_string($dob_day)."\n";
        $form_message .= "DOM: ".clean_string($dob_month)."\n";
        $form_message .= "DOY: ".clean_string($dob_year)."\n";
        $form_message .= "COB: ".clean_string($city_of_birth)."\n";
        $form_message .= "COOB: ".clean_string($country_of_birth)."\n";
        $form_message .= "GENDER: ".clean_string($gender)."\n";
        $email_to = "[email protected]";
        $subject = "Form submitted by $email";
        $headers = 'From: '. $firstname .' <'. $email .'>' . "\r\n";

         if(wp_mail($email_to,$subject,$form_message,$headers)) {
                echo json_encode(array("result"=>"complete"));
            } else {
                echo json_encode(array("result"=>"mail_error"));
                var_dump($GLOBALS['phpmailer']->ErrorInfo);
        }
            wp_die();
    }
}

in the form action I am using this currently →

action="<?php the_permalink(); ?>"

For reference live form can be seen here.

But ultimately I am not receiving the email after the form is filled.

what troubleshooting steps should I follow?

In the external link that I have given the form action is :

action="<?php echo admin_url('admin-ajax.php'); ?>"

when I used the abive URL it take me to admin page and gives this →

"0"

which one is the correct one?

Has someone faced the same issue while sending a custom form over the email? Is there a way to check what is causing the error?

Answer 1

I would suggest using AJAX for this. You could do something like this for the jQuery part:

<script type="text/javascript">
jQuery(document).ready(function($) {

  // Execute when user clicks on the "Submit" button
  $('#SUBMIT_BUTTON_ID').on('click', function(e) {

    e.preventDefault();

    var email = $('input[name=email]').val();
    var firstname = $('input[name=firstname]').val();
    var familyname = $('input[name=familyname]').val();
    var other_names = $('input[name=other_names]').val();
    var dob_day = $('input[name=dob_day]').val();
    var dob_month = $('input[name=dob_month]').val();
    var dob_year = $('input[name=dob_year]').val();
    var city_of_birth = $('input[name=city_of_birth]').val();
    var country_of_birth = $('input[name=country_of_birth]').val();
    var gender = $('input[name=gender]').val();

    var formData = new FormData();
        formData.append("action", "submit_contact_form");
        formData.append("email", email);
        formData.append("firstname", firstname);
        formData.append("familyname", familyname);
        formData.append("other_names", other_names);
        formData.append("dob_day", dob_day);
        formData.append("dob_month", dob_month);
        formData.append("dob_year", dob_year);
        formData.append("city_of_birth", city_of_birth);
        formData.append("country_of_birth", country_of_birth);
        formData.append("gender", gender);

        $.ajax({
          url: "/wp-admin/admin-ajax.php",
          type: "post",
          data: formData,
          processData: false,
          contentType: false,
          cache: false,
          success: function(resp) {
            console.log('Message sent!');
          },
          error: function(errorThrown) {
            console.log(errorThrown);
          }
        });
      });
  });
</script>

And then use your function as it is, to send the email to the recipient. Also note, that your input-fields must contain the ID's from below, for jQuery to get the input. It's also way easier to do requirement-check by using jQuery/AJAX here.

Hope it helps :)

EDIT:

You're not actually sending the mail(!) You're only checking if the mail is sent - but not running the function itself. Change this bit of code:

if(wp_mail($email_to,$subject,$form_message,$headers)) {
    echo json_encode(array("result"=>"complete"));
} else {
    echo json_encode(array("result"=>"mail_error"));
    var_dump($GLOBALS['phpmailer']->ErrorInfo);
}

To this:

$send_mail = wp_mail($email_to,$subject,$form_message,$headers);
if($send_mail) {
    echo json_encode(array("result"=>"complete"));
} else {
    echo json_encode(array("result"=>"mail_error"));
    var_dump($GLOBALS['phpmailer']->ErrorInfo);
}