Skip to main content

​
Overview

Arte y Web provides two form components for different use cases: FormMautic for advanced CRM integration with robust spam protection, and FormSimple for basic contact forms powered by Netlify.

​
FormMautic

Advanced form component that integrates with Mautic CRM and includes comprehensive client-side spam protection.

​
Props

​
formId
number
required
The Mautic form ID to load. This corresponds to a form created in your Mautic instance.

​
Features

CRM Integration

Direct integration with Mautic marketing automation platform for lead capture and nurturing.

Spam Protection

Multi-layer spam detection including honeypot, timing checks, gibberish detection, and field validation.

Phone Validation

Real-time phone number validation with pattern matching and letter blocking.

Redirect Override

Automatic redirect to local thank-you page instead of external URLs.

​
Usage

---
import FormMautic from '@/components/FormMautic.astro';
---

<FormMautic formId={5} />

​
Spam Protection Features

The FormMautic component implements multiple layers of spam protection:
Blocks submissions that occur too quickly after page load (< 3 seconds), a common bot behavior.
const timeDiff = Date.now() - loadTime;
if (timeDiff < 3000) {
  // Block submission
}
Hidden field that should remain empty. Bots typically fill all fields, triggering detection.
const honeypot = form.querySelector('input[id$="_fax"]');
if (honeypot && honeypot.value) {
  // Spam detected
}
Analyzes text input for patterns common in bot submissions:
  • Consonant clusters (5+ consonants in a row)
  • Low vowel ratio (< 15% for words > 5 letters)
  • Suspicious mixed case patterns
  • No spaces in long strings
const isGibberish = (str) => {
  // Check consonant clusters
  if (/[^aeiouáéíóú0-9\s\W]{5,}/gi.test(str)) return true;
  
  // Check vowel ratio
  if (vowelCount / letterCount < 0.15) return true;
  
  // Additional checks...
};
Enforces strict phone number validation:
  • No letters allowed
  • Minimum 6 digits required
  • Only allows: numbers, spaces, +, (, ), -
  • Real-time input filtering
  • HTML5 pattern attribute for native validation
phoneField.setAttribute('pattern', '[0-9\\s\\+\\(\\)]+');
phoneField.setAttribute('inputmode', 'tel');

// Real-time validation
phoneField.addEventListener('input', (e) => {
  e.target.value = val.replace(/[^0-9\s\+\(\)\-]/g, '');
});
Validates that at least one field is filled and checks for valid email/phone formats.

​
Configuration

​
Mautic Server URL

The component loads scripts from the Mautic server. Update the URL in the component if using a different instance: 
<script
  is:inline
  src={`https://mautic.buzonamigo.com/form/generate.js?id=${formId}`}
></script>

​
Redirect URL

The component automatically overrides Mautic’s redirect to use a local thank-you page: 
// Location: src/components/FormMautic.astro:136
returnField.value = window.location.origin + "/recibido-ok";
Ensure you have a /recibido-ok page created for successful form submissions.

​
Form Field Detection

The component robustly detects form fields using multiple strategies: 
const nameField = findInput([
  'nombre',
  'f_nombre',
  'firstname',
  'first_name',
  'name',
  'nombre_completo'
]);

​
Error Handling

The component displays user-friendly error messages: 
const showError = (message) => {
  const messageContainer = document.querySelector('.mauticform-message');
  if (messageContainer) {
    messageContainer.innerHTML = message;
    messageContainer.style.color = 'red';
    messageContainer.scrollIntoView({ behavior: 'smooth' });
  }
};
Common error messages:
  • “El nombre no parece válido. Por favor, revísalo.”
  • “El teléfono NO puede contener letras.”
  • “El teléfono debe contener al menos 6 dígitos.”
  • “Por favor, rellena al menos un campo de contacto.”

​
FormSimple

A lightweight contact form powered by Netlify Forms. Perfect for simple contact pages without CRM requirements.

​
Props

