WP Forms notification sound

To add a notification sound to WP Forms, you can use the wp_enqueue_script() function to enqueue a custom JavaScript file that plays the sound when a form is submitted. Here’s an example of how you can achieve this:

function wpsnippets_enqueue_notification_sound() {
    // Enqueue the custom JavaScript file
    wp_enqueue_script( 'notification-sound', get_stylesheet_directory_uri() . '/js/notification-sound.js', array( 'jquery' ), '1.0', true );

    // Pass the sound file URL to the JavaScript file
    wp_localize_script( 'notification-sound', 'notificationSound', array(
        'soundUrl' => get_stylesheet_directory_uri() . '/sounds/notification.mp3',
    ) );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_notification_sound' );

In the code above, we’re using the wp_enqueue_script() function to enqueue a custom JavaScript file called notification-sound.js. This file should be placed in the

We’re also using the wp_localize_script() function to pass the URL of the notification sound file to the JavaScript file. This allows us to access the sound file URL in our JavaScript code.

Inside the notification-sound.js file, you can use the following code to play the notification sound when a form is submitted:

jQuery(document).ready(function($) {
    $('form').on('submit', function() {
        var audio = new Audio(notificationSound.soundUrl);
        audio.play();
    });
});

This JavaScript code listens for form submissions (submit event) and creates a new Audio object with the URL of the notification sound file. It then plays the sound using the play() method.

Remember to replace 'notification.mp3' with the actual filename and extension of your notification sound file.

By adding this code to your WordPress theme, you can enhance the user experience by playing a notification sound when a form is submitted. This can be useful for various scenarios, such as contact forms, subscription forms, or any other form where you want to provide an audible feedback to the user.

Examples

Example 1: Adding a Notification Sound to WP Forms Submission

This example demonstrates how to add a notification sound to WP Forms submission using JavaScript. When a user submits a form, a notification sound will play to indicate a successful submission.

jQuery(document).ready(function($) {
    $('form.wpforms-form').on('submit', function() {
        var audio = new Audio('path/to/notification-sound.mp3');
        audio.play();
    });
});

In this code example, we use jQuery to listen for the form submission event. When the form is submitted, we create a new Audio object with the path to the notification sound file. Then, we call the play() method to play the sound.

Example 2: Customizing the Notification Sound for WP Forms

This example demonstrates how to customize the notification sound for WP Forms submission by modifying the code from the previous example. You can replace the default notification sound with your own sound file.

jQuery(document).ready(function($) {
    $('form.wpforms-form').on('submit', function() {
        var audio = new Audio('path/to/custom-notification-sound.mp3');
        audio.play();
    });
});

In this code example, we simply replace the path to the notification sound file with the path to your custom sound file. Make sure to update the path/to/custom-notification-sound.mp3 with the correct file path.

Example 3: Adding a Notification Sound to Specific WP Forms

This example demonstrates how to add a notification sound to specific WP Forms by targeting their form IDs. You can have different notification sounds for different forms.

jQuery(document).ready(function($) {
    $('#form-id1, #form-id2').on('submit', function() {
        var audio = new Audio('path/to/notification-sound.mp3');
        audio.play();
    });
});

In this code example, we use the form IDs (#form-id1 and #form-id2) to target specific WP Forms. When either of these forms is submitted, the notification sound will play. You can add more form IDs separated by commas to include additional forms.