Any idea why, when I send out a message on my contact page that's through netlify forms with Recaptcha, it shows up as blank messages? I utilized an anchor tag as my form submit button using an onclick JS function, but it doesn't enforce that the form be filled out, so it allows for a blank submission and when it is filled out, it still shows as blank, any help is welcomed thank you.
<div class="right-contact">
<form name="contact" data-netlify="true" data-
netlify-recaptcha="true" id="GFG" class="contact-form">
<div class="input-control i-c-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>
Make sure you have a name="field_name" in your textarea and an id. In order to make sure the field is not empty, you need to validate first.
Add "required" to your textarea like this:
<textarea name="field_name" id="field_id" cols="15" rows="8" placeholder="Message Here..." required></textarea>
You can also check if the textarea contains any message by inspecting its value length inside your function.
function myFunction() {
if (document.getElementById('message').value.length == 0 ) {
alert("Please fill out the message field")
}
else {
document.getElementById("GFG").submit();
}
}