header-logo
Crea tu sitio web y haz crecer tu negocio con Wix
Crea y gestiona tu sitio con las funciones intuitivas de Wix
Gestiona suscripciones, planes y facturas
Gestiona tu negocio y conecta con los miembros
Aprende a comprar, conectar o transferir un dominio
Herramientas para ampliar tu negocio y tu presencia online
Herramientas de marketing y SEO para impulsar tu negocio
Funciones avanzadas para trabajar de forma eficaz
Soluciones, problemas conocidos y contacto
placeholder-preview-image
Mejora tus habilidades con nuestros cursos y tutoriales.
Obtén consejos para diseño web, marketing y mucho más.
Mejora el tráfico orgánico en buscadores.
Crea un sitio con nuestra plataforma full-stack.
Vincúlate con un especialista que te ayude a alcanzar tus objetivos
placeholder-preview-image

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

21 min
En este artículo
  • Paso 1 | Crea una colección y configura los permisos
  • Paso 2 | Agrega elementos de entrada a tu sitio
  • Paso 3 | Conecta los elementos de entrada a tu colección
  • Paso 4 | Crea un botón de envío
  • Paso 5 | Personaliza los elementos de entrada
  • Preguntas frecuentes
Crea un formulario de CMS personalizado que permita a los visitantes usar elementos de entrada para enviar su información directamente a tu colección. Los elementos de entrada incluyen cuadros de texto, selectores desplegables, selectores de fecha y hora, y más. Este artículo te guiará a través de la creación de una colección para almacenar los envíos, la adición de elementos de entrada y un botón de envío, y el uso de 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 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:

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

Crea una colección donde almacenarás los envíos de formularios personalizados y establece los permisos de la colección. Puedes elegir los ajustes de permiso Recopilar contenido y luego elegir quién debe tener permiso para agregar o ver el contenido de tu sitio online. O bien, puedes elegir Avanzado para especificar quién puede ver, agregar, actualizar y eliminar contenido para cada rol (todos los usuarios, miembros, creador del ítem y colaboradores).

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 del sitio.
  2. Haz clic en Crear colección.
  3. Haz clic en Comenzar desde cero.
    Consejo: Como alternativa, haz clic en Crear con IA para permitir que la IA (inteligencia artificial) cree una colección para ti.
  4. Haz clic en Siguiente. 
  5. Ingresa un nombre para la colección. Vamos a referirnos a esta colección como la colección 'Envíos'. 
  6. (Solo código) Ingresa un ID de colección para usar en el código.
  7. Deja la opción Colección de varios ítems (predeterminada) seleccionada y haz clic en Crear
  8. 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. Elige qué permisos usar para la 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. 
¿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, casillas 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, entrada de calificaciones, configurador de dirección, conmutador y entrada de firmas.
Editor de Wix
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 la colección 'Envíos'. Luego, conecta los valores de entrada a los nuevos campos de la colección que coincidan con el tipo de datos que deseas recopilar. 

Puedes conectar las opciones que los visitantes seleccionan en los elementos Desplegable y Etiquetas de selección a ítems de otra colección del CMS. Para ello, conecta sus opciones de lista a un conjunto de datos diferente que se conecte a un campo de otra colección. Este conjunto de datos debe estar en el modo 'Lectura' o 'Lectura' y escritura'. 
Editor de Wix
Editor de Wix Studio
  1. En el editor, agrega un conjunto de datos que se conecte a la colección 'Envíos':
    1. Haz clic en CMS  a la izquierda. 
    2. Haz clic en Agregar elementos
    3. Haz clic en Datos de formulario.
    4. Haz clic en el menú desplegable Elige una colección y selecciona la colección 'Envíos'. 
    5. Asigna un nombre al conjunto de datos (por ejemplo, 'Envíos'). 
    6. Haz clic en Crear
  2. Haz clic en cualquiera de los elementos de entrada que agregaste. 
  3. Haz clic en el icono Conectar a CMS
  4. Haz clic en el menú desplegable Elige un conjunto de datos y selecciona el conjunto de datos 'Envíos'.
    Consejo: Primero, haz clic en Recopilar contenido si se te pide que elijas entre 'Filtrar contenido' y 'Recopilar contenido'. 
  5. Conecta el elemento de entrada a un nuevo campo de la colección:
    1. Haz clic en el menú desplegable El valor se conecta a y selecciona Agregar nuevo campo.
    2. Ingresa un nombre en Nombre del campo para el nuevo campo de la colección. 
    3. (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. 
    4. Selecciona el tipo de campo en el menú desplegable. El tipo de campo determina qué tipo de datos puedes almacenar en el campo
    5. Haz clic en Agregar
Captura de pantalla que muestra cómo agregar un nuevo campo de colección donde se guardarán los datos.
  1. (Si conectas la lista de ítems en ciertos elementos de entrada) Haz clic en la palanca Mostrar opciones de una colección 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 opciones estáticas para el elemento independientemente del CMS. 
Captura de pantalla que muestra cómo conectar las opciones de lista de un elemento de entrada desplegable.
  1. Repite estos pasos para cada uno de los elementos de entrada del formulario de 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 en función de los envíos del elemento de entrada.
  • Si conectaste las opciones que los visitantes seleccionan en los elementos Desplegable y Etiquetas de selección, 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 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 de los elementos de entrada que se conecten 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
  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. 
Captura de pantalla que muestra cómo configurar un botón de envío.
  1. 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 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
  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. 
Captura de pantalla que muestra cómo personalizar un elemento de entrada desplegable.
  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. 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.
Captura de pantalla de cómo usar elementos de entrada para crear un formulario personalizado.
Captura de pantalla de la selección de permisos y privacidad en una colección.
Captura de pantalla de cómo agregar el elemento desplegable en el editor.
Captura de pantalla de varios elementos de entrada agregados a una página.
Captura de pantalla que muestra cómo agregar un nuevo campo de colección donde se guardarán los datos.
Captura de pantalla que muestra cómo conectar las opciones de lista de un elemento de entrada desplegable.
Captura de pantalla de cómo agregar un botón para usar como botón de envío.
Captura de pantalla que muestra cómo configurar un botón de envío.
Captura de pantalla que muestra cómo personalizar un elemento de entrada desplegable.