Personaliza tus formularios con CSS: Ejemplos

Utiliza tus propias hojas de estilo para personalizar el aspecto de tus formularios en HTML.

¿Aún no te has inscrito en Wufoo? ¡Empecemos!

Por: Andrew Gosnell

Si quieres personalizar tu formulario Wufoo, el Diseñador de temas tiene muchas opciones integradas. Puedes cambiar fácilmente los colores de fondo de tu formulario, la tipografía, el logotipo y muchas otras cosas, todo sin escribir ningún código.

Pero, ¿y si quieres hacer más de lo que te permiten esas opciones integradas? Si estás dispuesto a crear tus propias reglas de CSS, puedes incluir tu propia hoja de estilos y anular cualquiera de los estilos de Wufoo predeterminados. Para usar tu propia CSS, crea un tema en el Diseñador de temas e incluye en las Propiedades avanzadas una URL que señale a tu hoja de estilo en la web.

Check out our Form Anatomy blog post by Chris Coyier to see more details about how to set this up. That has a step-by-step video explanation and a cool chart that shows the html/css anatomy of how Wufoo forms are laid out.

¿Y qué puedo hacer con esto?

Veamos algunos ejemplos de lo que puedes hacer con una CSS personalizada. Primero, cambiaremos el borde del campo. En lugar de la sombra falsa, probemos con un borde fino de color gris oscuro.

Con las herramientas para desarrolladores de Chrome, podemos inspeccionar el elemento. (También puedes usar las herramientas para desarrolladores de Firefox o el inspector Web de Safari.)

Inspeccionar utilizando las herramientas del desarrollador

Aquí podemos ver que tendremos que configurar las propiedades del borde y el fondo. Con estas reglas de CSS, podemos poner un borde gris oscuro y un fondo blanco.


input.text {
    border: 1px solid #222;
    background: #fff;
}

Ahora volvemos a cargar el formulario ... ya casi estamos.

Agreguemos el campo desplegable País a nuestro selector para configurarlo igual que el resto.


input.text, select.select {
    border: 1px solid #222;
    background: #fff;
}

Volvemos a cargar el formulario, y ya tenemos nuestros nuevos bordes.

Para nuestro próximo ejemplo, cambiemos el color de fondo del cuadro del importe total. Primero, podemos inspeccionar el elemento para ver qué hay que cambiar.

Luego, agregamos nuestra nueva regla de CSS.


.wufoo #lola {
    background: #99ccff;
}

Y, a continuación, el nuevo color de fondo.

¿Qué tal iría un elegante fondo de gradiente? Dejaremos el color de fondo predeterminado para los navegadores más antiguos que no admiten la función de gradiente de CSS3.


.wufoo #lola {
    background: #99ccff; /*fallback color for browsers that don't support gradients*/

    background-image: -webkit-linear-gradient(to bottom, #FFF7C0, #99ccff);
    background-image: -moz-linear-gradient(to bottom, #FFF7C0, #99ccff);
    background-image: -ms-linear-gradient(to bottom, #FFF7C0, #99ccff);
    background-image: linear-gradient(to bottom, #FFF7C0, #99ccff);
}

Pasemos ahora a cosas más complicadas. Supongamos que queremos reducir la altura del formulario.

Una solución es cambiar el tamaño de fuente en el Diseñador de temas, que también hará que los campos se vean más pequeños. Pero si queremos reducir el espacio entre los campos, tendremos que usar CSS.

Empecemos con el espaciado entre los campos de texto y usemos etiquetas alineadas a la derecha, que es una opción estándar en la configuración del formulario.


form li {
    padding-top: 0;
    padding-bottom: 0;
}

label.desc {
    padding: 0;
}

input.text {
    padding: 0;
}

Ya hemos conseguido algo, pero queremos hacer lo mismo con los campos de dirección. Agreguemos estas reglas.


form li.complex div span {
    padding-bottom: 0;
}

.safari select.select {
    font-size: 95% !important;
}

form li div label, form li span label {
    padding-top: 0;
}

Ten en cuenta estos aspectos cuando utilices CSS personalizado

Cerciórate de que si tu formulario se está cargando sobre SSL, el archivo CSS también lo haga. Muchos navegadores modernos no cargarán tu archivo CSS sobre HTTP si la propia página (tu formulario) está usando HTTPS/SSL. Tendrás que alojarlo en un servidor con SSL habilitado o necesitarás desactivar SSL en tu formulario.

Si estás usando Dropbox para alojar el archivo CSS, copia el enlace a tu archivo y luego agrega ?dl=1 al final del enlace. Puedes pegar esa URL combinada en tu configuración de temas de Wufoo. De esa forma, se cargará el archivo directo.

Probablemente, el enlace se verá así:



https://www.dropbox.com/s/a-long-code-here/example.css?dl=1

Si estás alojando el archivo CSS en tu propio servidor, verifica que sea de acceso público. El archivo se cargará como una hoja de estilo externa normal en tu formulario y si está detrás de una pantalla de inicio de sesión en tu sitio, no se cargará en el navegador.