Cómo usar unidades de longitud VW y VH para diseñar un formulario de contacto receptivo en DIV

Los formularios web son extremadamente importantes para el éxito de su sitio web. Esto tiene sentido, dado que la mayoría de las empresas en línea dependen de formularios, como opciones de correo electrónico y formularios de contacto para ganar dinero creando listas de correo electrónico y comunicándose con compradores potenciales. Y, en estos días, debemos asegurarnos de diseñar formas receptivas que se verán excelentes en todos los navegadores y dispositivos móviles. En este tutorial, le mostraré cómo diseñar un formulario de contacto receptivo utilizando unidades de VW y VH en div. Cubriremos la ampliación y el espacio de los campos introductorios y los botones que se ajustarán de acuerdo con el ancho y la altura de su navegador.
Para hacer esto, utilizaremos la configuración incorporada de la división, que le permiten personalizar fácilmente el texto del formulario, los campos y los botones. Vamos a empezar. Tirar del ojo


Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Descargue de forma gratuita para el formulario de contacto receptivo (¡también incluye un formulario de respuesta optativa para el correo electrónico!)

Para poner su mano en los dibujos en este tutorial, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? ¿Qué necesita para comenzar a comenzar? Deberá tener la siguiente configuración:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Tu bebida favorita (opcional a menos que aún no haya tomado café)
Después de eso, tendrá un lienzo vacío para comenzar a construir los formularios receptivos en el DIV. Por qué usar las unidades de longitud VW y VH para un diseño receptivo, las unidades de longitud son aquellos valores necesarios para el tamaño y el espacio de los elementos en su página web. Probablemente las unidades más comunes de longitud utilizadas en el diseño web son píxeles y porcentajes. Por ejemplo, un píxel es una unidad de longitud regular utilizada para el tamaño de texto, la unidad de longitud EM se usa comúnmente para la altura de la línea y una unidad de longitud porcentual se usa comúnmente para espaciar y dimensionar elementos para un diseño receptivo. De hecho, los valores implícitos de la unidad de longitud para los elementos del DIV (módulos, filas, secciones) se construyen utilizando estas unidades de longitud comunes. Las unidades de longitud serán absolutas (permanecen en la misma dimensión, independientemente de el tamaño de otros elementos), o relativo (cambio / escala de acuerdo con el tamaño de otros elementos). Por ejemplo, un píxel es una unidad de longitud absoluta. Entonces, si un cuerpo de texto tiene un tamaño de fuente de 16 px, el texto permanecerá 16 PX, independientemente del tamaño de su contenedor. Pero el porcentaje y EM son unidades de longitud relativa. Por lo tanto, una altura de la línea que tiene un valor EM se ajustará a medida que cambie el tamaño del texto del elemento. Y como el porcentaje también es una unidad de longitud relativa, una fila con un ancho del 80% será del 80% del contenedor (o sección).
Las unidades de longitud de VW y VH también son unidades de longitud relativa, pero en lugar de ser relativas al elemento del contenedor principal, es relativo a la ventana de visualización real. El ancho de la ventana (VW) es relativo al ancho del navegador, y la altura de la ventana (VH) es relativa a la altura del navegador. El uso de estas unidades de longitud es una forma de mantener su diseño consistente en todos los navegadores, ya que se escalará de acuerdo con la ventana de visualización. Esto hace que el tamaño de cada elemento sea más predecible y más fácil de administrar sin tener que preocuparse tanto para darle a cada elemento una dimensión diferente en cada dispositivo o interrupción receptiva. La unidad de longitud VH es especialmente útil para las pantallas del teléfono móvil, ya que tendrá en cuenta la altura de la pantalla del teléfono en la vista del retrato y el paisaje. Esta técnica funciona mejor para el diseño que depende de la pantalla de ancho completo, una pantalla. Escala que cambiará el tamaño suavemente mientras el usuario ajusta el ancho del navegador. Para obtener una explicación más detallada de las unidades de longitud, consulte esta guía sobre el uso de las unidades de longitud en el Div. Parte 1: Diseño de un formulario de contacto receptivo en la división de la sección y la fila Cree una sección ordinaria con una fila con una columna. Antes de agregar módulos, actualice la configuración de la sección de la siguiente manera: Color izquierdo del gradiente de fondo: # FD7B5B Color de Gradiabient derecho: # A92200
Luego abra la configuración de la fila y dale un gradiente de fondo. Color izquierdo del gradiente de fondo: # FFDB8B Gradiente de fondo derecho: # FDB15Baci, para aumentar la fila usando la unidad de longitud VW, de modo que se redifunde con el navegador. Ancho: 66VW (escritorio), 66VW (tableta), 100% (teléfono) Ancho máximo: 66VW (escritorio), 66VW (tableta), 100% (teléfono) Altura mínima (100VH) revestimiento: 0 px arriba, 0 px el valor de 66 VW asegurará que la fila permanezca alrededor de dos tercios el ancho de la ventana de vista del navegador. El valor de 100 VH en la pantalla del teléfono asegurará que la altura de la fila sea igual a la altura de la pantalla del teléfono (opcional, pero un toque agradable para un área de visualización óptima de las filas en los teléfonos).
Observe que el ancho de la fila está establecido en 100% (no 100VW). Esto se debe al hecho de que 100VW no tendrá en cuenta el ancho de la barra de desplazamiento mientras ejecuta la página. Por lo tanto, siempre es mejor usar el porcentaje para pantallas de ancho completo.
Creando el formulario de contacto con nuestra posición de giro, ahora podemos agregar el módulo de formulario de contacto por línea. Una vez agregado el formulario de contacto, actualice el contenido como en un título y deshabilite Captcha. Título: Contact Us Display Captcha: No

