Cómo usar palabras clave CSS para ajustar el formato

Palabras clave del formato de CSS, que puedes ingresar en la Configuración de campo de cualquier campo de tu formulario, te permite ajustar el formato y la posición de los campos y el texto de tu formulario u ocultar ciertos elementos del formulario. Se pueden usar muy fácilmente y te da más control sobre la apariencia de tu formulario.

No necesitas saber CSS para aprovechar sus funciones, pero si estás familiarizado con CSS, funciona así:

Las palabras clave de formato CSS son nombres de clase —al agregar una de nuestras palabras clave de formato CSS a un campo se agrega ese nombre de clase al elemento padre que rodea ese campo. Esto aplica el estilo asociado con esa clase, tal como se define en la hoja de estilo CSS que rige todos los formularios de Wufoo, a tu campo.

Reseña del video

Cómo agregar palabras clave de formato CSS a un campo

Para agregar palabras clave de formato CSS a un campo:

  1. Inicia sesión y ve a Formularios.
  2. Haz clic en Editar junto al formulario que quieres editar.
  3. Haz clic en Editar formulario.
  4. Haz clic en el campo cuyo formato deseas ajustar. Esto abre la Configuración de campo.
  5. En el campo Agregar palabras clave de formato CSS, ingresa una o más palabras clave de CSS. Si agregas varias palabras clave, separa cada una con un espacio.
  6. Haz clic en Guardar formulario.

No verás el formato actualizado en el Creador de formularios, ¡para ver la magia en acción, tendrás que ver tu formulario! Las palabras clave de CSS también se reflejarán en el Administrador de entradas.

Palabras clave para colocar campos lado a lado

También puedes usar palabras clave CSS para colocar 2, 3, 4 o 5 campos consecutivos lado a lado, en lugar de el formato predeterminado donde cada campo comienza en su propia línea.

 

Palabras clave de formato de CSS
Descripción
Tipos de campo compatibles
leftHalf
rightHalf

Usa estas palabras clave en dos campos consecutivos para colocarlas lado a lado, dos seguidas.

Todo, excepto Likert
leftThird
middleThird
rightThird
Usa estas palabras clave en tres campos consecutivos para colocarlas lado a lado, tres seguidas.Todo, excepto Likert
leftFourth
middleFourth
middleFourth
rightFourth
Usa estas palabras clave en cuatro campos consecutivos (usa middleFourth en el segundo y el tercer campo) para colocarlos lado a lado, cuatro seguidos.Todo, excepto Likert
leftFifth
middleFifth
middleFifth
middleFifth
rightFifth
Usa estas palabras clave en cinco campos consecutivos (usa middleFifth en en el tercero y en el cuarto campo) para colocarlos lado a lado, cinco seguidas.Todo, excepto Likert
Ver ejemplos

2 campos, lado a lado

3 campos, lado a lado

4 campos, lado a lado

5 campos, lado a lado

Palabras clave para ocultar campos

Las siguientes palabras clave son para ocultar campos o partes específicas de un campo.

Palabra clave de formato de CSS
Descripción
Tipos de campo compatibles
hideOculta el campo entero desde tu formulario dirigido al público. Cualquier entrada

El campo aún estará visible para los administradores en el Administrador de entradas, para que puedas llenar los valores en el campo usando las Modificaciones de URL, lo cual es útil para dar seguimiento.
Todos
cloakOculta todas las entradas en un campo, pero deja la etiqueta del campo. El campo será visible para los administradores en el Administrador de entradas

Aprende a usar este campo clave para crear un sistema de cupones.
Todos
hideSecondaryOculta el enlace Anterior que permite a las personas volver a páginas anteriores en el formulario.Salto de página
hideCentsOculta el cuadro de texto Centavos en el campo Precio.Precio
hideSecondsOculta el cuadro de texto Segundos en el campo Hora.Hora
hideAMPMOculta el menú desplegable AM/PM en el campo Hora.Hora
hideAddr2Oculta la segunda línea de dirección postal en el campo Dirección.Dirección

Si usas una palabra "hide" clave en un campo obligatorio, cuando no llenas el cuadro de texto oculto, no falla la validación, por lo que nadie perderá la oportunidad de continuar con tu formulario por no poder llenar un campo que no puede ver.

Palabras clave para cambiar el formato de texto

Las siguientes palabras clave sirven para cambiar la forma en que se muestran los textos adicionales en tu formulario.

Palabra clave de formato de CSS
Descripción
Tipos de campo compatibles
altInstructMueve las Instrucciones para el usuario debajo el campo, en lugar de estar en un cuadro a la derecha del campo.
Todos
scrollTextConvierte el campo Salto de sección en un cuadro de altura fija con una barra desplazable. Esto resulta útil si tienes un fragmento de texto que ocupa demasiado espacio en el formulario.
Salto de sección

Crea tus propias palabras clave CSS

Si sabes CSS, puedes aprovechar aún más este paso al crear tus propias palabras clave CSS

Dado que las palabras clave solo son nombres de clases de CSS que se agregan al elemento principal que rodea a un campo, puedes anexar tu propia hoja de estilo fácilmente a un tema que contenga tus propias reglas según el nombre de clase que se esté agregando al campo, y luego hacer referencia a esas clases en la configuración de campo de tu formulario.

  1. Agrega una hoja de estilo CSS personalizada a tu tema y aplica ese tema a tu formulario.
  2. Vuelve al Creador de formularios para editar tu formulario.
  3. Ingresa tu nombre de clase personalizada en la configuración de campo Agregar palabras clave de formato CSS del campo de tu elección.

Esto agregará la clase al elemento original del campo.

Usa las palabras clave de formato CSS para colocar campos lado a lado, ocultar campos completos o partes de campos y ajustar la ubicación del texto adicional en tu formulario. ¡No se necesita tener conocimientos de CSS!

Crea formularios en línea

Añade formularios en HTML a tu sitio en un instante y sin requerir código.

Cambiar idioma