Send Email from an HTML Form

Sending an email from an HTML form using Fabform involves setting up your form to submit data to Fabform’s backend and configuring Fabform to forward the form submissions to your email. Here’s a step-by-step guide:

Step 1: Set Up Your Fabform Account

Sign Up: Create an account on the Fabform website.
Create a New Form: After logging in, create a new form. This will provide you with a unique form endpoint URL.

Step 2: Create Your HTML Form

Design your HTML form and set the action attribute to the Fabform endpoint URL. Include all necessary fields like name, email, and message.

Example HTML Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
</head>
<body>
    <form id="contactForm" action="https://fabform.io/f/your-form-id" 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>

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

    <script src="https://fabform.io/js/fabform.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            Fabform.init();
        });
    </script>
</body>
</html>

Replace your-form-id with the actual form ID provided by Fabform.

Step 3: Configure Fabform to Send Email

Log In to Fabform: Access your Fabform account and navigate to the form you created.
Email Notifications: Set up email notifications in the Fabform dashboard. Configure it to send form submissions to your desired email address.

Fabform Dashboard Settings

Form Settings: Go to the form settings page.
Email Notifications: Enable email notifications and enter the recipient email address.

Step 4: Add Spam Prevention (Optional but Recommended)

To prevent spam, you can add a honeypot field and reCAPTCHA to your form.

Adding a Honeypot Field

<style>
    .honeypot {
        display: none;
    }
</style>

<form id="contactForm" action="https://fabform.io/f/your-form-id" method="POST" data-fabform>
    <!-- Other fields here -->

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

    <!-- Submit button here -->
</form>

Adding Google reCAPTCHA

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="contactForm" action="https://fabform.io/f/your-form-id" method="POST" data-fabform>
    <!-- Other fields here -->

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

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

<script>
    document.addEventListener('DOMContentLoaded', function() {
        Fabform.init({
            beforeSubmit: function(formData) {
                if (document.getElementById('honeypot').value !== '') {
                    console.log('Bot detected.');
                    return false; // Prevent form submission
                }
                if (grecaptcha.getResponse() === '') {
                    alert('Please complete the CAPTCHA.');
                    return false; // Prevent form submission
                }
                return true; // Allow form submission
            }
        });
    });
</script>

Step 5: Test Your Form

Submit a Test Entry: Fill out your form and submit it.
Check Your Email: Ensure that you receive the email with the form submission details.
Verify Data: Log in to your Fabform dashboard to verify that the submission data is correctly recorded.

Conclusion

By following these steps, you can easily set up an HTML form to send emails using Fabform. This setup leverages Fabform’s backend to handle form submissions and forward them to your email, allowing you to manage inquiries efficiently without dealing with server-side coding. Additionally, implementing spam prevention measures ensures that you receive only legitimate submissions.