Durch die Kombination von ACF, WordPress-Hooks und AJAX können wir dynamische und interaktive Formulare erstellen, die nicht nur ein tolles Nutzererlebnis bieten, sondern auch wichtige Informationen effektiv über E-Mail versenden. Dieses Formular ermöglicht es Nutzern, auf einfache Weise Reservierungsanfragen zu senden, während es gleichzeitig eine flexible Verwaltung der E-Mails im Backend erlaubt.
In diesem Beitrag zeige ich dir, wie du ein mehrseitiges Formular in einem benutzerdefinierten Block erstellst und eine E-Mail-Benachrichtigungsfunktion implementierst. Dabei verwenden wir Advanced Custom Fields (ACF) und AJAX, um die Interaktivität und Benutzerfreundlichkeit zu verbessern.
1. Erstellen des Blocks mit ACF und einem mehrseitigen Formular
Zunächst definieren wir den ACF-Block, der unser Formular und die zugehörigen Inhalte anzeigt. Der Block wird auf der Basis eines ACF-Wahr/Falsch-Feldes „gutes_aus_der_kueche“ angezeigt, wenn der Wert auf «true» gesetzt ist.
Damit WordPress mit dem ACF-Field auch was anfangen kann, sind zwei Schritte notwendig. In deinem Theme-Verzeichnis erstellst du ein Verzeichnis und folgende Dateien:
dein-theme/
blocks/
gutes_aus_der_kueche/
block.json
block.php
block.js //optional
block.css //optionalIn der block.json definierst du die Eigenschaften des zukünftigen Blocks:
{
"_comment": "",
"name": "gutes_aus_der_kueche",
"title": "Gutes aus der Küche",
"description": "Fügt ein Button- und Formular bereit",
"style": [
"file:./block.css"
],
"category": "formatting",
"icon": "clipboard",
"keywords": [],
"acf": {
"mode": "preview",
"renderTemplate": "block.php"
},
"align": "full",
"supports": {
"align": false,
"mode": true
}
}Dann teilst du in deiner functions.php WordPress mit, dass das ACF-Field als Block registriert werden soll
<?php
// Den benutzerdefinierten Block registrieren
function uldi_load_blocks(){
register_block_type(dirname(__FILE__) . '/blocks/gutes_aus_der_kueche');
}
add_action('acf/init', 'uldi_load_blocks');
function ud_enqueue_frontend_scripts(){
// das block.js dazuladen
wp_enqueue_script('gutes_aus_der_kueche', get_stylesheet_directory_uri() . "/blocks/gutes_aus_der_kueche/block.js", array('jquery'), filemtime(get_template_directory() . "/blocks/gutes_aus_der_kueche/block.js"), true);
// Überträgt den AJAX-URL-Pfad zum JavaScript, damit Anfragen über AJAX an admin-ajax.php gesendet werden können
wp_localize_script('gutes_aus_der_kueche', 'ajax_kueche', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'ud_enqueue_frontend_scripts');
?>Schlussendlich solltest du auch nicht vergessen, ein ACF-Feld zu erstellen und dieses dem Block zuzuweisen:
In der Datei block.php wird dann das eigentliche Formular generiert. Die Input-Fields erhalten dabei eine eindeutige ID, damit das Formlar auch mehrmals auf der selben Seite verwendet werden kann.
<?php
/**
* Block-Template für den ACF-Block "gutes_aus_der_kueche"
**/
$gutes_aus_der_kueche = get_field('gutes_aus_der_kueche'); // Prüfen, ob das ACF-Wahr/Falsch-Feld auf "true" gesetzt ist
?>
<?php
if ($gutes_aus_der_kueche) {
if (!function_exists('add_gutes_aus_der_kueche_form')) {
function add_gutes_aus_der_kueche_form($block_index) {
ob_start();
?>
<!-- Mehrseitiges Formular für Gutes-aus-der-Küche-Anfragen -->
<div class="form_block gutes_aus_der_kueche" data-block-index="<?php echo $block_index; ?>">
<div class="form_container">
<div class="form_head">
<h2 style="transform:translateY(-6px)">Deine Reservation:</h2>
<span class="close"><i class="fa-light fa-xmark-large"></i></span>
</div>
<h3 class="kitchen_package">Ausgewählter Dienst</h3>
<form class="gutes_aus_der_kueche_form">
<!-- Erste Seite des Formulars -->
<div class="form_page form_page_1 active">
<!--<h3>Ausgewählter Dienst</h3>-->
<div class="contact_field">
<input type="number" name="anzahl_personen" id="anzahl_personen_<?php echo $block_index; ?>" class="required" placeholder="Anzahl Personen*">
<div class="error_message">Bitte gib an, wie viele Personen teilnehmen werden.</div>
</div>
<div class="contact_field">
<input type="text" name="datum" id="datum_<?php echo $block_index; ?>" placeholder="Datum*" class="required">
<div class="error_message">Bitte teile uns dein gewünschtes Datum mit.</div>
</div>
<div class="contact_field">
<input type="text" name="zeit" id="zeit_<?php echo $block_index; ?>" placeholder="Zeit*" class="required">
<div class="error_message">Bitte teile uns deine gewünschte Zeit mit.</div>
</div>
<div class="button_container">
<button type="button" class="prev_step"><i class="fa fa-arrow-left-long"></i></button>
<button type="button" class="next_step"><i class="fa fa-arrow-right-long"></i></button>
</div>
</div>
<!-- Zweite Seite des Formulars -->
<div class="form_page form_page_2">
<!--<h3>Deine Kontakt-Angaben:</h3>-->
<div class="contact_field">
<input type="text" name="name" id="name_<?php echo $block_index; ?>" placeholder="Name*" class="required">
<div class="error_message">Bitte teile uns deinen Namen mit.</div>
</div>
<div class="contact_field">
<input type="email" name="email" id="email_<?php echo $block_index; ?>" placeholder="Email*" class="required">
<div class="error_message">Bitte teile uns deine Email-Adresse mit.</div>
</div>
<div class="contact_field">
<input type="text" name="telefon" id="telefon_<?php echo $block_index; ?>" placeholder="Telefonnummer*" class="required">
<div class="error_message">Bitte teile uns deine Telefon-Nummer mit.</div>
</div>
<div class="button_container">
<button type="button" class="prev_step"><i class="fa fa-arrow-left-long"></i></button>
<button type="submit" class="chip submit"><i class="fa fa-paper-plane"></i></button>
</div>
</div>
</form>
<!-- Erfolgsnachricht -->
<div class="form-messages">
<p class="success-message">Deine Anfrage wurde erfolgreich versendet!</p>
</div>
</div>
<div class="svg-container">
<?php
$svg_path = get_template_directory() . '/assets/hirschi_black.svg';
if (file_exists($svg_path)) {
echo file_get_contents($svg_path);
} else {
echo '<p>SVG konnte nicht geladen werden.</p>';
} ?>
</div>
</div>
<?php
return ob_get_clean();
}
}
// Ausgabe des Formulars mit einem Index zur Generierung eindeutiger IDs
$block_index = uniqid(); // Generiere einen eindeutigen Index basierend auf der Zeit
echo add_gutes_aus_der_kueche_form($block_index);
// Ausgabe des Buttons
?>
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button">
<a class="anfrage_starten wp-block-button__link has-hirschen-dark-grey-color has-hirschen-white-background-color has-text-color has-background has-link-color wp-element-button">Reservieren</a>
</div>
</div>
<?php
}
?>
2. Validierung und Navigation des Formulars mit JavaScript (AJAX)
Das Formular verwendet jQuery, um die Seiten zu steuern und das Formular per AJAX abzusenden. Die Validierung der Eingaben erfolgt pro Seite, wobei sich der Benutzer nur dann zur nächsten Seite bewegen kann, wenn alle erforderlichen Felder korrekt ausgefüllt sind.
jQuery(document).ready(function($) {
var currentPageIndex = 0;
function goToNextPage() {
if (!validateRequiredFields()) return;
if (currentPageIndex < $pages.length - 1) {
$pages.eq(currentPageIndex).removeClass('active');
currentPageIndex++;
$pages.eq(currentPageIndex).addClass('active');
}
}
function validateRequiredFields() {
var valid = true;
$pages.eq(currentPageIndex).find('input.required').each(function() {
if ($(this).val() === '') {
valid = false;
$(this).addClass('error');
$(this).next('.error_message').show();
} else {
$(this).removeClass('error');
$(this).next('.error_message').hide();
}
});
return valid;
}
$formBlock.find('.next_step').on('click', goToNextPage);
});3. Senden der Daten per AJAX und E-Mail-Benachrichtigung
Beim Absenden des Formulars wird eine AJAX-Anfrage an den WordPress-Server gesendet, um die E-Mail-Benachrichtigungen auszulösen. Der JavaScript-Code dafür sieht folgendermassen aus:
$formBlock.find('.gutes_aus_der_kueche_form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: ajax_kueche.ajaxurl,
method: 'POST',
data: {
action: 'send_gutes_aus_der_kueche_email_action',
name: form.find('input[name="name"]').val(),
email: form.find('input[name="email"]').val(),
telefon: form.find('input[name="telefon"]').val(),
datum: form.find('input[name="datum"]').val(),
anzahlPersonen: form.find('input[name="anzahl_personen"]').val(),
interest: $the_interest
},
success: function(response) {
if (response.success) {
$formBlock.addClass('success');
}
}
});
});Auf der PHP-Seite wird die Datenverarbeitung mit der Funktion send_gutes_aus_der_kueche_emails() ausgeführt. Diese Funktion sendet eine E-Mail an den Benutzer sowie an den Administrator:
<?php
function send_gutes_aus_der_kueche_emails($name, $email, $telefon, $anzahlPersonen, $datum, $zeit, $interest) {
$to_user = $email;
$subject_user = 'Bestätigung Deiner Anfrage';
$message_user = "Hallo $name, danke für deine Anfrage für $interest am $datum um $zeit.";
$to_admin = get_option('admin_email');
$subject_admin = 'Neue Reservation-Anfrage';
$message_admin = "Name: $name, Interesse: $interest, Datum: $datum, Zeit: $zeit.";
wp_mail($to_user, $subject_user, $message_user);
wp_mail($to_admin, $subject_admin, $message_admin);
}
?>Diese Funktion sammelt die vom Formular gesendeten Daten, bereitet E-Mail-Nachrichten für den Benutzer und den Administrator vor und versendet diese.
4. Ungekürzte Codes
Im Folgenden die ungekürzten Code-Beispiele:
<?php
/**
* Template für den ACF-Block "gutes_aus_der_kueche"
**/
$gutes_aus_der_kueche = get_field('gutes_aus_der_kueche'); // Prüfen, ob das ACF-Wahr/Falsch-Feld auf "true" gesetzt ist
?>
<?php
if ($gutes_aus_der_kueche) {
if (!function_exists('add_gutes_aus_der_kueche_form')) {
function add_gutes_aus_der_kueche_form($block_index) {
ob_start();
?>
<!-- Mehrseitiges Formular für Gutes-aus-der-Küche-Anfragen -->
<div class="form_block gutes_aus_der_kueche" data-block-index="<?php echo $block_index; ?>">
<div class="form_container">
<div class="form_head">
<h2 style="transform:translateY(-6px)">Deine Reservation:</h2>
<span class="close"><i class="fa-light fa-xmark-large"></i></span>
</div>
<h3 class="kitchen_package">Ausgewählter Dienst</h3>
<form class="gutes_aus_der_kueche_form">
<!-- Erste Seite des Formulars -->
<div class="form_page form_page_1 active">
<!--<h3>Ausgewählter Dienst</h3>-->
<div class="contact_field">
<input type="number" name="anzahl_personen" id="anzahl_personen_<?php echo $block_index; ?>" class="required" placeholder="Anzahl Personen*">
<div class="error_message">Bitte gib an, wie viele Personen teilnehmen werden.</div>
</div>
<div class="contact_field">
<input type="text" name="datum" id="datum_<?php echo $block_index; ?>" placeholder="Datum*" class="required">
<div class="error_message">Bitte teile uns dein gewünschtes Datum mit.</div>
</div>
<div class="contact_field">
<input type="text" name="zeit" id="zeit_<?php echo $block_index; ?>" placeholder="Zeit*" class="required">
<div class="error_message">Bitte teile uns deine gewünschte Zeit mit.</div>
</div>
<div class="button_container">
<button type="button" class="prev_step"><i class="fa fa-arrow-left-long"></i></button>
<button type="button" class="next_step"><i class="fa fa-arrow-right-long"></i></button>
</div>
</div>
<!-- Zweite Seite des Formulars -->
<div class="form_page form_page_2">
<!--<h3>Deine Kontakt-Angaben:</h3>-->
<div class="contact_field">
<input type="text" name="name" id="name_<?php echo $block_index; ?>" placeholder="Name*" class="required">
<div class="error_message">Bitte teile uns deinen Namen mit.</div>
</div>
<div class="contact_field">
<input type="email" name="email" id="email_<?php echo $block_index; ?>" placeholder="Email*" class="required">
<div class="error_message">Bitte teile uns deine Email-Adresse mit.</div>
</div>
<div class="contact_field">
<input type="text" name="telefon" id="telefon_<?php echo $block_index; ?>" placeholder="Telefonnummer*" class="required">
<div class="error_message">Bitte teile uns deine Telefon-Nummer mit.</div>
</div>
<div class="button_container">
<button type="button" class="prev_step"><i class="fa fa-arrow-left-long"></i></button>
<button type="submit" class="chip submit"><i class="fa fa-paper-plane"></i></button>
</div>
</div>
</form>
<!-- Erfolgsnachricht -->
<div class="form-messages">
<p class="success-message">Deine Anfrage wurde erfolgreich versendet!</p>
</div>
</div>
<div class="svg-container">
<?php
$svg_path = get_template_directory() . '/assets/hirschi_black.svg';
if (file_exists($svg_path)) {
echo file_get_contents($svg_path);
} else {
echo '<p>SVG konnte nicht geladen werden.</p>';
} ?>
</div>
</div>
<?php
return ob_get_clean();
}
}
// Ausgabe des Formulars mit einem Index zur Generierung eindeutiger IDs
$block_index = uniqid(); // Generiere einen eindeutigen Index basierend auf der Zeit
echo add_gutes_aus_der_kueche_form($block_index);
// Ausgabe des Buttons
?>
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button">
<a class="anfrage_starten wp-block-button__link has-hirschen-dark-grey-color has-hirschen-white-background-color has-text-color has-background has-link-color wp-element-button">Reservieren</a>
</div>
</div>
<?php
}
?>
function uldi_load_blocks(){
register_block_type(dirname(__FILE__) . '/blocks/gutes_aus_der_kueche');
}
add_action('acf/init', 'uldi_load_blocks');
function ud_enqueue_frontend_scripts(){
wp_enqueue_script('gutes_aus_der_kueche', get_stylesheet_directory_uri() . "/blocks/gutes_aus_der_kueche/block.js", array('jquery'), filemtime(get_template_directory() . "/blocks/gutes_aus_der_kueche/block.js"), true);
wp_localize_script('gutes_aus_der_kueche', 'ajax_kueche', array('ajaxurl' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'ud_enqueue_frontend_scripts');
// Funktion zum Versenden der E-Mails für das neue Pub-Anfragen-Formular
function send_gutes_aus_der_kueche_emails($name, $email, $telefon, $anzahlPersonen, $datum, $zeit, $interest) {
$original_locale = setlocale(LC_TIME, 0);
setlocale(LC_TIME, 'de_DE.UTF-8');
// Nachricht an den Benutzer
$to_user = $email;
$subject_user = 'Bestätigung Deiner Anfrage';
$message_user = "
<p>Hallo $name</p>
<p>Vielen Dank für Deine Reservation.</p>
<p>Details zu Deiner Reservation:</p>
<ul>
<li>Du hast dich angemeldet für: $interest</li>
<li>Datum: $datum</li>
<li>Zeit: $zeit</li>
<li>Anzahl Personen: $anzahlPersonen</li>
</ul>
<p>Mit freundlichen Grüssen<br>das Hirschen-Team</p>";
$headers_user = array('Content-Type: text/html; charset=UTF-8');
wp_mail($to_user, $subject_user, $message_user, $headers_user);
// Nachricht an den Webseitenbetreiber
$to_admin = get_option('admin_email');
$subject_admin = 'Neue Reservation-Anfrage';
$message_admin ="
<p>Neue Reservations-Anfrage:</p>
<ul>
<li>Name: $name</li>
<li>Email: $email</li>
<li>Telefon: $telefon</li>
<li>Reservation für: $interest</li>
<li>Datum: $datum</li>
<li>Zeit: $zeit</li>
<li>Anzahl Personen: $anzahlPersonen</li>
</ul>";
$headers_admin = array('Content-Type: text/html; charset=UTF-8');
wp_mail($to_admin, $subject_admin, $message_admin, $headers_admin);
setlocale(LC_TIME, $original_locale); // Ursprüngliche Lokalisierung wiederherstellen
}
// AJAX-Hook für das Pub-Anfragen-Formular
add_action('wp_ajax_send_gutes_aus_der_kueche_email_action', 'handle_gutes_aus_der_kueche');
add_action('wp_ajax_nopriv_send_gutes_aus_der_kueche_email_action', 'handle_gutes_aus_der_kueche');
function handle_gutes_aus_der_kueche() {
// Daten aus dem AJAX-Request extrahieren und validieren
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
$telefon = sanitize_text_field($_POST['telefon']);
$anzahlPersonen = sanitize_text_field($_POST['anzahlPersonen']);
$datum = sanitize_text_field($_POST['datum']);
$zeit = sanitize_text_field($_POST['zeit']);
$interest = sanitize_text_field($_POST['interest']);
// E-Mail-Versandfunktion aufrufen
send_gutes_aus_der_kueche_emails($name, $email, $telefon, $anzahlPersonen, $datum, $zeit, $interest);
// Erfolgsantwort senden
wp_send_json_success('Anfrage erfolgreich versendet.');
}jQuery(document).ready(function ($) {
// Für jede Instanz von .is-style-angebot_kueche separat agieren
$(".is-style-angebot_kueche .single_condition").each(function (index) {
var $thisContainer = $(this); // Verweis auf den spezifischen Block
var $the_interest = $thisContainer.find(".wp-block-heading").text();
// Vergeben einer eindeutigen ID für jeden Block
var conditionId = "condition_" + index;
$thisContainer.attr("id", conditionId); // ID dem Block zuweisen
var $formBlock = $thisContainer.find(".form_block"); // Verweis auf das jeweilige .form_block innerhalb des Blocks
var $pages = $formBlock.find(".form_page");
var currentPageIndex = 0;
/*
// Funktion zur Validierung der Checkboxen auf der ersten Seite
function validateCheckboxes() {
var isValid = $formBlock.find('input[name="interests[]"]:checked').length > 0;
if (!isValid) {
$formBlock.find('.form_page_1 .error_message').show(); // Fehlermeldung anzeigen
} else {
$formBlock.find('.form_page_1 .error_message').hide(); // Fehlermeldung ausblenden
}
return isValid;
}
*/
// Funktion zur Validierung der erforderlichen Felder auf anderen Seiten
function validateRequiredFields() {
var valid = true;
$pages
.eq(currentPageIndex)
.find("input.required")
.each(function () {
if ($(this).val() === "") {
valid = false;
$(this).addClass("error"); // Fehlerklasse hinzufügen
$(this).next(".error_message").show(); // Fehlermeldung anzeigen
} else {
$(this).removeClass("error"); // Fehlerklasse entfernen
$(this).next(".error_message").hide(); // Fehlermeldung ausblenden
}
});
return valid;
}
// Funktion, um zur nächsten Seite zu wechseln
function goToNextPage() {
/*
if (currentPageIndex === 0) {
if (!validateCheckboxes()) {
return; // Weitergehen verhindern
}
}
*/
if (currentPageIndex > 0) {
if (!validateRequiredFields()) {
return; // Weitergehen verhindern
}
}
if (currentPageIndex < $pages.length - 1) {
$pages.eq(currentPageIndex).removeClass("active"); // Aktuelle Seite ausblenden
currentPageIndex++; // Index der nächsten Seite erhöhen
$pages.eq(currentPageIndex).addClass("active"); // Nächste Seite anzeigen
}
}
// Funktion, um zur vorherigen Seite zu wechseln
function goToPrevPage() {
if (currentPageIndex > 0) {
$pages.eq(currentPageIndex).removeClass("active"); // Aktuelle Seite ausblenden
currentPageIndex--; // Index der vorherigen Seite verringern
$pages.eq(currentPageIndex).addClass("active"); // Vorherige Seite anzeigen
}
}
// Funktion zum Zurücksetzen des Formulars
function resetForm() {
$formBlock.removeClass("success");
$formBlock.find('input[type="checkbox"]').prop("checked", false); // Checkboxen deaktivieren
$formBlock
.find('input[type="text"], input[type="email"], input[type="number"]')
.val(""); // Input-Felder leeren
$formBlock.find("input").removeClass("error"); // Fehlerklassen entfernen
$formBlock.find(".error_message").hide(); // Fehlermeldungen ausblenden
currentPageIndex = 0;
$pages.removeClass("active"); // Entferne die "active"-Klasse von allen Seiten
$pages.eq(currentPageIndex).addClass("active"); // Erste Seite aktivieren
}
// Event-Listener für die "Weiter"-Schaltflächen
$formBlock.find(".next_step").on("click", function () {
goToNextPage();
});
// Event-Listener für die "Zurück"-Schaltflächen
$formBlock.find(".prev_step").on("click", function () {
goToPrevPage();
});
// Formular öffnen und verhindern, dass das Klick-Ereignis propagiert
$thisContainer.find(".anfrage_starten").on("click", function (event) {
event.stopPropagation(); // Verhindert, dass das Klick-Ereignis sich weiterverbreitet
$thisContainer.find(".kitchen_package").text($the_interest); // Spaghetti-Plausch usw.
$formBlock.addClass("open");
$formBlock.find(".form_page").first().addClass("active");
});
// Formular schließen
$formBlock.find(".close").on("click", function () {
$formBlock.removeClass("open");
resetForm();
});
// Formular bei Klick außerhalb des Containers schließen
$(document).on("click", function (event) {
if (
!$(event.target).closest($formBlock.find(".form_container")).length &&
$formBlock.hasClass("open")
) {
$formBlock.removeClass("open");
resetForm();
}
});
// Verhindern, dass ein Klick im Formular den Document-Klick auslöst
$formBlock.find(".form_container").on("click", function (event) {
event.stopPropagation(); // Stoppt das Event im Formularcontainer
});
// Formular über AJAX absenden
$formBlock.find(".gutes_aus_der_kueche_form").on("submit", function (e) {
e.preventDefault(); // Standard-Verhalten verhindern
// Daten sammeln
var form = $(this);
var name = form.find('input[name="name"]').val();
var email = form.find('input[name="email"]').val();
var telefon = form.find('input[name="telefon"]').val();
var anzahlPersonen = form.find('input[name="anzahl_personen"]').val();
var datum = form.find('input[name="datum"]').val();
var zeit = form.find('input[name="zeit"]').val();
/*
//Falls interests checkboxen sind, hier sammeln
var interests = [];
form.find('input[name="interests[]"]:checked').each(function() {
//interests.push($(this).val());
});
interests.push($the_interest);
*/
var interests = $the_interest;
// Letzte Validierung vor dem Absenden des Formulars
var valid = true;
// Überprüfen der erforderlichen Felder auf der letzten Seite
form.find("input.required").each(function () {
if ($(this).val() === "") {
valid = false;
$(this).addClass("error"); // Fehlerklasse hinzufügen
$(this).next(".error_message").show(); // Fehlermeldung anzeigen
} else {
$(this).removeClass("error"); // Fehlerklasse entfernen
$(this).next(".error_message").hide(); // Fehlermeldung ausblenden
}
});
// Formular nur absenden, wenn alle Felder gültig sind
if (!valid) {
return; // Wenn ein Feld ungültig ist, wird das Formular nicht abgesendet
}
// AJAX-Anfrage
$.ajax({
url: ajax_kueche.ajaxurl,
method: "POST",
data: {
action: "send_gutes_aus_der_kueche_email_action",
name: name,
email: email,
telefon: telefon,
anzahlPersonen: anzahlPersonen,
datum: datum,
zeit: zeit,
interest: interests,
},
success: function (response) {
if (response.success) {
$formBlock.addClass("success").removeClass("error");
setTimeout(function () {
resetForm();
$formBlock.find(".form-messages .success-message").fadeOut();
}, 3000);
} else {
$formBlock.addClass("error").removeClass("success");
}
},
error: function () {
$formBlock.addClass("error").removeClass("success");
},
});
});
});
});
