In this tutorial, I will show you step by step how to successfully submit a form using Elementor, accompanied by an audio note to confirm the correct submission of the form. You will learn how to configure your forms efficiently, ensuring that each submission is successful and you receive all the necessary information. If you want to improve the functionality of your website and optimize the user experience, this tutorial is for you.
Convert your text to audio from this link.
Insert the form widget and add the following IDs to the form and Button:
-Form ID: form_con_audio
-Button ID: my-sound
Now you will only need to modify the URL of your custom audio on line 13 of the code.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('.elementor-form');
if (!form) {
console.error('No se encontró el formulario de Elementor.');
return;
}
var submitButton = form.querySelector('.elementor-button[type="submit"]');
if (!submitButton) {
console.error('No se encontró el botón de enviar dentro del formulario de Elementor.');
return;
}
var audio = new Audio('URL-DE-TU-AUDIO-PERSONALIZADO');
form.addEventListener('submit', function(event) {
event.preventDefault();
if (form.checkValidity()) {
audio.play();
} else {
console.log('Por favor completa todos los campos obligatorios.');
}
});
});
</script>
