function display_contact_form() {
$validation_messages = [];
$success_message = '';
if ( isset( $_POST['contact_form'] ) ) {
//Sanitize the data
$full_name = isset( $_POST['full_name'] ) ? sanitize_text_field( $_POST['full_name'] ) : '';
$email     = isset( $_POST['email'] ) ? sanitize_text_field( $_POST['email'] ) : '';
$subject   = isset( $_POST['subject'] ) ? sanitize_text_field( $_POST['subject'] ) : '';
$message   = isset( $_POST['message'] ) ? sanitize_textarea_field( $_POST['message'] ) : '';
//Validate the data
if ( strlen( $full_name ) === 0 ) {
$validation_messages[] = esc_html__( 'Please enter a valid name.', 'twentytwentyone' );
}
if ( strlen( $email ) === 0 or
! is_email( $email ) ) {
$validation_messages[] = esc_html__( 'Please enter a valid email address.', 'twentytwentyone' );
}
if ( strlen( $subject ) === 0 ) {
$validation_messages[] = esc_html__( 'Please enter a valid subject.', 'twentytwentyone' );
}
if ( strlen( $message ) === 0 ) {
$validation_messages[] = esc_html__( 'Please enter a valid message.', 'twentytwentyone' );
}
//Send an email to the WordPress administrator if there are no validation errors
if ( empty( $validation_messages ) ) {
$mail    = get_option( 'admin_email' );
$subject = 'New message from ' . $full_name;
$message = $message . ' - The email address of the customer is: ' . $mail;
wp_mail( $mail, $subject, $message );
$success_message = esc_html__( 'Your message has been successfully sent.', 'twentytwentyone' );
}
}
//Display the validation errors
if ( ! empty( $validation_messages ) ) {
foreach ( $validation_messages as $validation_message ) {
echo '<div class="validation-message">' . esc_html( $validation_message ) . '</div>';
}
}
//Display the success message
if ( strlen( $success_message ) > 0 ) {
echo '<div class="success-message">' . esc_html( $success_message ) . '</div>';
}
?>
<!-- Echo a container used that will be used for the JavaScript validation -->
<div id="validation-messages-container"></div>
<section id="bodyMainFormEmail">
<form id="contact-form" action="<?php echo esc_url( get_permalink() ); ?>"
method="post">
<input type="hidden" name="contact_form">
<div class="form-section">
<label class="label_form-email" for="full-name"><?php echo esc_html( 'Full Name', 'twentytwentyone' ); ?></label>
<input class="all_input-email" type="text" id="full-name" name="full_name" placeholder="Full Name">
</div>
<div class="form-section">
<label class="label_form-email" for="email"><?php echo esc_html( 'Email', 'twentytwentyone' ); ?></label>
<input class="all_input-email input-email" type="text" id="email" name="email" placeholder="Email">
</div>
<div class="form-section">
<label class="label_form-email" for="subject"><?php echo esc_html( 'Subject', 'twentytwentyone' ); ?></label>
<input class="all_input-email" type="text" id="subject" name="subject" placeholder="Subject">
</div>
<div class="form-section">
<label class="label_form-email" for="message"><?php echo esc_html( 'Message', 'twentytwentyone' ); ?></label>
<textarea class="all_input-email message_email" id="message" name="message" placeholder="Message"></textarea>
</div>
<input class="input_submit-email" type="submit" id="contact-form-submit" value="<?php echo esc_attr( 'submit', 'twentytwentyone' ); ?>">
</form>
</section>
<?php
}

const contactFormSubmit = document.getElementById('contact-form-submit');
contactFormSubmit.addEventListener('click', validateForm);
function validateForm(event) {
event.preventDefault();
event.stopPropagation();
//Full name
const fullName = document.getElementById('full-name') !== null ?
document.getElementById('full-name').value :
'';
//Email
const email = document.getElementById('email') !== null ?
document.getElementById('email').value :
'';
//subject
const subject = document.getElementById('subject') !== null ?
document.getElementById('subject').value :
'';
//Message
const message = document.getElementById('message') !== null ?
document.getElementById('message').value :
'';
const validationMessages = [];
if (fullName.length === 0) {
validationMessages.push('Please enter a valid name.');
}
if (email.length === 0 || !emailIsValid(email)) {
validationMessages.push('Please enter a valid email address.');
}
if (subject.length === 0) {
validationMessages.push('Please enter a valid subject.');
}
if (message.length === 0) {
validationMessages.push('Please enter a valid message.');
}
if (validationMessages.length === 0) {
//Submit the form
document.getElementById('contact-form').submit();
} else {
//Delete all the existing validation messages from the DOM
const parent = document.getElementById('validation-messages-container');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
//Add the new validation messages to the DOM
validationMessages.forEach(function(validationMessage, index) {
//add message to the DOM
const divElement = document.createElement('div');
divElement.classList.add('validation-message');
const node = document.createTextNode(validationMessage);
divElement.appendChild(node);
const element = document.getElementById('validation-messages-container');
element.appendChild(divElement);
});
}
}
/**
* A simple function that verify the email with a regular expression.
*
* @param email
* @returns {boolean}
*/
function emailIsValid(email) {
const regex = /\S+@\S+\.\S+/;
return regex.test(email);
}

// Add this code to your functions.php file or your custom plugin
// Hook the display_contact_form() function to the 'the_content' filter
add_filter('the_content', 'display_contact_form');
function display_contact_form($content) {
$validation_messages = [];
$success_message = '';
if (isset($_POST['contact_form'])) {
// Your validation and email sending logic goes here
// ...
// After processing the form, you can set the success message
$success_message = esc_html__('Your message has been successfully sent.', 'twentytwentyone');
}
// Build the contact form HTML
ob_start();
?>
<!-- Echo the HTML markup for the contact form -->
<!-- ... Your contact form HTML code here ... -->
<?php
// Retrieve the contact form HTML from the output buffer
$contact_form = ob_get_clean();
// Append the success message to the contact form HTML
if (strlen($success_message) > 0) {
$contact_form .= '<div class="success-message">' . esc_html($success_message) . '</div>';
}
// Return the modified content
return $contact_form . $content;
}