Diseña el formulario para que coincida con tu marca y con tu combinación de colores. Un formulario claro y atractivo anima a los visitantes del sitio a enviarlo. Puedes cambiar el diseño general del formulario o hacer clic en un campo del formulario en particular para cambiar su diseño.
Aprende cómo:
Diseñar los formularios de tu sitio
Elige entre un diseño preestablecido con colores y temas similares, o personaliza el diseño de tu formulario para que coincida con tus necesidades.
Para diseñar los formularios de tu sitio:
- Ve al Editor y selecciona un formulario.
- Selecciona el icono Diseño
en la barra superior.
- Selecciona uno de los diseños preestablecidos. Selecciona una opción para ver el cambio de formulario en la página. El contenido es el mismo.
- (Opcional) Selecciona Personalizar para modificar aún más el formulario.
- Personaliza el formulario al cambiarle el diseño de los campos, el botón de enviar y el fondo.
Primero elige qué parte del formulario quieres diseñar:
- Campos: actualiza el diseño de todos los campos del formulario.
Nota: Esta opción cambia todos los campos del formulario. Selecciona un campo individual para diseñar solo ese campo. - Botón de Enviar: personaliza el diseño del botón de envío del formulario.
- Fondo del formulario: personaliza el fondo del formulario (espacio alrededor de los campos).
Luego personaliza el elemento con las siguientes opciones de diseño:
- Color y opacidad: personaliza el color del fondo del elemento. Selecciona la caja de color para elegir el color de fondo y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Borde: agrega y personaliza el borde del elemento. Selecciona la caja de color para elegir el color del borde y arrastra el control deslizante para aumentar o disminuir la opacidad de este. Elige el estilo del borde en Estilo del borde.
- Esquinas: curva las esquinas del elemento. Ingresa un valor en cada esquina o selecciona el icono de candado para cambiar todos los valores juntos.
- Sombreado: agrega una sombra al elemento.
- Selecciona la palanca Activar sombreado para habilitarla.
- Personaliza la sombra con estas opciones:
- Ángulo: selecciona el ángulo de la sombra.
- Distancia (px): arrastra el control deslizante para aumentar o disminuir la distancia de la sombra.
- Tamaño (px): arrastra el control deslizante para aumentar o disminuir el tamaño de la sombra.
- Efecto borroso: arrastra el control deslizante para aumentar o disminuir el desenfoque de la sombra.
- Texto: puedes cambiar el color y la fuente del texto para los campos y el botón de enviar.
- Campos:
- Título del campo: cambia el color, la opacidad y el texto del título que está arriba del campo del formulario.
- Entrada: cambia el color, la opacidad y la fuente del texto del marcador de posición que va dentro del campo del formulario.
- Botón de Enviar:
- Habitual: selecciona la pestaña Habitual para cambiar el diseño del botón en el formulario.
- Efecto cursor: selecciona la pestaña Efecto cursor para cambiar el diseño del botón cuando los visitantes pasan el cursor sobre él.
Diseñar campos individuales del formulario
Si lo único que quieres hacer modificar el diseño de campos específicos en tu formulario (por ejemplo, nombre y número de teléfono), puedes seleccionar un campo individual y diseñarlo a tu medida.
Para diseñar campos individuales del formulario:
- Ve al Editor y selecciona un formulario.
- Selecciona el campo dentro del formulario que deseas diseñar (por ejemplo, Apellido).
- Selecciona el icono Diseño encima del campo del formulario.
- Elige un diseño preestablecido para el campo del formulario. Según el campo que hayas seleccionado, verás diferentes opciones. Por ejemplo, los campos de texto te permiten diseñar el color y el fondo del texto, mientras que los campos de fecha (por ejemplo, Fecha de nacimiento) te permiten seleccionar entre diferentes diseños de calendario.
- (Opcional) Selecciona Personalizar para personalizar aún más el campo.
- Personaliza el campo del formulario con las opciones disponibles.
Personaliza el campo del formulario. Algunos campos tienen más de una pestaña (es decir, Normal y Efecto cursor). Selecciona cada pestaña para personalizarlas.
- Color y opacidad: personaliza el color del campo. Selecciona la caja de color para seleccionar el color de fondo y arrastra el control deslizante para aumentar o disminuir la opacidad.
- Borde: agrega y personaliza el borde del campo. Selecciona la caja de color para elegir el color del borde y arrastra el control deslizante para aumentar o disminuir la opacidad de este. Elige el estilo del borde en Estilo del borde.
- Esquinas: curva las esquinas del campo. Ingresa un valor en cada esquina o selecciona el icono del candado para cambiar todos los valores juntos.
- Sombreado: agrega una sombra al campo.
- Selecciona la palanca Activar sombreado para habilitarla.
- Personaliza la sombra con estas opciones:
- Ángulo: selecciona el ángulo de la sombra.
- Distancia (px): arrastra el control deslizante para aumentar o disminuir la distancia de la sombra.
- Tamaño: arrastra el control deslizante para aumentar o disminuir el tamaño de la sombra.
- Efecto borroso: arrastra el control deslizante para aumentar o disminuir el desenfoque de la sombra.
- Texto: cambia la fuente, el tamaño y el color del texto del campo.
