Send an email without reloading the page – WordPress custom form plugin

I’m currently working on a WordPress contact form, which is created as a plugin. I need the form after submit to send an email and to show message without reloading the page. Without preventDefault, stopPropagation or return false methods the form send the message but it reloads the page. If i put one of these options it doesn’t reload the page and it shows the message but it doesn’t send an email. What could be the problem?

<?php
add_action( ‘admin_footer’, ‘html_form_code’ ); // Write our JS below here
//
function html_form_code() {
?>
<form action=”<?php esc_url( $_SERVER[‘REQUEST_URI’] )?>” method=”post” class=”contact-form” id=”contact-form” >
<div class=header-contact>
<p><h2>Contact Form</h2></p>
<hr>
</div>
<div class=input-containers>
<input type=”text” id=”name” name=”cf-name” pattern=”[a-zA-Z0-9 ]+” value=”” size=”40″ placeholder=”Име и фамилия”/>
</div>
<div class=input-containers>
<input type=”email” id=”email” name=”cf-email” value=”” size=”40″ placeholder=”Поща”/>
</div>
<div class=input-containers>
<input type=”text” id=”subject” name=”cf-subject” pattern=”[a-zA-Z ]+” value=”” size=”40″ placeholder=”Относно”/>
</div>
<div class=input-containers>
<textarea rows=”10″ id=”message” cols=”35″ name=”cf-message” placeholder=”Текст”></textarea>
</div>
<div class=input-containers>
<input type=”submit” name=”cf-submitted” value=”Send” id=”submitForm”>
</div>
<p id=”verify” style=”display:none;”>Your message has been sent.<br /><br /></p>
</form>
<script>
//$(“#btn”).click(function(e){
jQuery(document).ready(function($) {
$(‘#contact-form’).submit(function(e) {
e.preventDefault();
//e.stopPropagation();

$.ajax({
type: ‘post’,
url: ‘/’,
success: function () {
//alert(formData);
$(‘#verify’).show();
$(‘#verify’).fadeIn().html(“gff”);
setTimeout(function() {
$(‘#verify’).fadeOut(“slow”);
}, 5000 );
$(“.contact-form”)[0].reset();
},
error: function() {
alert(‘Error!’);
}
});
});
});
</script>
<?php
}
add_action( ‘wp_ajax_my_action’, ‘deliver_mail’ );
add_action( ‘wp_ajax_nopriv_my_action’, ‘deliver_mail’ );

function deliver_mail() {
require_once “wp-includes/class-phpmailer.php”;
if (isset($_POST[“cf-submitted”])) {

// sanitize form values
$name = sanitize_text_field( $_POST[“cf-name”] );
$email = sanitize_email( $_POST[“cf-email”] );
$subject = sanitize_text_field( $_POST[“cf-subject”] );
$message = esc_textarea( $_POST[“cf-message”] );

// get the blog administrator’s email address

//$to = “email@gmx.com”;
$headers = “From: $name <$email>” . “rn”;

// Localhost
$mail = new PHPMailer(true);
$mail->IsSMTP(); // telling the class to use SMTP
$mail->CharSet = ‘UTF-8’;

$mail->SMTPDebug = 0; // enables SMTP debug information (for testing)
$mail->SMTPAuth = true; // enable SMTP authentication
$mail->SMTPSecure = “ssl”; // sets the prefix to the servier
$mail->Host = “mail.gmx.com”; // sets GMX as the SMTP server for example: mail.gmx.com
$mail->Port = 465; // set the SMTP port for the GMX server

$mail->Username = $email;
$mail->Password = ‘pass’;

$mail->SetFrom($email, $name);
$mail->AddAddress($email);

$mail->Subject = $subject;
$mail->MsgHTML($message);

$headers .= “Content-Type: text/html; charset=utf-8”;
$headers .= “Content-Transfer-Encoding: 8bit”;

try {
$mail->send();
$msg = “An email has been sent for verfication.”;
$msgType = “success”;

wp_safe_redirect( home_url(), 302 );
exit();

} catch (Exception $ex) {
$msg = $ex->getMessage();
$msgType = “warning”;

wp_safe_redirect( home_url(), 302 );
exit();
}

add_action( ‘init’, function() {
if ( ! empty( $_POST[‘form_submitted’] ) ) {
deliver_mail();
}
});

function cf_shortcode() {
ob_start();
//deliver_mail();
html_form_code();

//ob_end_flush();
return ob_get_clean();
}
add_shortcode( ‘contact_form_second’, ‘cf_shortcode’ );

Read more here:: Send an email without reloading the page – WordPress custom form plugin

Leave a Reply

Your email address will not be published. Required fields are marked *