Existe la documentación oficial de la tramitación del formulario con admin_post_{$action}
https://developer.wordpress.org/reference/hooks/admin_post_action/
Pero no sé por qué no hay ninguno sobre admin_ajax_{$action}
que tampoco pude encontrar una explicación realmente relevante y detallada cuando busqué en Google.
Tengo el siguiente código:
<form id="contact-form" method="post">
<input type="hidden" name="action" value="form_handling">
<input id="fname" placeholder="First Name" type="text" name="fname">
<input id="lname" placeholder="Last Name" type="text" name="lname">
<input id="email" placeholder="Email Address" type="email" name="email">
<input id="phone" placeholder="Phone Number" type="tel" name="phone">
<textarea id="message" placeholder="Your Message..." name="message" rows="3"></textarea>
<input id="submit-form" type="submit" value="Submit">
</form>
Con esto en el functions.php
:
function form_handling() {
$first_name = sanitize_text_field( $_POST['fname'] );
$last_name = sanitize_text_field( $_POST['lname'] );
$email = sanitize_email( $_POST['email'] );
$phone = sanitize_text_field( $_POST['phone'] );
$message = sanitize_textarea_field( $_POST['message'] );
$mail="user@test.com";
$subject="New Submission";
$data = $first_name . ' ' . $last_name . ' ' . $email . ' ' . $phone . ' ' . $message;
$headers="From: Company <local@test.com>";
wp_mail( $mail, $subject, $data, $headers );
wp_die();
}
wp_enqueue_script(
'example',
'https://local.test/script.js',
array(),
null,
true
);
Y JavaScript que usa fetch()
:
const contactForm = document.querySelector('#contact-form'),
btnSubmit = document.querySelector('#submit-form'),
ajaxData = new FormData(contactForm);
btnSubmit.addEventListener('click', function(e) {
e.preventDefault();
fetch('https://local.test/wp-admin/admin-ajax.php', {
method: 'POST',
body: ajaxData
}).then( res => res.text() )
.then( data => {
console.log( data );
}).catch( err => {
console.log(err);
});
})
Pero ahora vuelve <empty string>
en la consola
.