Formis - Crea formularios fácilmente

🚀 Guía rápida para usuarios

Aprende a crear y gestionar formularios de manera sencilla y rápida.

❓¿Qué es Formis?

Formis te permite recibir envíos de formularios HTML sin servidor propio. Creás un formulario desde el Dashboard y obtendrás una URL que podés usar en el atributo action de tu formulario.

🛠️ Crear un formulario (desde la app)

Iniciá sesión con tu cuenta (Google) en la app.
En el Dashboard, hacé clic en Crear nuevo formulario y completá un nombre y los orígenes permitidos (dominios que podrán enviar).
Al crear el formulario, la app genera un Form ID y te muestra la API URL. Copiala para usarla en tu sitio.

Consejo: podés editar el formulario luego para cambiar nombre o dominios permitidos.

🎉 Formularios de evento / RSVP (Plan Pro)

Si tu plan incluye formularios de evento, podrás activar la opción Evento / RSVP al crear o editar un formulario. Esto te habilita campos predefinidos y métricas de asistencia en el dashboard.

Campos mínimos que debe enviar tu formulario

Envía un POST al endpoint con formato JSON (o FormData convertido a JSON). Los campos obligatorios son:

fullName (también se aceptan name, nombre, full_name)
email (también correo, email_address) — debe tener formato válido.

Ejemplo de payload JSON

Payload RSVP

{
  "fullName": "Ada Lovelace",
  "email": "ada@example.com",
}

Estados y métricas

Cada envío se guarda con estado inicial registered. Podés cambiarlo a confirmed, checked_in ocancelled desde el dashboard.

Si pasás el estado a checked_in, el sistema registrará automáticamente la hora de check-in. Estos valores se muestran en la tabla de envíos y en el panel de métricas del evento.

También verás contadores de invitados adicionales, capacidad restante y estadísticas de asistencia.

Respuestas y códigos de error comunes

200 → Envío guardado correctamente.
400 → Faltan campos obligatorios o el cuerpo no es válido.
403 → El origen no está permitido o el RSVP está cerrado.
409 → El evento alcanzó su capacidad máxima.

➡️ Usar el formulario en tu web

Pega este snippet en tu HTML y reemplaza la URL por la API URL que te dio la app:

Justo debajo verás un bloque con la URL del endpoint y el enlace público del formulario, cada uno con un botón de copiado rápido.

Snippet HTML

<form id="mi-form" action="https://formis.online/api/submit/TU_USERID/TU_FORMID" method="POST">
  <input type="text" name="nombre" placeholder="Tu nombre" required />
  <input type="email" name="email" placeholder="Tu email" required />
  <textarea name="mensaje" placeholder="Tu mensaje" required></textarea>
  <input type="hidden" name="_redirect" value="https://tusitio.com/formulario/ok" />
  <button type="submit">Enviar</button>
</form>
<script>
  (function () {
    const SITE_KEY = "6LeoauMrAAAAAGAZUo0Ejrj9Lm-HkeaAtAglxi-G";
    let recaptchaPromise = null;
    const form = document.getElementById('mi-form');
    if (!form) return;

    const loadRecaptcha = () => {
      if (!SITE_KEY) return Promise.resolve(null);
      if (window.grecaptcha && typeof window.grecaptcha.ready === 'function') {
        return new Promise((resolve) => window.grecaptcha.ready(() => resolve(window.grecaptcha)));
      }
      if (recaptchaPromise) return recaptchaPromise;
      recaptchaPromise = new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://www.google.com/recaptcha/api.js?render=' + SITE_KEY;
        script.async = true;
        script.onerror = () => {
          recaptchaPromise = null;
          reject(new Error('No se pudo cargar reCAPTCHA'));
        };
        script.onload = () => {
          if (window.grecaptcha && typeof window.grecaptcha.ready === 'function') {
            window.grecaptcha.ready(() => resolve(window.grecaptcha));
          } else {
            recaptchaPromise = null;
            reject(new Error('reCAPTCHA no disponible'));
          }
        };
        document.head.appendChild(script);
      });
      return recaptchaPromise;
    };

    const executeRecaptcha = async () => {
      const client = await loadRecaptcha();
      if (!client || typeof client.execute !== 'function') return null;
      return client.execute(SITE_KEY, { action: 'formis_embed_submit' });
    };

    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const submitButton = form.querySelector('[type="submit"]');
      if (submitButton) submitButton.setAttribute('disabled', 'true');

      const data = Object.fromEntries(new FormData(form).entries());

      if (SITE_KEY) {
        const token = await executeRecaptcha();
        if (!token) {
          alert('No pudimos validar la protección anti-spam. Intentá nuevamente.');
          if (submitButton) submitButton.removeAttribute('disabled');
          return;
        }
        data._recaptcha = token;
      }

      const response = await fetch(form.action, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });

      if (submitButton) submitButton.removeAttribute('disabled');

      if (response.ok) {
        alert('¡Gracias! Recibimos tu respuesta.');
        form.reset();
      } else {
        const payload = await response.json().catch(() => null);
        alert(payload?.error ?? 'No se pudo enviar el formulario.');
      }
    });
  })();
</script>

Ejemplo: enviar con fetch (JavaScript)

