> ## Documentation Index
> Fetch the complete documentation index at: https://docs.piriod.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Signup Forms

Signup Forms es el formulario de suscripción de tu negocio. Tus clientes pueden elegir un plan, ingresar sus datos de facturación y configurar su método de pago — todo en un flujo guiado de tres pasos.

Puedes instalarlo como una página alojada (sin código) o incrustarlo directamente en tu sitio o aplicación (low-code).

<iframe src="https://www.youtube.com/embed/vALMPry8YFM" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

***

## Crear un Signup Form

Ve a **Componentes → Signup Forms → Nuevo**. Asigna un nombre al formulario para identificarlo internamente y configura cada sección:

***

### Paso 1 — Productos

Define qué planes y complementos estarán disponibles para el cliente.

<Frame>
  <img src="https://mintcdn.com/piriod-d406ac55/CyasDKczYvaYYs01/images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.37.png?fit=max&auto=format&n=CyasDKczYvaYYs01&q=85&s=060fa004744a451332fa59105f56ceca" alt="Captura De Pantalla 2026 04 30 A La(s) 18 57 37" width="2160" height="1180" data-path="images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.37.png" />
</Frame>

**Planes**

1. Haz clic en **Agregar plan** y selecciona un producto y plan de tu lista
2. Agrega el nombre y descripción que verá tu cliente
3. Opcionalmente define una cantidad mínima

**Complementos**

1. Haz clic en **Agregar complemento** y selecciona uno de tu lista
2. Agrega nombre y descripción para el cliente
3. Opcionalmente define una cantidad mínima

**Otras opciones**

* **Permitir selección de múltiples planes** — activa esta opción si quieres que el cliente pueda suscribirse a más de un plan a la vez

> Si aún no tienes productos o planes creados, revisa las guías de Productos y Planes.

Haz clic en **Continuar** para avanzar al siguiente paso.

***

### Paso 2 — Facturación

Configura cómo se capturarán los datos de facturación del cliente.

<Frame>
  <img src="https://mintcdn.com/piriod-d406ac55/CyasDKczYvaYYs01/images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.46.png?fit=max&auto=format&n=CyasDKczYvaYYs01&q=85&s=ec0e128ed79534dc151ba739ba6da183" alt="Captura De Pantalla 2026 04 30 A La(s) 18 57 46" width="2182" height="1174" data-path="images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.46.png" />
</Frame>

* **Tipo de consumidor** — define si el formulario acepta empresas, personas naturales o ambos
* **Cobertura** — selecciona los países donde estarán disponibles tus planes
* **Tipos de factura** — selecciona los tipos de documento que el cliente podrá elegir al completar sus datos
* **Etiquetas personalizadas** — personaliza los nombres de los campos Nombre, Estado e ID Fiscal que verá el cliente en el formulario

Haz clic en **Continuar**.

***

### Paso 3 — Pago

Configura el método de pago y las opciones avanzadas del formulario.

<Frame>
  <img src="https://mintcdn.com/piriod-d406ac55/CyasDKczYvaYYs01/images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.54.png?fit=max&auto=format&n=CyasDKczYvaYYs01&q=85&s=f14dbcd22768f492d655144247d3e4cf" alt="Captura De Pantalla 2026 04 30 A La(s) 18 57 54" width="2186" height="1174" data-path="images/Captura-de-pantalla-2026-04-30-a-la(s)-18.57.54.png" />
</Frame>

* **Solicitar inscripción de tarjeta** — activa esta opción si quieres que el cliente registre una tarjeta al suscribirse. Si está desactivada, el cliente recibirá la factura con un link al portal de pagos

#### **Opciones avanzadas**

* **Redireccionamiento por defecto** — URL a la que se redirige al cliente después de completar la suscripción
* **Webhook URL** — URL para notificar a tu sistema cuando ocurre una suscripción exitosa
* **Procesamiento instantáneo** *(Beta)* — procesa la suscripción de inmediato al completar el formulario
* **Mantener información en caché** *(Beta)* — conserva los datos del cliente entre sesiones

Haz clic en **Crear y poner en vivo** para publicar el formulario.

***

## Instalación no-code — Página alojada

La opción más rápida. Piriod genera una página lista para compartir sin necesidad de modificar tu sitio.

1. Ve al formulario creado y haz clic en **Instalación → Página alojada**
2. Personaliza el layout y los encabezados de la página
3. Haz clic en **Guardar**
4. Usa **Ir a la página alojada** para ver y compartir el link

> Activa o desactiva el **Modo de prueba** desde la parte superior del formulario antes de publicar.

***

## Instalación low-code — Incrustado en tu sitio

Incrusta el formulario directamente en tu aplicación o sitio web. Recomendado para negocios SaaS o que necesitan mayor flexibilidad en su flujo de cobro.

Copia el fragmento desde **Instalación → Fragmento de JavaScript** y pégalo antes del cierre de `</body>` en las páginas donde quieres que aparezca el formulario.

```html theme={null}
<div id="piriod-widget"></div>
<script>
  window.piriodSettings = {
    service: "signupForms",
    publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY"
  };
  !function(){var e=document.getElementById("piriod-widget");if(!e)return console.log('Missing <div id="piriod-widget"></div>, create this to mounted.');var i=document.createElement("iframe");i.src="https://js.piriod.com/signup_forms/"+window.piriodSettings.publishableKey,i.id="piriod-widget",i.width="100%",i.height="740",i.style="border:none",e.appendChild(i)}();
</script>
```

Si usas React, Vue u otro framework, inyecta el script de la forma convencional de cada framework.

***

### Opciones de personalización

Usa `piriodSettings.options` para personalizar el comportamiento del formulario.

#### `options.backgroundColor`

Aplica un color de fondo al formulario. Acepta nombres de color CSS, hex o rgba.

```javascript theme={null}
window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  options: {
    backgroundColor: "white"
  }
};
```

Valor por defecto: `transparent`

#### `options.selectedPlans`

Inicializa el formulario con planes preseleccionados. Requiere que el campo **ID personalizado** esté definido en la configuración del plan.

```javascript theme={null}
window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  options: {
    selectedPlans: [
      {
        custom_id: "MY_CUSTOM_ID",
        quantity: 3
      }
    ]
  }
};
```

***

### Información de contexto

Usa `piriodSettings.context` para pre-completar campos del formulario cuando ya tienes datos del usuario.

#### `context.customer`

Pre-completa los datos de facturación. Campos disponibles: `address`, `country`, `email`, `name`, `tax_id`.

```javascript theme={null}
window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    customer: {
      country: "US",
      email: "user@email.com",
      tax_id: "11111111-1"
    }
  }
};
```

#### `context.metadata`

Añade metadatos a la suscripción generada por el formulario.

```javascript theme={null}
window.piriodSettings = {
  service: "signupForms",
  publishableKey: "YOUR SIGNUP FORM PUBLISHABLE KEY",
  context: {
    metadata: {
      userID: "123456",
      foo: "foo"
    }
  }
};
```

***

### Eventos de JavaScript

#### `piriod_signup_form_subscription`

Se emite cuando el proceso de suscripción finaliza. Devuelve `status` con valor `succeeded` o `failed`.

```javascript theme={null}
window.addEventListener('message', function(e) {
  if (e.data.event === 'piriod_signup_form_subscription' && e.origin === 'https://js.piriod.com') {
    if (e.data.status === 'succeeded') {
      console.log('subscription created successfully');
    } else {
      console.log('subscription creation failed');
    }
  }
});
```