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

# Referencia del Widget de Formulario

> Documentación técnica para implementar formularios de Laburen en tu sitio web

# 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

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <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>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    // 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;
    ```
  </Tab>
</Tabs>

## Opciones de Configuración

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <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>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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;
    ```
  </Tab>
</Tabs>

## Parámetros de Configuración

<ParamField path="formId" type="string" required>
  ID del Formulario que deseas mostrar. Puedes encontrar este ID en tu Dashboard de Laburen en la sección de Formularios.
</ParamField>

<ParamField path="container" type="string">
  (Solo para HTML) Selector CSS del elemento donde se renderizará el formulario. Por ejemplo: '#mi-contenedor-de-formulario'.
</ParamField>

<ParamField path="onEnd" type="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.

  ```js theme={null}
  // 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);
    }}
  />
  ```
</ParamField>

<ParamField path="initialValues" type="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.

  ```js theme={null}
  // 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'
    }}
  />
  ```
</ParamField>

## Métodos

<ParamField path="reset" type="function">
  Restablece el formulario a sus valores iniciales.

  ```js theme={null}
  // 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>
    );
  }
  ```
</ParamField>

<ParamField path="submit" type="function">
  Envía el formulario programáticamente.

  ```js theme={null}
  // 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>
    );
  }
  ```
</ParamField>

## Personalización Avanzada

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

```js theme={null}
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'
  }
});
```

<Note>
  Para obtener ayuda adicional con la implementación, contacta a nuestro equipo de soporte en [support@laburen.com](mailto:support@laburen.com).
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.