How to Get Mail Notification when user Submit Form

How to Get Mail Notification when user Submit Form – Create a simple form on your website (using HTML, CSS, JavaScript). If you want to receive an email notification every time a user submits a form on your website, here’s a simple, professional approach that uses HTML, CSS, JavaScript, and WordPress’s wp_mail function. This ensures you get notified instantly, and the user has a smooth experience.

How to Get Mail Notification when user Submit Form

in Short View

• A simple form (HTML + CSS + JS)
• A shortcode to embed it in WordPress
• PHP to send mail to admin (using wp_mail or mail)
• Sending all form fields in an array to include in the email body.

1. HTML

<form id="notifyForm" class="notify-form">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send</button>
</form>
<div id="formSuccess" style="display:none; color:green;">Thank you! We received your message.</div>

We start by creating a clean, simple form. It includes fields for the user’s name, email, and message. The form is structured with clear placeholders so visitors immediately understand what to enter. It also has a submit button that triggers the process. Underneath the form, there’s a hidden success message which appears after the form is successfully submitted.

How to Get Mail Notification when user Submit Form

2.CSS (make it neat)

.notify-form {
  max-width: 400px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notify-form input,
.notify-form textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.notify-form button {
  padding: 12px;
  border: none;
  background: #0073aa;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.notify-form button:hover {
  background: #005177;
}

Styling with CSS

To make sure the form looks neat on your website, we add some basic CSS. This centers the form on the page and sets a maximum width, keeping it readable on all devices. The input fields and textarea have padding and subtle borders, giving a polished appearance. The submit button uses a solid blue background that changes to a darker shade on hover, inviting the user to click.

<script>
document.getElementById("notifyForm").addEventListener("submit", function(e) {
  e.preventDefault();
  const form = e.target;
  const formData = new FormData(form);

  fetch('/wp-admin/admin-ajax.php?action=submit_notify_form', {
    method: 'POST',
    body: formData
  })
  .then(res => res.text())
  .then(data => {
    console.log(data);
    form.style.display = 'none';
    document.getElementById("formSuccess").style.display = 'block';
  })
  .catch(err => console.error("Form submit error:", err));
});
</script>

Handling Submission with JavaScript (AJAX)

Instead of reloading the entire page when someone submits the form, we use JavaScript to handle the submission with AJAX. When the form is submitted, JavaScript stops the default page reload. It collects the form data and sends it to a special URL (/wp-admin/admin-ajax.php) provided by WordPress. This makes the process fast and seamless. Once the server confirms everything worked, the script hides the form and shows a friendly “Thank you” message to the user.

// Handle ajax
add_action('wp_ajax_submit_notify_form', 'handle_notify_form');
add_action('wp_ajax_nopriv_submit_notify_form', 'handle_notify_form');

function handle_notify_form() {
    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    $admin_email = get_option('admin_email'); // default admin email
    $subject = "New Form Submission from $name";
    $body = "You've received a new message:\n\n" .
            "Name: $name\n" .
            "Email: $email\n" .
            "Message: $message\n";

    // Using wp_mail (recommended)
    wp_mail($admin_email, $subject, $body);

    echo "Success";
    wp_die();
}

Sending Email with PHP

On the server side, we create a function in WordPress that listens for the AJAX request. It sanitizes the user’s input (making sure it’s safe), then builds a simple text email with the details. Using WordPress’s wp_mail function, it sends this email to your site’s admin address. This way, every submission ends up directly in your inbox, ready for you to review.

Optional Both HTML, CSS and Javascript you can keep in signle shortcode using

add_shortcode('notify_form', 'your_function_name');  //to render [notify_form]

5.Shortcode (to put anywhere in WP)

add_shortcode('notify_form', function() {
    ob_start();
    ?>
    <form id="notifyForm" class="notify-form">
      <input type="text" name="name" placeholder="Your Name" required>
      <input type="email" name="email" placeholder="Your Email" required>
      <textarea name="message" placeholder="Your Message" required></textarea>
      <button type="submit">Send</button>
    </form>
    <div id="formSuccess" style="display:none; color:green;">Thank you! We received your message.</div>
    <script>
    document.getElementById("notifyForm").addEventListener("submit", function(e) {
      e.preventDefault();
      const form = e.target;
      const formData = new FormData(form);
      fetch('/wp-admin/admin-ajax.php?action=submit_notify_form', {
        method: 'POST',
        body: formData
      })
      .then(res => res.text())
      .then(data => {
        console.log(data);
        form.style.display = 'none';
        document.getElementById("formSuccess").style.display = 'block';
      })
      .catch(err => console.error("Form submit error:", err));
    });
    </script>
    <?php
    return ob_get_clean();
});

6. use From Address with your site name and site mail to build trust

Add this in your functions.php:

phpCopyEdit// Set custom FROM NAME
add_filter( 'wp_mail_from_name', function( $original ) {
    return get_bloginfo('name'); // your site title
});

// Set custom FROM EMAIL
add_filter( 'wp_mail_from', function( $original ) {
    return 'wordpress@' . str_replace( ['https://','http://','www.'], '', get_home_url() );
});

Using Your Site’s Name and Domain in the Email

To build trust and make your emails look professional, we set a custom “From” address and name. Instead of showing something generic, your emails will come from something like:

sqlCopyEditFrom: The Fallen <wordpress@thefallen.in>

This is done by setting special headers when we call wp_mail. It pulls your site’s title and domain dynamically, so you never have to update it manually if your site changes.

Optional Fully Improved Code

function handle_notify_form() {
    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    $admin_email = get_option('admin_email'); // your admin mail
    $subject = "New Form Submission from $name";
    $body = "You've received a new message:\n\n" .
            "Name: $name\n" .
            "Email: $email\n" .
            "Message: $message\n";

    $site_name = get_bloginfo('name');
    $site_domain = str_replace(['https://','http://','www.'], '', get_home_url());
    $headers = array(
        'From: ' . $site_name . ' <wordpress@' . $site_domain . '>'
    );

    wp_mail($admin_email, $subject, $body, $headers);

    echo "Success";
    wp_die();
}

Making It Reusable with a Shortcode

To keep things flexible, we wrap the entire form into a WordPress shortcode. This means you can simply place [notify_form] into any page, post, or widget, and the form will appear there instantly. It’s an easy way to keep your site organized and avoid duplicating code.

What Happens for You and the User

Once this is all set up, the process is seamless. A visitor comes to your site, fills out their details, and clicks send. They instantly see a thank you message on the page, and at the same time, you receive an email containing all the information they submitted. This keeps your communication flowing and shows the user that your site is professional and responsive.

In summary, we combined a user-friendly form with polished styling, used JavaScript to handle submissions without reloading the page, and tied it into WordPress so that each submission sends you an immediate notification email. By customizing the sender’s name and email address, your messages look trustworthy and aligned with your brand. The shortcode approach makes it easy to place the form anywhere on your site.