How to Prevent Spam Submissions with your Contact Form

Preventing spam submissions in your contact form is crucial for maintaining the integrity of your data and ensuring that you only receive legitimate inquiries. Using Fabform, you can implement several strategies to minimize spam, leveraging its built-in features and additional techniques. Here’s a comprehensive guide on how to prevent spam submissions with Fabform:

1. Use a Honeypot Field

A honeypot field is an invisible field in your form that humans won’t see but bots might fill out. If this field is filled out, it’s likely a bot.

HTML Form with Honeypot Field

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form with Honeypot</title>
    <style>
        .honeypot {
            display: none;
        }
    </style>
</head>
<body>
    <form id="contactForm" action="https://fabform.io/submit" method="POST" data-fabform>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>

        <!-- Honeypot field -->
        <div class="honeypot">
            <label for="honeypot">Leave this field empty:</label>
            <input type="text" id="honeypot" name="honeypot">
        </div>

        <button type="submit">Submit</button>
    </form>

    <script src="https://fabform.io/js/fabform.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Fabform.init({
                beforeSubmit: function(formData) {
                    // Check honeypot field before submitting
                    if (formData.honeypot) {
                        console.log('Bot detected.');
                        return false; // Prevent form submission
                    }
                    return true; // Allow form submission
                }
            });
        });
    </script>
</body>
</html>

2. Enable CAPTCHA

CAPTCHA is a common method to prevent automated submissions by requiring users to perform a task that is easy for humans but difficult for bots. Fabform supports CAPTCHA integration.

HTML Form with Google reCAPTCHA

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form with reCAPTCHA</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <form id="contactForm" action="https://fabform.io/submit" method="POST" data-fabform>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>

        <!-- Google reCAPTCHA -->
        <div class="g-recaptcha" data-sitekey="your-site-key"></div>

        <button type="submit">Submit</button>
    </form>

    <script src="https://fabform.io/js/fabform.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Fabform.init({
                beforeSubmit: function(formData) {
                    if (grecaptcha.getResponse() === '') {
                        alert('Please complete the CAPTCHA.');
                        return false; // Prevent form submission
                    }
                    return true; // Allow form submission
                }
            });
        });
    </script>
</body>
</html>

3. Server-Side Validation

Always validate form submissions server-side to ensure that any spam that gets past client-side checks is caught. Here’s a simple example using Node.js:

Node.js Example

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/submit', (req, res) => {
    // Honeypot check
    if (req.body.honeypot) {
        console.log('Bot detected.');
        return res.status(400).send('Bot detected.');
    }

    // reCAPTCHA validation (replace with actual secret and validation logic)
    const recaptchaResponse = req.body['g-recaptcha-response'];
    if (!recaptchaResponse) {
        return res.status(400).send('Please complete the CAPTCHA.');
    }

    // Process the form submission
    console.log('Form submitted successfully:', req.body);
    res.status(200).send('Form submitted successfully.');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

4. Rate Limiting

Implement rate limiting to prevent bots from submitting forms repeatedly in a short period. This can be done using middleware like express-rate-limit in a Node.js environment.

Example with `express-rate-limit`

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15 minutes
    max: 100, // limit each IP to 100 requests per windowMs
    message: "Too many requests from this IP, please try again later."
});

app.use('/submit', limiter);

Conclusion

By combining these techniques—honeypot fields, CAPTCHA, server-side validation, and rate limiting—you can significantly reduce spam submissions in your contact forms. Fabform provides the flexibility to implement these strategies easily, ensuring that your form submissions are genuine and reducing the likelihood of spam.