¿Alguna idea de por qué, cuando envío un mensaje en mi página de contacto a través de formularios de netlify con Recaptcha, aparece como mensajes en blanco? Utilicé una etiqueta de anclaje como mi botón de envío de formulario usando una función JS onclick, pero no exige que se complete el formulario, por lo que permite un envío en blanco y cuando se completa, todavía se muestra en blanco, cualquier la ayuda es bienvenida gracias.
<div class="right-contact"> <form name="contact" data-netlify="true" data- netlify-recaptcha="true" id="GFG" class="contact-form"> <div class="input-control ic-2"> <input name="name" id="name" type="text" required placeholder="YOUR NAME"> <input name="email" id="email" type="email" required placeholder="YOUR EMAIL"> </div> <div class="input-control"> <input name="subject" id="subject" type="text" required placeholder="ENTER SUBJECT"> </div> <div class="input-control"> <textarea type="text" name="message" id="message" cols="15" rows="8" required placeholder="Message Here..."></textarea> </div> <div data-netlify-recaptcha="true"></div> <div class="submit-btn"> <a href="#" method="POST" type="submit" onclick="myFunction()" class="main-btn"> <span class="btn-text">Send Message</span> <!-- <span class="btn-icon"><i class="fas fa-download"></i></span> --> </a> </div> </form> </div> <script src="js/site.js"></script> <script> function myFunction() { document.getElementById("GFG").submit(); } </script>Asegúrese de tener un nombre = "field_name" en su área de texto y una identificación. Para asegurarse de que el campo no esté vacío, primero debe validarlo.
Agregue "requerido" a su área de texto de esta manera:
<textarea name="field_name" id="field_id" cols="15" rows="8" placeholder="Message Here..." required></textarea>También puede verificar si el área de texto contiene algún mensaje al inspeccionar la longitud de su valor dentro de su función.
function myFunction() { if (document.getElementById('message').value.length == 0 ) { alert("Please fill out the message field") } else { document.getElementById("GFG").submit(); } }