CMS: crear un formulario personalizado con elementos de entrada que se envían a tu colección
20 min de lectura
Crea un formulario personalizado que permita a los visitantes usar elementos de entrada para enviar su información directamente a tus colecciones del CMS. Los elementos de entrada incluyen cuadros de texto, selectores desplegables, selectores de fecha y hora y más. Este artículo te guiará a la hora de crear una colección para almacenar los envíos, agregar elementos de entrada y un botón de envío y usar conjuntos de datos para conectarlo todo.
¿Necesitas un formulario personalizado más simple y predefinido?
Echa un vistazo a Wix Formularios para ver formularios de plantilla que requieren menos configuración, como formularios de contacto, formularios de pedidos, formularios de registro y más.
Antes de comenzar:
- Asegúrate de agregar el CMS a tu sitio si aún no lo has hecho.
- Para obtener un resumen general de este proceso, echa un vistazo a nuestro video de la guía definitiva del CMS (contenido en inglés).
Paso 1 | Crea una colección y configura los permisos
Crea una colección donde almacenarás los envíos de los formularios personalizados y establece los permisos de la colección. Puedes elegir los ajustes de permiso Recopilar contenido y luego elegir quién puede agregar o ver el contenido de tu sitio online. O bien, puedes elegir la opción Personalizado para especificar quién puede ver, agregar, actualizar y eliminar contenido para cada rol (administrador, creador del ítem, solo miembros o todos).
Puedes agregar campos a la colección en este punto, pero te recomendamos agregarlos más adelante (paso 3), cuando conectas los elementos de entrada. De esa manera, tendrás la certeza de que solo estás agregando los tipos de campos que pueden conectarse a cada tipo de elemento de entrada.
Para crear una colección destinada a almacenar los envíos de formularios:
- Ve a CMS en el panel de control del sitio.
- Haz clic en Crear colección.
- Ingresa un nombre para tu colección.
- Deja Varios ítems (predeterminado) seleccionado y haz clic en Crear.
- Haz clic en Más acciones y selecciona Permisos y privacidad.
- Elige qué permisos usar para la colección:
Nota: Los propietarios del sitio y los colaboradores siempre son tratados como administradores cuando inician sesión en el sitio online. Esto significa que siempre pueden ver, agregar, actualizar y eliminar el contenido de la colección desde el sitio online. Esta regla se aplica independientemente del permiso de colección que selecciones.
Recopilar contenido
Personalizado
Paso 2 | Agrega elementos de entrada a tu sitio
Ve a la página o la sección del editor donde deseas crear el formulario personalizado. Luego, agrega todos los elementos de entrada que los visitantes usarán para enviar sus respuestas. Ten en cuenta que cada elemento de entrada tiene limitaciones con respecto a los tipos de datos que puede recopilar y los tipos de campo a los que se puede conectar.
¿Qué elementos de entrada se pueden configurar para recopilar contenido?
Puedes elegir entre los siguientes elementos de entrada que te permiten recopilar contenido: Entrada de texto, Cuadro de texto, Texto enriquecido, Botones de radio, Casilla de verificación múltiple, Casilla de verificación única, menú Desplegable, Etiquetas de selección, Selector de fecha, Selector de hora, Control deslizante, Botón para cargar, Calificaciones, Configuración de dirección, Conmutador y Entrada de firmas.
Editor de Wix
Editor de Wix Studio
- Ve al editor.
- Ve a la página o la sección donde deseas crear un formulario personalizado.
- Haz clic en Agregar elementos a la izquierda del editor.
- Haz clic en Elementos de entrada.
- Haz clic en el tipo de elemento de entrada que deseas agregar.
- Haz clic en el elemento de entrada correspondiente y arrástralo a la página.
- Repite los pasos 3-6 anteriores para agregar la cantidad de elementos de entrada que necesite tu formulario.
Paso 3 | Conecta los elementos de entrada a tu colección
Conecta cada uno de los elementos de entrada a un conjunto de datos que se conecta a tu colección. Luego, conecta los valores de entrada a nuevos campos de colección que coincidan con el tipo de datos que deseas recopilar.
Para las opciones que aparecen en las listas desplegables y de etiquetas de selección, puedes usar ítems de una colección diferente. Para ello, conecta los ítems de su lista 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, haz clic en cualquiera de los elementos de entrada que acabas de agregar.
- Haz clic en el icono Conectar a CMS .
- Conéctate a un conjunto de datos que se enlace a la colección donde almacenarás los envíos:
- Si no tienes un conjunto de datos en la página:
- Haz clic en + Agregar un conjunto de datos a la derecha. Luego, elige la colección que deseas conectar, ingresa el nombre del conjunto de datos y haz clic en Crear.
- Haz clic en Recopilar contenido.
- Si ya tienes un conjunto de datos en la página:
- Haz clic en Recopilar contenido.
- Haz clic en el menú desplegable Elige un conjunto de datos y selecciona el conjunto de datos correspondiente. Como alternativa, haz clic en Crear un conjunto de datos para crear uno nuevo, luego elige la colección que deseas conectar, ingresa el nombre del conjunto de datos y haz clic en Crear.
- Si no tienes un conjunto de datos en la página:
- Conecta el elemento de entrada a un nuevo campo de la colección:
- Haz clic en el menú desplegable El valor se conecta a y selecciona Agregar nuevo campo.
- Ingresa un nombre de campo para el nuevo campo de la colección.
- Selecciona el tipo de campo en el menú desplegable. El tipo de campo determina qué tipo de datos puedes almacenar en el campo.
- Haz clic en Agregar.
- (Si es necesario) Haz clic en la palanca Conectar elementos de la lista para elegir dónde administrar las opciones del elemento:
- 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 las opciones para el elemento independientemente del CMS.
- Repite estos pasos para cada uno de los elementos de entrada de tu formulario personalizado.
Paso 4 | Configura los modos del conjunto de datos
Los conjuntos de datos controlan la conexión entre los elementos de tu página y las colecciones. Por ende, asegúrate de que cada conjunto de datos esté en el modo correcto. Configura el modo en Escritura en el conjunto de datos que se conecta a tu colección de envíos para que las entradas puedan agregar ítems a la colección.
Si conectaste las listas desplegables o de etiquetas de selección a otro conjunto de datos y colección, el conjunto de datos debería configurarse automática y correctamente en Lectura y escritura. Sin embargo, si los conectaste a un conjunto de datos existente, asegúrate de configurar su modo en Lectura y escritura o en Lectura. Esto permite que las listas de opciones muestren ítems de la otra colección.
Editor de Wix
Editor de Wix Studio
- En el panel de la derecha, haz clic en Ajustes del conjunto de datos debajo del primer menú desplegable Elige un conjunto de datos. Este conjunto de datos se conecta a la colección en la que almacenarás los envíos.
- Haz clic en el menú desplegable Modo del conjunto de datos y selecciona Escritura.
- (Si conectaste elementos de la lista al CMS) Establece el modo para el conjunto de datos conectado a los elementos de la lista:
- Haz clic en Volver al elemento desplegable en la parte superior del panel.
- Haz clic en Ajustes del conjunto de datos debajo del conjunto de datos seleccionado en la sección Conexiones de la lista.
- Haz clic en el menú desplegable Modo del conjunto de datos y selecciona Lectura o Lectura y escritura.
- (Opcional) Haz clic en + Agregar filtro si deseas crear un filtro para excluir ciertos ítems de la lista de opciones.
- (Opcional) Haz clic en + Agregar nuevo orden si deseas elegir el orden en el que aparecen los ítems en la lista de opciones.
Paso 5 | Crea un botón de envío
Después de que los visitantes interactúan con los elementos de entrada de tu formulario personalizado, necesitan una forma de enviar sus respuestas. Agrega un botón o una imagen y conéctalo al mismo conjunto de datos que se conecta a tu colección de envíos. Luego, configura la acción de clic para el botón o la imagen en Enviar. Cuando los visitantes hacen clic en el botón de envío, se crea un nuevo ítem en la colección con valores de cada elemento de entrada en los campos correspondientes.
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 6 | Personaliza los elementos de entrada
Puedes personalizar cada uno de los elementos de entrada para crear un formulario de aspecto coherente que coincida con el aspecto de tu sitio.
Editor de Wix
Editor de Wix Studio
- En el editor, haz clic en cualquiera de los elementos de entrada que deseas personalizar.
- Selecciona Ajustes para ingresar el título del campo, configurar el campo como obligatorio o ajustar varias configuraciones según el tipo de entrada.
- Haz clic en el icono Estilo para ajustar la alineación del texto y otras opciones de estilo.
- 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.
- (Opcional) Haz clic en el icono Animación para agregar una animación al elemento desplegable.
- Repite estos pasos para cada elemento de entrada que desees personalizar.
¿Todo listo para publicar?
Haz clic en Vista previa en la parte superior derecha del editor para probar el nuevo formulario 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 comunes sobre la creación de formularios personalizados con elementos de entrada.
¿Cómo encuentro los mensajes de confirmación o de error del botón de envío en el editor?
¿Puedo automatizar lo que sucede cuando recibo envíos de formularios?
¿Puedo exportar los envíos que se guardan en mi colección?
¿Pueden usar elementos de entrada los visitantes del sitio para filtrar el contenido que aparece en mi sitio?
¿De dónde provienen los ítems de la lista si conecto listas desplegables o de etiquetas de selección a campos de referencia?
¿Puedo configurar los campos de mi colección antes de agregar elementos de entrada?
¿Te ha sido útil?
|