“`html
Nota
Hemos obsoleto esta guía ya que los formularios de Jotform ahora son adaptables a móviles por defecto. Esto significa que no se requiere configuración adicional.
El uso de la web móvil es común. Si tu sitio web no se muestra correctamente, estás perdiendo usuarios. Las personas utilizan con frecuencia sus dispositivos móviles para acceder a sitios web. Esto incluye tus formularios web, como formularios de registro, contacto o de generación de leads. Los formularios deben ser compatibles con móviles en todos los dispositivos para lograr usabilidad y una experiencia de usuario de alta calidad. Una manera de hacerlo es haciendo que tus formularios sean responsivos para móviles. Esto significa que, sin importar desde qué dispositivo un usuario acceda a tu formulario, se mostrará adecuadamente. No necesitarán hacer zoom para verlo. Este tutorial te mostrará cómo crear formularios responsivos para móviles con Jotform.
Jotform ofrece varias opciones para hacer que los formularios sean responsivos sin necesidad de escribir una sola línea de código para usuarios no técnicos. A continuación, te mostramos cómo crear formularios adaptables a móviles con Jotform.
Hacer el formulario responsivo en el diseñador de formularios
“““html
Este es el método recomendado ya que convertirá tu formulario en un formulario totalmente responsivo en dispositivos móviles como iPhones y iPads, tanto en modo vertical como horizontal. A continuación, los pasos para habilitar esto en tu formulario.
- En el Creador de Formularios, haz clic en el icono de Diseñador de Formulario.
- Haz clic en el botón Diseñador Avanzado en la parte inferior del panel de Diseñador de Formulario.
- En el Diseñador Avanzado, ve a la sección de Diseño de Formulario.
- Marca la opción Hacer este formulario adaptativo.
Consejo
El Diseñador de Formularios tiene un modo de vista previa integrado para diferentes dispositivos y vistas. Haz clic en el botón Guardar en la parte superior izquierda de la pantalla. Después de guardar, debería mostrarte el icono de vista previa.
El Poder de Inyectar CSS
Si tienes tu propio estilo con diseño de formulario y prefieres el código CSS personalizado, esto es lo que estás buscando. Esto es para usuarios avanzados.
Puedes inyectar los códigos CSS personalizados a través del Creador de Formularios o Diseñador de Formularios. Aquí están las instrucciones sobre cómo inyectar CSS desde el Creador de Formularios. El Diseñador de Formularios es más avanzado, por lo que recomendamos escribir CSS allí. Para comenzar a construir código CSS personalizado, haz clic en la pestaña CSS en el Diseñador de Formularios.
Consejos rápidos para inyectar CSS personalizado:
@consultas de media
“““html
es la forma típica de hacer que las páginas web sean responsivas. Esto también se aplica a los formularios. Define diferentes reglas de estilo para diferentes tipos de medios/dispositivos. Aquí tienes un ejemplo de una consulta de medios CSS que apunta a anchos específicos.
/* Apunta al área de visualización con un ancho máximo de 768px */
@media screen and (max-width:768px) {
/* AQUÍ VAN LOS ESTILOS */
} Aquí tienes una buena fuente para aprender sobre códigos CSS de consultas de medios que apuntan a diferentes dispositivos.
Uso del Widget Responsivo para Móviles
Si deseas usar un widget en lugar de mantener las dos opciones anteriores o inyectar tu propio código CSS, este widget lo ha visto todo y ha ayudado a millones de formularios a lograr lo que necesitaban: ser responsivos para móviles.
Sugerimos usar una de las dos primeras opciones, pero para completar, este widget es una gran manera de lograr el mismo objetivo.
Para saber más sobre cómo agregar widgets a tus formularios, visita Cómo Agregar un Widget a Tu Formulario.
Temas Responsivos para Móviles
A veces, el tema es la mejor elección para hacer que tu formulario luzca genial y, al mismo tiempo, se comporte como debe sin importar en qué dispositivo se abra. Obtén uno de los Temas de gran apariencia diseñados para darle a tu formulario la ventaja que buscas, hechos a mano por varios diseñadores y disponibles para ti.
“““html
aquí.
Nota
Asegurar la adaptabilidad móvil puede ser una tarea compleja. Con la abundancia de dispositivos móviles en el mercado y su rendimiento acercándose al de las computadoras de escritorio, lograr una adaptabilidad perfecta sin un manejo adecuado puede ser un desafío.
Si estás incrustando tu formulario en tu sitio web y no estás satisfecho con cómo se ve con las dos opciones activadas, siéntete libre de empezar a experimentar.
Puedes intentar cualquier combinación mencionada anteriormente y, si encuentras alguna nueva forma de lograr adaptabilidad móvil que no esté cubierta aquí, por favor háznoslo saber en los comentarios a continuación.
¡Adelante y comienza a crear formularios adaptables a móviles con Jotform!
“`
Enviar Comentario: