Referencia del Widget de Formulario

El widget de Formulario de Laburen te permite integrar formularios interactivos en tu sitio web. Estos formularios pueden funcionar de forma independiente o en conjunto con Agentes de IA para recopilar información estructurada de tus usuarios.

Instalación

HTML
React

<script type="module">
  import Form from 'https://cdn.jsdelivr.net/npm/@laburen/embeds@latest/dist/form/index.js';

  Form.initStandard({
    formId: 'TU_ID_DE_FORMULARIO',
    container: '#mi-contenedor-de-formulario'
  });
</script>

<div id="mi-contenedor-de-formulario"></div>

// Instala el paquete primero
// npm install @laburen/embeds
// o
// yarn add @laburen/embeds

import { FormStandard } from '@laburen/embeds';

function App() {
  return (
    <div className="App">
      <h1>Mi Formulario de Laburen</h1>
      
      <FormStandard 
        formId="TU_ID_DE_FORMULARIO"
      />
    </div>
  );
}

export default App;

Opciones de Configuración

HTML
React

<script type="module">
  import Form from 'https://cdn.jsdelivr.net/npm/@laburen/embeds@latest/dist/form/index.js';

  Form.initStandard({
    formId: 'TU_ID_DE_FORMULARIO',
    container: '#mi-contenedor-de-formulario',
    
    // Callback cuando se completa el formulario
    onEnd: function (values) {
      console.log('Formulario enviado con los valores:', values);
      
      // Ejemplo: redirigir a una página de agradecimiento
      window.location.href = '/gracias';
    },
    
    // Valores iniciales para los campos del formulario
    initialValues: {
      nombre: 'Juan',
      email: 'juan@ejemplo.com'
    }
  });
</script>

<div id="mi-contenedor-de-formulario"></div>

import { useState } from 'react';
import { FormStandard } from '@laburen/embeds';

function App() {
  const [formSubmitted, setFormSubmitted] = useState(false);
  
  const handleFormSubmit = (values) => {
    console.log('Formulario enviado con los valores:', values);
    setFormSubmitted(true);
  };
  
  const initialValues = {
    nombre: 'Juan',
    email: 'juan@ejemplo.com'
  };
  
  return (
    <div className="App">
      {formSubmitted ? (
        <div className="thank-you-message">
          <h2>¡Gracias por tu información!</h2>
          <p>Nos pondremos en contacto contigo pronto.</p>
        </div>
      ) : (
        <FormStandard 
          formId="TU_ID_DE_FORMULARIO"
          onEnd={handleFormSubmit}
          initialValues={initialValues}
        />
      )}
    </div>
  );
}

export default App;

Parámetros de Configuración

string

required

ID del Formulario que deseas mostrar. Puedes encontrar este ID en tu Dashboard de Laburen en la sección de Formularios.

string

(Solo para HTML) Selector CSS del elemento donde se renderizará el formulario. Por ejemplo: ‘#mi-contenedor-de-formulario’.

function

Función de callback que se llama cuando se envía el formulario. La función recibe los valores del formulario como un objeto.

// HTML/JavaScript
Form.initStandard({
  formId: 'TU_ID_DE_FORMULARIO',
  onEnd: function (values) {
    console.log('Formulario enviado con los valores:', values);
  },
});

// React
<FormStandard 
  formId="TU_ID_DE_FORMULARIO"
  onEnd={(values) => {
    console.log('Formulario enviado con los valores:', values);
  }}
/>

object

Valores iniciales para los campos del formulario. Debe ser un objeto donde las claves son los IDs de los campos y los valores son los valores iniciales.

// HTML/JavaScript
Form.initStandard({
  formId: 'TU_ID_DE_FORMULARIO',
  initialValues: {
    nombre: 'Juan',
    email: 'juan@ejemplo.com',
    telefono: '+34600000000'
  }
});

// React
<FormStandard 
  formId="TU_ID_DE_FORMULARIO"
  initialValues={{
    nombre: 'Juan',
    email: 'juan@ejemplo.com',
    telefono: '+34600000000'
  }}
/>

Métodos

function

Restablece el formulario a sus valores iniciales.

// HTML/JavaScript
const form = await Form.initStandard({
  formId: 'TU_ID_DE_FORMULARIO',
});

// Restablecer el formulario
form.reset();

// React (usando ref)
import { useRef } from 'react';
import { FormStandard } from '@laburen/embeds';

function App() {
  const formRef = useRef();
  
  const handleReset = () => {
    if (formRef.current) {
      formRef.current.reset();
    }
  };
  
  return (
    <div>
      <button onClick={handleReset}>Restablecer Formulario</button>
      <FormStandard ref={formRef} formId="TU_ID_DE_FORMULARIO" />
    </div>
  );
}

function

Envía el formulario programáticamente.

// HTML/JavaScript
const form = await Form.initStandard({
  formId: 'TU_ID_DE_FORMULARIO',
});

// Enviar el formulario
form.submit();

// React (usando ref)
import { useRef } from 'react';
import { FormStandard } from '@laburen/embeds';

function App() {
  const formRef = useRef();
  
  const handleSubmit = () => {
    if (formRef.current) {
      formRef.current.submit();
    }
  };
  
  return (
    <div>
      <button onClick={handleSubmit}>Enviar Formulario</button>
      <FormStandard ref={formRef} formId="TU_ID_DE_FORMULARIO" />
    </div>
  );
}

Personalización Avanzada

Para personalizar la apariencia del formulario, puedes utilizar las siguientes opciones:

Form.initStandard({
  formId: 'TU_ID_DE_FORMULARIO',
  // Personalización de colores
  theme: {
    primaryColor: '#2563EB', // Color principal para botones y elementos interactivos
    backgroundColor: '#FFFFFF', // Color de fondo del formulario
    textColor: '#1F2937', // Color del texto
    borderColor: '#E5E7EB', // Color de los bordes de los campos
  },
  // Personalización de textos
  labels: {
    submitButton: 'Enviar Formulario',
    requiredField: 'Campo obligatorio',
    errorMessage: 'Por favor, corrige los errores antes de enviar'
  }
});

Para obtener ayuda adicional con la implementación, contacta a nuestro equipo de soporte en support@laburen.com.

Vision General

Privacidad

Widget de Formulario

Instalación

Opciones de Configuración

Parámetros de Configuración

Métodos

Personalización Avanzada

​Widget de Formulario

​Instalación

​Opciones de Configuración

​Parámetros de Configuración

​Métodos

​Personalización Avanzada

Widget de Formulario

Instalación

Opciones de Configuración

Parámetros de Configuración

Métodos

Personalización Avanzada