Diseño de un formulario de contacto

Tras añadir un formulario de contacto, podrás personalizar su aspecto. En esta guía, aprenderás a cambiar el estilo, los colores y el diseño de los formularios de tu web.

El bloque Formulario incluye diferentes estilos de diseño de formularios entre los que puedes elegir:

1. Elige Vista de lista en la esquina superior izquierda del editor. El icono son tres líneas horizontales una encima de la otra.
2. Encuentra el bloque Formulario y haz clic en él:

3. En los ajustes del bloque en la barra lateral derecha, haz clic en la pestaña Estilos (representada por un icono de un círculo blanco y negro):

4. Elige un estilo:
   • Por defecto muestra los nombres de los campos fuera de los campos de entrada sin animación.
   • Animado muestra los nombres de los campos dentro de los campos de entrada con una breve animación y también resalta el campo en el que hace clic un visitante.
   • Esquematizado muestra los nombres de los campos dentro de los campos de entrada, una breve animación y un contorno alrededor de los ajustes del bloque Formulario todo el tiempo.
5. Haz clic en el botón «Guardar» que está situado en la parte superior de la pantalla.

El texto del marcador de posición es un texto de ejemplo que puede aparecer en un campo del formulario antes de que el visitante haga clic en él y que desaparece cuando hace clic para empezar a escribir su texto. Puede ser útil mostrar a tus visitantes un ejemplo del tipo de contenido que esperas que escriban en el formulario.

Para añadir el texto del marcador de posición a un formulario de contacto, sigue estos pasos:

1. Haz clic en cualquier campo del formulario.
2. Abre los ajustes del bloque en la barra lateral.
3. Desplázate hacia abajo hasta el ajuste «Texto del marcador de posición».
4. Escribe el texto del marcador de posición en el cuadro que se te proporciona. A continuación, aparecerá en el campo del formulario.
5. Haz clic en el botón «Guardar» que está situado en la parte superior de la pantalla.

Por defecto, los campos de un formulario se ajustan al ancho del contenedor del formulario. Puedes cambiar el ancho de cada campo individualmente con estos pasos:

1. Haz clic en cualquier campo del formulario.
2. Abre los ajustes del bloque en la barra lateral.
3. Desplázate hacia abajo hasta el ajuste Ancho y configura el ancho en 25 %, 50 %, 75 % o 100 %.
   • Si quieres que dos campos aparezcan uno al lado del otro, configura cada uno en 50 %. Si hay espacio, pueden aparecer varios campos en una línea.
4. Haz clic en el botón «Guardar» que está situado en la parte superior de la pantalla.

Puedes modificar cómo se muestran el color y el texto de cada campo del formulario de forma individual o puedes configurar el formulario para que cada campo use los mismos ajustes de color y texto.

Si haces clic en un campo individual del formulario, en los ajustes del bloque aparecerá el botón «Sincronizar estilo de campos». Si activas esta opción, los cambios que hagas en este campo afectarán a todos los campos. Desactiva esta opción si quieres cambiar solo los ajustes de ese campo:

Puedes sincronizar los siguientes cambios en todos los campos para ofrecer una experiencia visual coherente en todo el formulario:

• Color: configura los colores para los siguientes elementos:
  • Texto de la etiqueta: el texto que aparece encima del campo de formulario.
  • Texto del campo: el texto (opcional) del marcador de posición, así como el texto de entrada de un campo.
  • Fondo del campo: el fondo de la sección de entrada de un campo del formulario.
  • Borde: borde alrededor del campo del formulario.
• Estilos de campo de entrada: establece el tamaño del texto, la altura de la línea y los estilos de borde del campo.
• Estilos de etiqueta: configura el tamaño del texto y la altura de la línea para las etiquetas del campo.

Para modificar los colores del formulario, sigue estos pasos:

1. Abre la vista de lista y busca el bloque Formulario y los campos individuales que contiene:

2. Con el bloque Formulario general seleccionado, abre los ajustes del bloque en la barra lateral y luego haz clic en la pestaña Estilos (el icono del círculo blanco y negro).
3. Con los ajustes de color, puedes configurar el color del texto y el color de fondo del formulario, así como el color de los enlaces que se utilizan en él:

4. A continuación, haz clic en un campo individual del formulario y vuelve a abrir los ajustes del bloque.
5. Aquí puedes modificar los siguientes colores de forma individual para cada campo de formulario:
   • Texto de la etiqueta: el texto que aparece encima del campo de formulario.
   • Texto del campo: el texto (opcional) del marcador de posición, así como el texto de entrada de un campo.
   • Fondo del campo: el fondo de la sección de entrada de un campo del formulario.
   • Borde: borde alrededor del campo del formulario.
6. Activa la opción «Sincronizar estilo de campos» para aplicar los cambios a todos los campos o desactívala para ajustar cada campo de forma individual.
7. Haz clic en el botón «Guardar» que está situado en la parte superior de la pantalla.