No props required - the component is self-contained.

​
Features

Netlify Integration

Automatic form handling via Netlify’s built-in form detection.

Honeypot Protection

Basic spam protection with honeypot field.

Responsive Design

Mobile-optimized with Tailwind CSS styling.

Required Validation

HTML5 required attributes for client-side validation.

​
Usage

---
import FormSimple from '@/components/FormSimple.astro';
---

<section class="py-12">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold text-center mb-8">Contáctanos</h2>
    <FormSimple />
  </div>
</section>

​
Form Fields

The component includes three fields:
​
name
text
required
Contact name - required field with text input
​
email
email
required
Email address - required field with email validation
​
message
textarea
required
Message content - required multiline text area (5 rows)

​
Netlify Configuration

The form includes required Netlify attributes: 
<form
  name="contact"
  method="POST"
  action="/recibido-ok"
  data-netlify="true"
  netlify-honeypot="bot-field"
>
  <input type="hidden" name="form-name" value="contact" />
  <!-- form fields -->
</form>
When deploying to Netlify, the form is automatically detected and submissions are available in the Netlify dashboard under Forms.

​
Styling

The form uses Tailwind CSS utility classes: 
<!-- Container -->
<form class="w-full p-6 space-y-6">
  
  <!-- Input fields -->
  <input
    class="w-full border border-gray-300 rounded-xl p-3 
           focus:outline-none focus:ring-2 focus:ring-blue-500"
  />
  
  <!-- Submit button -->
  <button
    class="w-full bg-blue-600 text-white font-semibold py-3 px-6 
           rounded-xl hover:bg-blue-700 transition"
  >
    Enviar mensaje
  </button>
</form>

​
Comparison

Use FormMautic When...

  • You need CRM integration
  • Lead tracking is important
  • You want advanced spam protection
  • Marketing automation is required
  • You need detailed form analytics

Use FormSimple When...

  • Simple contact form is sufficient
  • Deploying to Netlify
  • No CRM integration needed
  • Minimal setup preferred
  • Basic spam protection is enough

​
Best Practices

1

Create Thank You Page

Create a /recibido-ok page to display after form submission:
---
// src/pages/recibido-ok.astro
import Layout from '@/layouts/Layout.astro';
---

<Layout title="Mensaje Recibido">
  <section class="text-center py-20">
    <h1>¡Gracias por contactarnos!</h1>
    <p>Responderemos en 24 horas.</p>
  </section>
</Layout>
2

Test Spam Protection

For FormMautic, test the spam protection:
  • Submit too quickly (< 3 seconds)
  • Enter gibberish in name field
  • Enter letters in phone field
  • Leave all fields empty
3

Configure Mautic Forms

In Mautic dashboard:
  • Create form with matching field names
  • Set up email notifications
  • Configure post-submit actions
  • Test form in Mautic first
4

Monitor Submissions

  • Check Netlify Forms dashboard (for FormSimple)
  • Review Mautic contacts (for FormMautic)
  • Set up email notifications
  • Monitor for spam submissions

​
Troubleshooting

Check:
  • Mautic server URL is accessible
  • Form ID exists in Mautic
  • JavaScript console for errors
  • Network tab for failed script loads
Component reference: src/components/FormMautic.astro:10-14
Adjust thresholds in the spam protection code:
// Increase time threshold
if (timeDiff < 2000) { // Changed from 3000

// Relax phone validation
if (digitCount < 5) { // Changed from 6
Component reference: src/components/FormMautic.astro:169-233
Ensure:
  • data-netlify="true" attribute is present
  • Hidden form-name input matches form name
  • Form is in the deployed HTML (not added via JS)
  • Honeypot field name matches netlify-honeypot attribute

​
Source Code References

  • FormMautic: src/components/FormMautic.astro:1-296
  • FormSimple: src/components/FormSimple.astro:1-73

Build docs developers (and LLMs) love

Get started for freeTalk to us