Creating a contact form for a WordPress theme

I have created a contact form for my WordPress theme so that even unregistered users can message me.

I have installed my template on localhost to make sure my contact form codes work without any problem.

The problem I'm having is that when I click the submit button, instead of showing a successful submission message or any other error, it immediately jumps to the post page and no email is sent.

The code I put in the functions.php file:

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
}

Edit:

Contact form script:

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);
}

The code you provided seems to be missing the necessary hook to display the contact form. In WordPress, you typically use hooks to execute functions at specific points during the execution of a page.

To display the contact form, you need to hook the display_contact_form() function to a suitable WordPress action or filter. Here's an example of how you can modify the code to display the form correctly:

// 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;
}