CMS: configurar un formulario personalizado usando elementos de entrada desplegables
29 min
En este artículo
- Paso 1 | Agrega el elemento desplegable
- Paso 2 | Conecta al CMS
- Paso 3 | Configura los permisos de la colección
- Paso 4 | Crea un botón de envío
- Paso 5 | Personaliza el elemento desplegable
- Preguntas frecuentes
Crea formularios personalizados que permitan a los visitantes usar elementos de entrada desplegables para enviar sus selecciones directamente a tus colecciones del CMS. Este artículo te guiará a través del proceso de agregar un elemento de entrada desplegable y un botón de envío. Conectarás ambos elementos a un conjunto de datos que permita que los envíos de los visitantes se guarden en tu colección del CMS.
Después de completar estos pasos, puedes expandir tu formulario agregando más elementos de entrada y conectándolos al mismo conjunto de datos.
Antes de comenzar:
Asegúrate de agregar el CMS a tu sitio si aún no lo has hecho.
Paso 1 | Agrega el elemento desplegable
Ve a la página del editor en la que deseas crear un formulario personalizado y luego agrega el elemento desplegable.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Ve a la página en la que deseas agregar los elementos de entrada.
- Haz clic en Agregar elementos
a la izquierda del editor. - Haz clic en Elementos de entrada.
- Haz clic en Desplegable.
- Haz clic en el menú desplegable que deseas usar y arrástralo a la página.
Consejo:
Agrega más elementos de entrada para cada tipo de información que los visitantes necesiten enviar. Los elementos de entrada que agregas determinan los tipos de campos a los que se pueden conectar y el tipo de datos que pueden guardar.
Paso 2 | Conecta al CMS
Conecta el menú desplegable a un conjunto de datos que se conecta a una colección del CMS donde almacenarás los envíos.
Para las opciones que aparecen en la lista desplegable, puedes agregarlas manualmente o usar ítems de una colección del CMS diferente. Para usar ítems del CMS, conecta las opciones de la lista desplegable a un conjunto de datos diferente que se conecte a un campo de otra colección.
Editor de Wix
Editor de Wix Studio
- En el editor, agrega un conjunto de datos que se conecte a una colección donde guardarás los envíos:
- Haz clic en CMS
a la izquierda. - Haz clic en Agregar elementos.
- Haz clic en Datos de formulario.
- Haz clic en el menú desplegable Elige una colección y selecciona una colección para almacenar los envíos.
- Asigna un nombre al conjunto de datos (por ejemplo, 'Envíos').
- Haz clic en Crear.
- Haz clic en CMS
- Haz clic en el elemento desplegable y selecciona Recopilar contenido en el panel Conectar desplegable a la derecha.
- Haz clic en el menú desplegable Elige un conjunto de datos y selecciona el conjunto de datos 'Envíos'.
- Conecta el elemento de entrada desplegable a un nuevo campo de la colección para almacenar sus envíos:
- Haz clic en el menú desplegable El valor se conecta a y selecciona Agregar nuevo campo.
- Ingresa un nombre en Nombre del campo para el nuevo campo de la colección.
- (Solo codificación) Ingresa la clave de campo que identifica este campo en el código de tu sitio. Esto no se puede cambiar más tarde.
- Haz clic en el menú desplegable Tipo de campo y selecciona el tipo de campo 'Número' o 'Referencia' según el tipo de datos que desees recopilar.
Consejo: Para los tipos de campo 'Referencia', selecciona la colección a la que se hace referencia en el menú desplegable. - Haz clic en Agregar.
- Haz clic en la palanca Mostrar opciones de una colección para elegir dónde administrar las opciones del menú desplegable:
- Activada: usa un campo de otra colección del CMS para las opciones. Conecta el conjunto de datos correspondiente y elige los campos que deseas usar en el menú desplegable Las etiquetas y los valores se conectan a.
- Desactivada: haz clic en Administrar opciones para crear opciones estáticas para el elemento independientemente del CMS.
- (Si agregaste otros elementos de entrada) Conecta las entradas al conjunto de datos 'Envíos':
- Haz clic en el elemento de entrada correspondiente.
- Haz clic en el icono Conectar a CMS
. - Repite los pasos 3 y 4 anteriores para conectar la entrada al conjunto de datos 'Envíos'.
- Repite este paso para cada elemento de entrada que desees agregar al formulario del CMS personalizado.
¿Qué pasa con los modos del conjunto de datos?
- Si agregaste un 'conjunto de datos de formulario', significa que ya está configurado correctamente en el modo 'Escritura'. Este modo permite que el conjunto de datos agregue nuevos ítems a la colección 'Envíos' en función de los envíos del elemento de entrada desplegable.
- Si conectaste las opciones de la lista que los visitantes seleccionan en el elemento desplegable, asegúrate de que el conjunto de datos separado esté en modo 'Lectura' o 'Lectura y escritura'.
- Si necesitas que el formulario del CMS actualice los ítems de la colección existentes, configura el conjunto de datos 'Envíos' en modo 'Lectura y escritura'. Asegúrate de que, con los permisos de la colección, también sea posible que las personas con los roles correspondientes actualicen el contenido.
Paso 3 | Configura los permisos de la colección
Configura los permisos para la colección donde almacenarás los envíos. Puedes elegir el ajuste preestablecido Recopilar contenido, que permite a los visitantes agregar contenido, y luego define quién puede agregarlo. O puedes elegir la opción de permisos Avanzado para controlar quién puede ver, agregar, actualizar y eliminar los ítems de la colección.
Editor de Wix
Editor de Wix Studio
- Haz clic en CMS
a la izquierda del editor. - Haz clic en Tus colecciones.
- Pasa el cursor sobre la colección 'Envíos' y haz clic en el icono Más acciones
. - Haz clic en Permisos y privacidad.
- Elige qué permisos usar para la colección:
- Elige el tipo de permisos que deseas usar para la colección:
Recopilar contenido
Avanzado
Paso 4 | Crea un botón de envío
Debes crear una forma para que los visitantes envíen las respuestas a los elementos de entrada que ingresaron o seleccionaron. Crea un botón de envío agregando una imagen o un botón normal y conectándolo a la acción de clic 'Enviar' del conjunto de datos. Cuando los visitantes hacen clic en el botón de envío, los valores del elemento de entrada desplegable y cualquier otro elemento de entrada que conectes al conjunto de datos 'Envíos' se guardan en tu colección. Según el modo del conjunto de datos y los permisos de la colección, los valores se agregan como nuevos ítems o se utilizan para actualizar ítems existentes.
También puedes crear botones separados para las siguientes acciones del conjunto de datos:
- Nuevo: agrega o actualiza los ítems de la colección (según el modo del conjunto de datos) y restablece las entradas para aceptar nuevos valores.
- Revertir: restablece los valores en los elementos de entrada que aún no se han enviado.
- Eliminar: quita de la colección los ítems seleccionados (solo en modo 'Lectura y escritura').
- Próxima página/página anterior: si muestras los ítems que los visitantes están editando en una galería o en un repetidor, puedes agregar estos botones para permitir que los visitantes naveguen por las "páginas" de los ítems. Si creaste el formulario en una página dinámica de ítem, usa la acción de clic Próxima página dinámica/página dinámica anterior en su lugar.
Editor de Wix
Editor de Wix Studio
- Haz clic en Agregar elementos a la izquierda del editor.
- Haz clic en Botón.
- Haz clic en el botón que deseas usar como botón de envío y arrástralo a la página. Puedes usar cualquiera de los siguientes tipos de botones: botones temáticos, botones con texto e iconos, botones con iconos o botones de imagen.
Consejo: Como alternativa, puedes agregar una imagen y usarla como botón de envío.
- Haz clic en Cambiar icono y texto e ingresa el texto que deseas mostrar en el botón (por ejemplo, "Enviar").
- Haz clic en el icono Conectar a CMS .
- Haz clic en el menú desplegable Conectar un conjunto de datos y selecciona el conjunto de datos conectado a tu colección de envíos.
- Haz clic en el menú desplegable La acción del clic conecta a y selecciona Enviar.
- (Opcional) Agrega mensajes de éxito y de error que aparecen cuando los envíos se envían con éxito o sin éxito:
- Haz clic en + Agregar mensaje de éxito y luego en + Agregar mensaje de error.
- Haz clic en ambos mensajes y arrástralos a la ubicación donde quieres que aparezcan. Pueden superponerse porque los mensajes no se muestran al mismo tiempo.
- Haz clic en Editar texto en cada mensaje para editarlos.
- Selecciona el botón y haz clic en el icono Conectar a CMS . Luego, haz clic en el menú desplegable Al ver mensaje de éxito, dirigirse a y selecciona una opción:
- Quedarme en esta página: el visitante permanece en la misma página después de enviar el formulario.
- Un enlace: el visitante es redirigido a otra página después de enviar el formulario. Haz clic en Seleccionar dentro de Elige un enlace y configura el enlace.
- Haz clic en el botón y selecciona el icono Diseño
para personalizar la apariencia del botón de envío.
Paso 5 | Personaliza el elemento desplegable
Establece el título, el texto del marcador de posición y otras opciones desde los ajustes del menú desplegable. Personaliza el aspecto del elemento desde el panel Diseño y ajusta la alineación, el espaciado y el relleno desde el panel Estilo.
Editor de Wix
Editor de Wix Studio
- En el editor, haz clic en el elemento desplegable.
- Haz clic en Ajustes y edita lo siguiente:
- Título del campo: ingresa un título que aparecerá en la parte superior del elemento desplegable.
- Mostrar texto al cargar: elige el texto inicial que ven los visitantes antes de hacer clic en el elemento desplegable:
- Ninguno: los visitantes ven un cuadro en blanco antes de hacer clic en el elemento desplegable.
- Texto del marcador de posición: usa tu propio texto en el elemento desplegable (por ejemplo, "Elige tu color"). Ingresa el texto en el campo Texto del marcador de posición.
- Ítem del menú desplegable: muestra un ítem de la lista desplegable. Si conectaste la lista al CMS, el ítem que aparece es la primera opción del menú desplegable que los visitantes pueden seleccionar. Si no conectaste los elementos de la lista al CMS, haz clic en Elige un elemento de tu lista para elegir qué elemento aparece.
- Autocompletar: haz clic en la palanca para determinar qué sucede cuando los visitantes escriben para buscar en el menú desplegable:
- Activada: solo las opciones que coinciden con el texto escrito aparecen en el menú desplegable.
- Desactivada: todas las opciones aparecen en el menú desplegable.
- Tipo de lista desplegable: elige una opción:
- Personalizado: personaliza el elemento desplegable en el panel Diseño. En la versión móvil, el tipo de lista siempre se establece en Navegador.
- Navegador: usa el tema predeterminado del navegador en el elemento desplegable.
- Este campo es: selecciona la casilla de verificación Obligatorio para exigir que los visitantes seleccionen un ítem de esta lista desplegable antes del envío.
- Haz clic en el icono Estilo
para ajustar la alineación del texto y el relleno y el espaciado del elemento. - Haz clic en el icono Diseño
para elegir un diseño preestablecido y luego selecciona Personalizar para ajustar aún más la apariencia del elemento desplegable. - (Opcional) Haz clic en el icono Animación
para agregar una animación al elemento desplegable.
¿Todo listo para publicar?
Haz clic en Vista previa en la parte superior derecha del Editor para probar tu nuevo formulario desplegable personalizado. Cuando todo se vea bien y funcione a la perfección, haz clic en Publicar para publicar los cambios.
Si has habilitado Sandbox, sincroniza tu colección de Sandbox con la colección Online para que se publiquen los cambios en la base de datos.
Preguntas frecuentes
Haz clic en una de las siguientes preguntas para obtener respuestas a las preguntas más frecuentes sobre la conexión de elementos desplegables al CMS.
¿Cómo soluciono los problemas de envíos de formularios que no se guardan en la colección del CMS?
¿Puedo exportar los envíos que se guardan en mi colección?
¿Puedo automatizar lo que sucede cuando recibo envíos de formularios?
¿Pueden usar elementos de entrada los visitantes del sitio para filtrar el contenido que aparece en mi sitio?
¿Puedo mostrar los envíos de formularios en una tabla, una galería o un repetidor?
¿Cómo permito que los miembros actualicen sus propios envíos?
¿De dónde proviene la lista de opciones si conecto un elemento desplegable a un campo de referencia?
¿Cómo conecto varios formularios a una sola colección del CMS?