Añadir una imagen de fondo a tus formularios

¿Te gustaría saber cómo añadir imágenes de fondo a tus formularios? ¡Es fácil dar estilo a tu formulario con una imagen o un degradado de color como telón de fondo usando CSS!

Este tutorial te mostrará cómo añadir una imagen de fondo a tu formulario.

---

1. Elegir una imagen de fondo

Necesitarás elegir una imagen para usarla como fondo de tu formulario para empezar. Puedes usar cualquier imagen de tu biblioteca de medios, o de cualquier lugar de Internet al que tu sitio pueda acceder.

Consideraciones a tener en cuenta

Para una máxima legibilidad, asegúrate de que haya suficiente contraste entre la imagen de fondo y cualquier texto o campo de tu formulario.

Por ejemplo, evita usar texto claro sobre un fondo claro. En su lugar, usa texto más oscuro sobre fondos pálidos y texto más claro sobre fondos oscuros.

2. Elegir un formulario

A continuación, elige el formulario que deseas personalizar. Si todavía necesitas crear un formulario, añade uno nuevo haciendo clic en WPForms » Añadir nuevo.

Puedes elegir entre una de las muchas plantillas de formularios disponibles para empezar.

Si ninguna de las opciones predeterminadas se ajusta a tus necesidades, aún puedes elegir una plantilla similar y personalizarla en el Creador de Formularios.

3. Añadir una imagen de fondo a tu formulario

En el Creador de Formularios, ve a Ajustes » General » Avanzado.

Desde aquí, introduce un nombre de clase en Clase CSS del formulario. Siéntete libre de usar cualquier nombre para tu clase, pero recomendamos añadir wpf- como prefijo. Esto ayuda a evitar conflictos entre tu código CSS personalizado y cualquier tema o plugin de tu sitio.

Uso de una imagen existente

Si quieres usar una imagen de tu biblioteca de medios, necesitarás la URL completa de la imagen. Para obtenerla, primero, ve a Medios » Biblioteca desde el panel de administración de WordPress.

Desde aquí, haz clic en la imagen que deseas usar.

En el cuadro de diálogo que se abre, haz clic en Copiar URL al portapapeles.

Esto copiará la URL de la imagen a tu portapapeles.

Una vez que hayas hecho esto, regresa al panel de administración de WordPress y ve a Apariencia » Personalizar, luego elige CSS adicional.

A continuación, crea una clase personalizada con la propiedad background-image y pega la URL que copiaste anteriormente.

Hemos escrito un ejemplo de dicha clase a continuación. Recuerda reemplazar /path/wpforms-backdrop.png con la URL real de tu imagen.

Tu configuración debería parecerse a esto.

Una vez que estés seguro de que tu código es correcto, haz clic en Publicar para guardar tus cambios.

Si no hay errores en tu código, tu formulario ahora tendrá una imagen de fondo. Aquí tienes un ejemplo de formulario que utiliza el código anterior:

Usar un degradado como imagen de fondo

Con CSS, los degradados de color se pueden usar como imágenes, y esta solución funciona también con tus formularios. Los degradados son ampliamente personalizables y pueden usar cualquier número de colores.

Dado que los degradados se autogeneran, no necesitas una imagen de origen de tu biblioteca de medios ni de ningún otro lugar en Internet. Esto ofrece la ventaja de una mayor velocidad y singularidad. Tampoco tendrás que preocuparte de que la imagen de origen desaparezca.

Hay tres tipos de degradados disponibles en CSS:

• conic-gradient()
• degradado-lineal()
• radial-gradient()

En este ejemplo, te mostraremos cómo usar un degradado lineal simple como fondo para tu formulario. Simplemente escribe tu clase como lo hiciste antes, pero en lugar de usar una URL, usaremos la función CSS linear-gradient().

Para ver cómo funciona esto, consulta el siguiente ejemplo de código:

.wpf-custom-background {
    background-image: linear-gradient(#0299ed, #FFFFFF) !important;
    /*Padding isn't necessary, but highly recommended*/
    padding: 15px 35px !important;
}

Esto producirá un degradado de azul suave a blanco como imagen de fondo de tu formulario:

Preguntas frecuentes

A continuación, hemos respondido algunas de las preguntas más frecuentes sobre cómo agregar una imagen de fondo a los formularios.

¿Cómo agrego una imagen de fondo a mis formularios que usan el complemento de Formularios Conversacionales?

Si agregas una imagen de fondo usando el método descrito anteriormente, no se aplicará al formulario. Esto se debe a que los formularios conversacionales utilizan una opción de estilo diferente.

Para agregar una imagen de fondo a un formulario que utiliza el complemento de Formularios Conversacionales, necesitarás usar el selector CSS #wpforms-conversational-form-page. Aquí tienes un ejemplo de código. Asegúrate de reemplazar la ruta en la propiedad url() con la imagen real que deseas usar.

#wpforms-conversational-form-page {
     background-image: url(/path/wpforms-backdrop.png) !important;
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover;
}

¡Eso es todo! Ahora sabes cómo agregar una imagen de fondo a tus formularios en WPForms.

¿Te gustaría saber cómo estilizar tus formularios sin usar código? Consulta nuestra guía para personalizar WPForms con CSS Hero.