const SITE_KEY = '6LeoauMrAAAAAGAZUo0Ejrj9Lm-HkeaAtAglxi-G'
let recaptchaPromise = null

const loadRecaptcha = () => {
  if (!SITE_KEY) return Promise.resolve(null)
  if (window.grecaptcha && typeof window.grecaptcha.ready === 'function') {
    return new Promise((resolve) => window.grecaptcha.ready(() => resolve(window.grecaptcha)))
  }
  if (recaptchaPromise) return recaptchaPromise
  recaptchaPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://www.google.com/recaptcha/api.js?render=' + SITE_KEY
    script.async = true
    script.onerror = () => {
      recaptchaPromise = null
      reject(new Error('No se pudo cargar reCAPTCHA'))
    }
    script.onload = () => {
      if (window.grecaptcha && typeof window.grecaptcha.ready === 'function') {
        window.grecaptcha.ready(() => resolve(window.grecaptcha))
      } else {
        recaptchaPromise = null
        reject(new Error('reCAPTCHA no disponible'))
      }
    }
    document.head.appendChild(script)
  })
  return recaptchaPromise
}

const executeRecaptcha = async (action = 'formis_custom_submit') => {
  const client = await loadRecaptcha()
  if (!client || typeof client.execute !== 'function') return null
  return client.execute(SITE_KEY, { action })
}

const form = document.querySelector('#mi-form')
form.addEventListener('submit', async (e) => {
  e.preventDefault()
  const submitButton = form.querySelector('[type="submit"]')
  if (submitButton) submitButton.setAttribute('disabled', 'true')

  const formData = new FormData(form)
  const body = Object.fromEntries(formData.entries())

  if (SITE_KEY) {
    const token = await executeRecaptcha()
    if (!token) {
      alert('No pudimos validar la protección anti-spam. Intentá nuevamente.')
      if (submitButton) submitButton.removeAttribute('disabled')
      return
    }
    body._recaptcha = token
  }

  const res = await fetch('https://formis.online/api/submit/TU_USERID/TU_FORMID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  })

  if (submitButton) submitButton.removeAttribute('disabled')

  if (res.ok) {
    alert('Envío realizado')
    form.reset()
  } else {
    const payload = await res.json().catch(() => null)
    alert(payload?.error ?? 'Error en el envío')
  }
})

El endpoint acepta cualquier campo del formulario; los valores llegarán a la sección Envíos del formulario en tu Dashboard.

Todas las integraciones usan Google reCAPTCHA v3 de manera automática. No tenés que generar claves propias: ya viene activado para tus formularios y protege cada envío contra spam antes de guardarlo.

Si tu formulario HTML usa el atributo action, podés añadir un campo oculto _redirect con la URL de tu página de gracias. Al enviarse correctamente, Formis redirigirá al usuario allí.

Snippets listos según la plataforma

En la vista de Envíos abrí el botón Ver snippets embebibles para acceder a la tarjeta Snippets de inserción, donde podés elegir y copiar el código de acuerdo al destino.

HTML estándar: bloque con estilos básicos y script que envía el formulario vía fetch.
WordPress: envuelto en  para pegarlo en Gutenberg o widgets tipo "HTML personalizado".
Wix: listo para el elemento Embed → Embed a widget, con CSS y JavaScript necesarios.
Link en bio: incluye un botón que abre la versión alojada y un snippet <iframe> para plataformas que lo aceptan.

Además, cada formulario cuenta con una versión pública amigable, por ejemplo https://formis.online/embed/mi-evento, lista para compartir o enlazar desde una bio. Si aún no ves un slug actualizá el formulario para generarlo.

🔍 Probar y verificar envíos

Tras enviar desde tu formulario, abrí Dashboard → Formularios → Ver envíos para ver el registro.
Usá la función de descarga CSV para exportar registros.
Para pruebas rápidas podés usar curl o Postman para enviar un POST al endpoint.

🤓 Consejos y buenas prácticas

Restringí los orígenes permitidos (dominios) para evitar envíos no deseados.
Usá campos ocultos o tokens si necesitás asociar envíos a campañas u orígenes concretos.
Si querés recibir notificaciones por email, agregá la información de tu servidor SMTP en la configuración del formulario.

✨ Configuración de SMTP para notificaciones por email

Para la configuración SMTP necesitás completar:

Servidor (host): dirección del servidor SMTP (p.ej. smtp.tudominio.com).
Puerto: 587 (STARTTLS) o 465 (SSL/TLS) son los más comunes.
Usuario y contraseña: credenciales de la cuenta que enviará los emails.
Seguridad: preferí TLS/SSL; evitá enviar credenciales sin cifrado.
From/Reply-To: configurá direcciones claras (p.ej. no-reply@tudominio.com) y dominios con SPF/DKIM para mejorar entregabilidad.
Pruebas: enviá un correo de prueba desde el Dashboard y revisá logs y carpeta de SPAM.

Recomendación: si no querés gestionar SMTP, podés usar un proveedor que ofrezca SMTP (SendGrid, Mailgun, Amazon SES, etc.) y copiar sus credenciales SMTP en la app.

Integración por defecto

Si tenes el plan Pro ya contas con una integración con el SMTP de Resend, podés activarlo y usarlo sin configurar nada.

Documentación