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
<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>
<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
<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>
<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
ID del Formulario que deseas mostrar. Puedes encontrar este ID en tu Dashboard de Laburen en la sección de Formularios.
(Solo para HTML) Selector CSS del elemento donde se renderizará el formulario. Por ejemplo: ‘#mi-contenedor-de-formulario’.
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);
}}
/>
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
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>
);
}
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.