Haciendo campos de ancho completo para este diseño, usaré campos de ancho completos. Esto me permitirá agregar espacios consistentes entre los campos (porque no se usan flotando) y me permitirá dar un ancho personalizado a cada campo para un diseño único más adelante. Por ahora, abra la configuración para el nombre y el campo de correo electrónico y configure la opción “Realice el ancho completo” a “Sí”. Optimización de los campos para el diseño receptivo ahora regresa a la configuración del formulario de contacto. Ahora podemos personalizar los campos del formulario utilizando unidades de longitud VW y VH. Actualización de lo siguiente: Color de texto de campo: # 333333 Margen de campo (escritorio y tableta): 2VW arriba, 2VW Margen de campo hacia abajo (teléfono): 2VH hacia arriba, 2 VH BAJO CAMPO DE CAMPO (Desktop y tableta): 1VW hacia arriba, 1VW hacia abajo, 2VW izquierda) , 2VW Campo derecho de campo (teléfono): 2 VH arriba, 2 VH hacia abajo, 2 VH izquierdo, campos de tamaño de texto derecho: 2.5VW (escritorio), 4VH (teléfono) Nota: Use el teléfono 4VH permitirá el tamaño de texto con la pantalla del teléfono móvil, que será Útil para visualizar el formulario en la pantalla del teléfono (girando el teléfono lateral). Pero si desea un tamaño de texto más consistente, es posible que desee usar una unidad de longitud de píxeles para el tamaño del campo en la pantalla del teléfono.

Diseño del texto del título Para el texto del título, Personalice lo siguiente: Nivel de encabezado: H2 Fuente Título: Karla Peso del título Fuente: Texto de color en negrita Título: # F56845 Título de texto de tamaño: 7VW (escritorio), 8VH (teléfono) Espaciado de letras Título: 1 VW Altura de la línea del título: 0.6em
Optimización del botón para el diseño receptivo para el botón Formulario de contacto, agregaremos el espacio y el tamaño del texto similar a los campos que hemos diseñado previamente. Haga clic para usar estilos de botones personalizados y actualice lo siguiente: Botón de texto: 2.5VW (escritorio), 4VH (teléfono) El color de texto: #fffff el color de fondo color: # 33333 Ancho del botón: 0 px Arae del botón: 0 PX Font Botón: Botón Montserrat Margen (escritorio): 1VW arriba, 0px izquierdo, 0px Botón de mangas derecha (teléfono): botón de llenado de 1 VH (escritorio): 3VW arriba, botón de llenado de 3VW (teléfono): 3VH, 3VH Josshadow Box Boot: Ver: Ver Box: Ver Posición horizontal de captura de pantalla de la caja: 2EM Box Sombra Posición vertical: 0.4EM Color de sombra: RGBA (245,104,69,0,29)


Agregue espacio al formulario de contacto y luego, agregue un formulario de llenado de relleno con la unidad de longitud VW y una sombra de la caja en los campos de formulario, de la siguiente manera: revestimiento (escritorio): 3VW hacia arriba, 3VW hacia abajo, 5VW izquierda, forro derecho de 5 VW (( Teléfono): 5VH hacia arriba, 5 VH hacia abajo, 3 VH izquierdo, 3 VH Botón de caja de sombra derecha: Ver posición horizontal de la caja: 2EM Box Sombra Posición vertical: 0.4EM Color de sombreado: RGBA (245,104,69,0,29)

El resultado del escritorio hasta ahora

Tableta

Teléfono (retrato)

Teléfono (paisaje)

Toques finales Ajuste los anchos de los campos de formulario Para una opción de diseño única, puede personalizar el ancho de cada campo. Abra la configuración del campo de nombre y actualice el ancho de la siguiente manera: Ancho: 50% (escritorio), 100% (teléfono)

Luego abra la configuración del campo de correo electrónico y actualice el ancho de la siguiente manera: Ancho: 65% (escritorio), 100% (teléfono), luego abra la configuración del campo de mensajes y actualice el ancho de la siguiente manera: Ancho: 80% (escritorio), 100 % (teléfono)

Haciendo el botón de ancho completo para hacer del botón de formulario de contacto receptivo el ancho completo, primero debemos agregar los siguientes CSS personalizados al botón de contacto Insertar: Ancho: 97%;

Luego abra la configuración de la página y agregue los siguientes CSS personalizados: .ET_CONTACT_BOTTOM_CONTAINER {

Flotante: ninguno;

}

Diseño final Ahora que hemos terminado, verifique el resultado final de nuestro formulario de respuesta. Observe cómo escalar el formulario de contacto al ajustar el ancho del navegador en el escritorio y la tableta y también cómo se ajusta el diseño al ajustar la altura de la ventana en el teléfono móvil.

Escritorio

Tableta

Teléfono (retrato)

Teléfono (paisaje)
Use la misma configuración de diseño para formularios de correo electrónico, puede usar las mismas unidades de longitud VW y VH para diseñar un formulario de optimización de correo electrónico receptivo. Aquí hay una captura de pantalla de un formulario de diseño de correo electrónico que se incluye en la descarga gratuita en esta publicación. Escritorio
Tableta

Teléfono (retrato)


Teléfono (paisaje)