Diseñar su formulario

Una vez que haya creado su widget en el Widget Studio, es el momento de añadir elementos para crear su formulario.

Elementos de formulario disponibles

Haga clic en el menú izquierdo para añadir un elemento. Desplácese hacia abajo para encontrar la sección Formulario. Hay varios tipos de elementos disponibles. Puede combinarlos para crear formularios personalizados e interactivos.

Botón: Un botón cuyas características puede editar
Input: Una entrada de texto totalmente personalizable que puede recopilar datos de tipo cadena de sus visitantes.
Date: Un campo para solicitar una fecha a su visitante. Haga clic en él para abrir un panel selector de fechas.
Time: Un campo para solicitar una hora a su visitante. Haga clic en él para abrir un panel de selección de hora.
Toggle: Un conmutador al que puede añadir dos estados posibles (por ejemplo, ON y OFF).
Checkbox: Una casilla de verificación a la que puede añadir un elemento Text.
RadioButton: Un botón de opción al que puede añadir un elemento Text.
Select: Un menú desplegable totalmente personalizable donde puede rellenar diferentes opciones seleccionables.
Textarea: Un cuadro de texto totalmente personalizable que contiene un marcador de posición.
Range input: Un deslizador totalmente editable que permite a los visitantes seleccionar un valor dentro de un rango específico.
Hidden input: Un campo de formulario invisible utilizado para almacenar metadatos enviados con el formulario pero no mostrados al usuario.
FormErrorMessage: Un campo de texto que muestra un mensaje específico en caso de error en el formulario.

Empiece añadiendo elementos en la vista Escritorio, que es la configuración predeterminada. A continuación, puede adaptar su diseño a otro dispositivo si es necesario (móvil/tableta). Los cambios realizados en otro dispositivo siguen siendo específicos para ese dispositivo y no afectarán a los demás.

Cuando selecciona un elemento, aparecen dos pestañas en la parte superior del menú de edición: General y Estados.

Pestaña General

Seleccione esta pestaña para editar las propiedades de su elemento. Aquí encontrará las propiedades fundamentales de su elemento (que no son específicas de un estado particular, como hover). Puede modificar diferentes características según el tipo de elemento, como la posición, el relleno y la animación.

Ejemplo de caso de uso

Supongamos que desea crear un formulario de registro al newsletter. Puede empezar a partir de una de las plantillas de Newsletter disponibles en el Widget Studio. Puede personalizar esta base añadiendo dos menús desplegables y un conmutador. Para crear este formulario:

Haga clic en Añadir un elemento.
Elija el tipo Select en la sección de formularios.
Haga clic en Añadir opción para añadir una opción a la lista. Para nuestro ejemplo, añadiremos la opción Latest products.

Supongamos que desea una segunda opción que aparezca cuando un visitante seleccione Latest products. Para ello:

Haga clic en Añadir un elemento.
Elija el tipo Select en la sección de formularios.
En el menú de la izquierda, oculte el segundo menú desplegable. Tendrá que configurar un evento para hacerlo aparecer.

Añada un elemento Toggle para pedir a cada visitante que acepte los Términos y condiciones antes de enviar el formulario.
Añada un elemento Botón.

A continuación, debe configurar la verificación de la información y el envío de los datos.

También puede establecer reglas para un elemento: ¿es este un campo obligatorio? ¿Debemos comprobar el contenido del campo antes de validar?

Pestaña Estados

La pestaña Estados le permite editar los estilos de los estados de un elemento (hover, activo y deshabilitado).

Todos los estados son editables, pero las propiedades editables de los estados dependen del elemento seleccionado.

​Elementos de formulario disponibles