表单联系页面提交

Question

知道为什么当我通过带有 Recaptcha 的 netlify 表单在我的联系页面上发送一条消息时，它显示为空白消息吗？我使用一个锚标记作为我的表单提交按钮，使用 onclick JS 函数，但它不强制填写表单，所以它允许空白提交，当它被填写时，它仍然显示为空白，任何欢迎帮助谢谢。

             <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>

Answer 1

确保您的文本区域中有一个名称=“field_name”和一个 ID。为了确保该字段不为空，您需要先进行验证。

像这样将“必填”添加到您的文本区域：

<textarea name="field_name" id="field_id" cols="15" rows="8" placeholder="Message Here..." required></textarea>

您还可以通过在函数中检查其值长度来检查文本区域是否包含任何消息。

function myFunction() {    
    if (document.getElementById('message').value.length == 0 ) {
        alert("Please fill out the message field")
    }
    else {
        document.getElementById("GFG").submit();
    }
}

表单联系页面提交

form contact page submission

html

javascript

css

sass