Створення форми зворотного зв'язку для Wordpress

На сервері повинен бути налаштований SMTP

Додати код у файл functions.php

// redpishi.com Contact Form

add_action('wp_ajax_submitmyform','submitmyform');
add_action('wp_ajax_nopriv_submitmyform','submitmyform');

function submitmyform(){
$tomyform = get_bloginfo('admin_email'); 

$system = array();
if ($_POST['website'] != '') {
	$system['statuse']='er';
	$system['reply']='Suspicious activity was detected, That’s all we know.';	
	echo json_encode($system, JSON_UNESCAPED_UNICODE);	
    exit; die(); }
	
foreach($_POST as $key => $value) {
    if (strpos($value, '"') !== FALSE) {
	$system['statuse']='er';
	$system['reply']='The character entered in the form is not acceptable, please contact the site support.';	
	echo json_encode($system, JSON_UNESCAPED_UNICODE);  
	exit; die(); }}

$siteURL = get_site_url(); 
$frommyform = 'info@'.substr($siteURL, strpos($siteURL, ".") + 1);
$headersmyform = "From: $frommyform\n";
$headersmyform .= "MIME-Version: 1.0\n";
$headersmyform .= "Content-type: text/html; charset=UTF-8\n";		

function form1($tomyform , $headersmyform) { 
	unset($_POST['formid'], $_POST['website'], $_POST['action']);	
	$system = array();
	$post = array();
	
	foreach($_POST as $key => $value) { 
		if(strpos($value, "\n") !== FALSE) {
			$post[] = $key.': <b>'.nl2br(filter_var($value,FILTER_SANITIZE_STRING)).'</b>';
		}
		else {
			if ((strpos($value, "@") !== FALSE)) {
				$post[] = $key.': <b>'.nl2br(filter_var($value,FILTER_SANITIZE_EMAIL)).'</b>';
			} else {$post[] = $key.': <b>'.filter_var($value,FILTER_SANITIZE_STRING).'</b>';}
		}}
	$Agent = $_SERVER['HTTP_USER_AGENT'];
	preg_match('!\(.*?\)!',$Agent , $userAgent);
	$message = join("<br />",$post);
	$message .= "<br><br>---------<br>";
	$message .= "UserAgent: ".str_replace(array("(", ")"), "", $userAgent[0])."<br>";
	$message .= "User IP: ".$_SERVER['REMOTE_ADDR']."<br>";
	$subject = 'Contact Form';
		
	if ( wp_mail( $tomyform, $subject, $message, $headersmyform )  )	{
				$system['statuse']='ok';
				$system['reply']='Дякуємо за вашу заявку <br>
Ми скоро з вами зв\'яжемось. Гарного дня!';
				echo json_encode($system, JSON_UNESCAPED_UNICODE);
				exit; die();
				
		} else { 	$system['statuse']='er';
					$system['reply']='Вибачте, заявку не було відправлено. Напишіть нам листа або зателефонуйте';
					echo json_encode($system, JSON_UNESCAPED_UNICODE);
					exit; die();
    				 }}

if ($_POST['formid']) {
	
	$id = $_POST['formid'];
	if ($id == '1001'){ form1($tomyform , $headersmyform ); }
	else if ($id == '1002'){ form2($tomyform , $headersmyform ); }
	else { 	
	$system['statuse']='er';
	$system['reply']='Будь ласка, зв\'яжіться з нами через телефон або електронну пошту';
	echo json_encode($system, JSON_UNESCAPED_UNICODE);   	
	exit; die(); }}} 

Вставити під час редагування сторінки в адмінці або в файл шаблону

<form id="contactForm" onsubmit="submitCform(); return false;">

    <label for="name">Ваше ім'я:</label>
    <input type="text" id="name" name="name" placeholder="Введіть ім'я">

    <label id="website" for="website">website:</label>
    <input type="text" id="website" name="website" autocomplete="off"
        placeholder="www.yoursite.com">

    <label for="phone">Номер телефону:</label>
    <input type="tel" id="phone" name="phone" placeholder="Номер телефону" required>

    <label for="message">Повідомлення:</label>
    <textarea rows="3" id="message" name="message"
        placeholder="Напишіть питання яке вас цікавить">
</textarea>

    <input id="mybtn" type="submit" value="Надіслати">
    <span id="status"> </span>
    <input type="hidden" id="formid" name="formid" value="1001">


</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    jQuery('#phone').inputmask("+38 (999) 999-99-99");

})
const contactForm = document.querySelector("form#contactForm");

function submitCform() {
    document.querySelector("form#contactForm #mybtn").disabled = "true"
    document.querySelector("form#contactForm #mybtn").value = 'Please wait...'

    var formdata = new FormData(contactForm);

    formdata.append('action', 'submitmyform')
    AjaxCform(formdata)
}

async function AjaxCform(formdata) {
    const url = location.protocol + '//' + window.location.hostname +
        '/wp-admin/admin-ajax.php?action=submitmyform'
    const response = await fetch(url, {
        method: 'POST',
        body: formdata,
    });
    const data = await response.json();

    if (data['statuse'] == 'ok') {
        document.querySelector("form#contactForm").innerHTML = `<div id="success">
${data['reply']}
</div>`
    } else if (data['statuse'] == 'er') {
        document.querySelector("form#contactForm span#status").innerHTML = `<div id="er">
Ops, ${data['reply']}
</div>`
        document.querySelector("form#contactForm #mybtn").disabled = false
        document.querySelector("form#contactForm #mybtn").value = 'Try again'
    }
}
</script>

<style>
#website {
    display: none;
}

form#contactForm {
    max-width: 95%;
    width: 550px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 15px 29px -22px #afa9a9;
    background-color: white;
}

#er {
    color: #f21515;
    background-color: #fff0f0;
    font-weight: bold;
    border: 3px solid #f21515;
    border-radius: 5px;
    padding: 10px 10px;
    max-width: fit-content;
    margin: 15px auto;
}

#success {
    color: #23a238;
    background-color: azure;
    font-weight: bold;
    border: 3px solid #23a238;
    border-radius: 5px;
    padding: 10px 10px;
    max-width: fit-content;
    margin: 15px auto;
}

label {
    display: block;
    padding-top: 15px;
    margin-left: 10px;
}

#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: #b5b5b5;
}

#contactForm input[placeholder],
#contactForm textarea[placeholder] {
    font-size: 1rem;
    line-height: 2rem;
}

form#contactForm input#mybtn {
    margin-top: 15px;
    display: block;
    height: 3rem;
    color: white;
    background: #0088a7;
    padding: 0px 23px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form#contactForm input[type="text"],
form#contactForm input[type="tel"],
form#contactForm input[type="email"],
form#contactForm textarea {
    width: 100%;
    border: 1px solid #f1f0f0;
    border-radius: 5px;
    padding: 3px 10px;
    margin-top: 3px;
}
</style>

Додати маску для поля Телефон

Спочатку підключити бібліотеку черзе файл functions.php

wp_enqueue_script('jquery-3.6.0.min.js', get_template_directory_uri() . "/js/jquery-3.6.0.min.js", array(), '3.6.0', true);//якщо ще не додано
wp_enqueue_script('input-mask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js?ver=5.0.6', array('jquery-3.6.0.min.js'), '1.0', true);

або в footer після підключення JQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js?ver=5.0.6"></script>

Потім додати код JQuery

document.addEventListener('DOMContentLoaded', function() {
    jQuery('#phone').inputmask("+38 (999) 999-99-99");
})