CMS: crear un formulario personalizado con elementos de entrada que se envían a tu colección

24 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. 
Captura de pantalla de cómo usar elementos de entrada para crear un formulario personalizado.
¿Necesitas un formulario personalizado más simple y predefinido?
Echa un vistazo a Wix Forms 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. 

Paso 1 | Crea una colección y configura los permisos

Crea una colección donde almacenarás los envíos de formularios personalizados y configurarás los permisos para la colección. Puedes elegir entre ajustes de permisos preestablecidos, como los envíos de formularios, que permiten a los visitantes agregar contenido. Si es necesario, puedes personalizar los permisos para controlar quién puede agregar, editar, ver y eliminar los ítems de la colección. 

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:

  1. Ve a CMS en el panel de control de tu sitio.
  2. Haz clic en Crear colección.
  3. Ingresa un nombre para tu colección. 
  4. Deja Varios ítems (predeterminado) seleccionado y haz clic en Crear
  5. Haz clic en Más acciones y selecciona Permisos y privacidad.
Captura de pantalla de la selección de permisos y privacidad en una colección.
  1. Haz clic en el botón ¿Qué tipo de contenido almacenarás en esta colección? y selecciona Formularios enviados. Si es necesario, puedes elegir otra opción y hacer clic en los menús desplegables para ajustar quién puede ver, agregar, eliminar y actualizar contenido. Más información sobre cómo configurar los permisos de las colecciones
  2. Haz clic en Guardar.
Captura de pantalla que muestra cómo configurar los permisos y la privacidad de una colección.

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. 
Editor de Wix
Editor X
Editor de Wix Studio
  1. Ve al Editor.
  2. Ve a la página o la sección donde deseas crear un formulario personalizado. 
  3. Haz clic en Agregar elementos  a la izquierda del Editor.
  4. Haz clic en Elementos de entrada.
  5. Haz clic en el tipo de elemento de entrada que deseas agregar.
  6. Haz clic en el elemento de entrada correspondiente y arrástralo a la página. 
Captura de pantalla de cómo agregar el elemento desplegable en el Editor.
  1. Repite los pasos 3-6 anteriores para agregar la cantidad de elementos de entrada que necesite tu formulario. 
Captura de pantalla de varios elementos de entrada agregados a una página.

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 X
Editor de Wix Studio
  1. En el Editor, haz clic en cualquiera de los elementos de entrada que acabas de agregar. 
  2. Haz clic en el icono Conectar a CMS
  3. 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: 
      1. 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.  
      2. Haz clic en Recopilar contenido.
    • Si ya tienes un conjunto de datos en la página:
      1. Haz clic en Recopilar contenido
      2. 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.
  4. Haz clic en el menú desplegable El valor se conecta a y selecciona Agregar nuevo campo
    1. Ingresa un nombre de campo para el nuevo campo de la colección. 
    2. Selecciona el tipo de campo en el menú desplegable. El tipo de campo determina qué tipo de datos puedes almacenar en el campo
    3. Haz clic en Agregar
  1. (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. 
  1. 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 X
Editor de Wix Studio
  1. 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. 
  1. Haz clic en el menú desplegable Modo del conjunto de datos y selecciona Escritura.
  1. (Si conectaste elementos de la lista al CMS) Establece el modo para el conjunto de datos conectado a los elementos de la lista:
    1. Haz clic en Volver al elemento desplegable en la parte superior del panel. 
    2. Haz clic en Ajustes del conjunto de datos debajo del conjunto de datos seleccionado en la sección Conexiones de la lista
    3. Haz clic en el menú desplegable Modo del conjunto de datos y selecciona Lectura o Lectura y escritura.
    4. (Opcional) Haz clic en + Agregar filtro si deseas crear un filtro para excluir ciertos elementos de la lista de opciones. 
    5. (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 X
Editor de Wix Studio
  1. Haz clic en Agregar elementos  a la izquierda del Editor.
  2. Haz clic en Botón.
  3. 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. 
Captura de pantalla de cómo agregar un botón para usar como botón de envío.
  1. Haz clic en Cambiar icono y texto e ingresa el texto que deseas mostrar en el botón (por ejemplo, "Enviar"). 
  2. Haz clic en el icono Conectar a CMS .
  3. 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. 
  4. Haz clic en el menú desplegable La acción del clic conecta a y selecciona Enviar
  5. (Opcional) Agrega mensajes de éxito y de error que aparecen cuando los envíos se envían con éxito o sin éxito:
    1. Haz clic en + Agregar mensaje de éxito y luego en + Agregar mensaje de error.
    2. 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.
    3. Haz clic en Editar texto en cada mensaje para editarlos.
  6. 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. 
  1. 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 X
Editor de Wix Studio
  1. En el Editor, haz clic en cualquiera de los elementos de entrada que deseas personalizar. 
  2. Selecciona Ajustes para ingresar el título del campo, configurar el campo como obligatorio o ajustar varias configuraciones según el tipo de entrada. 
  1. Haz clic en el icono Estilo  para ajustar la alineación del texto y otras opciones de estilo.
  2. 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. 
  3. (Opcional) Haz clic en el icono Animación  para agregar una animación al elemento desplegable. 
  4. 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.

¿Te ha sido útil?

|